<i18n>
{
  "en": {
    "statements": {
      "ExtraDataRequiredDialog": {
      }
    }
  },
  "ru": {
    "statements": {
      "ExtraDataRequiredDialog": {
      }
    }
  }
}
</i18n>

<template>
  <div>
    <q-btn
      :disable="disableAllButtons || buttonDisable"
      class="q-ml-sm"
      outline
      :label="get(buttonSettings, 'props.label')"
      :color="get(buttonSettings, 'props.color')"
      :class="{ hidden: !get(buttonSettings, 'props.visible', true) }"
      @click="dialogVisible = true"
    />
    <q-dialog v-model="dialogVisible">
      <q-card
        class="no-shadow"
        :style="{
          maxWidth: '80vw',
          width: '700px',
        }"
      >
        <q-form @submit="submit">
          <q-card-section class="text-h6">
            <q-banner rounded class="q-mt-md grey-banner q-py-xs">
              <div class="text-grey-9">
                Направление уведомления заявителю о приостановлении заявления и
                представлении дополнительных документов и (или) сведений
              </div>
            </q-banner>
          </q-card-section>
          <q-card-section>
            <q-input
              v-model="comment"
              label="Комментарий"
              filled
              required
              type="textarea"
            />
          </q-card-section>
          <q-card-actions class="q-pa-md" align="left">
            <q-btn type="submit" label="Запросить" color="primary" unelevated />
          </q-card-actions>
        </q-form>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import get from 'lodash/get';

@Component({
  methods: {
    get,
  },
})
export default class ExtraDataRequired extends Vue {
  @Prop() readonly model: any;
  @Prop() readonly disableAllButtons: any;
  @Prop({ required: true }) readonly userTask!: any;
  @Prop() readonly buttonSettings: any;

  comment = this.userTask.userTask?.outData?.commentTemplate || '';
  dialogVisible = false;

  get buttonDisable() {
    return get(this.buttonSettings, 'props.disable', false);
  }

  submit() {
    this.$emit('update', {
      comment: this.comment,
    });
    this.$emit('submit', {
      buttonId: 'extraDataRequired',
      data: {
        comment: this.comment,
      },
      force: true,
    });
  }
}
</script>
