<i18n>
{
  "en": {
    "statements": {
      "RevisionComment": {
        "dialogTitle": "Returning an application for revision",
        "dialogReadonlyTitle": "Comment when returning for revision",
        "saveComment": "Save",
        "cancelComment": "Cancel",
        "banner": "The application will be returned for revision. The status of the application will be changed. You can leave a comment for the employee who prepared the draft decision.",
        "placeholder": "Comment (optional)",
        "close": "Close"
      }
    }
  },
  "ru": {
    "statements": {
      "RevisionComment": {
        "dialogTitle": "Возврат заявления на доработку",
        "dialogReadonlyTitle": "Комментарий при возврате на доработку",
        "saveComment": "Сохранить",
        "cancelComment": "Отмена",
        "banner": "Заявление будет возвращено на доработку. Статус заявления будет изменен. Вы можете оставить комментарий для сотрудника, подготовившего проект решения.",
        "placeholder": "Комментарий (необязательно)",
        "close": "Закрыть"
      }
    }
  }
}
</i18n>

<template>
  <div>
    <q-btn
      class="q-ml-sm"
      padding="6px"
      outline
      :class="{ hidden: !get(buttonSettings, 'props.visible', true) }"
      v-if="!readonly"
      :icon="get(buttonSettings, 'props.icon')"
      :label="get(buttonSettings, 'props.label')"
      :color="get(buttonSettings, 'props.color')"
      :disable="disableAllButtons"
      @click="doAction"
    >
      <slot />
    </q-btn>
    <q-btn
      dense
      v-if="readonly"
      flat
      :class="{ hidden: !get(buttonSettings, 'props.visible', true) }"
      :icon="get(buttonSettings, 'props.icon')"
      :color="get(buttonSettings, 'props.color')"
      size="md"
      @click="doAction"
    >
      <q-tooltip>
        {{ get(buttonSettings, 'tooltip') }}
      </q-tooltip>
    </q-btn>
    <q-dialog v-model="value">
      <q-card class="no-shadow" style="max-width: 80vw; width: 700px">
        <q-card-section class="q-pb-sm text-h6">
          {{
            readonly
              ? $t('statements.RevisionComment.dialogReadonlyTitle')
              : $t('statements.RevisionComment.dialogTitle')
          }}
        </q-card-section>
        <q-card-section v-if="!readonly" class="q-pt-none">
          <q-banner rounded class="q-mt-md grey-banner q-py-xs">
            <div class="text-grey-9">
              {{ $t('statements.RevisionComment.banner') }}
            </div>
          </q-banner>
        </q-card-section>
        <q-card-section class="q-gutter-y-md">
          <q-input
            v-model="comment"
            :label="
              readonly ? '' : $t('statements.RevisionComment.placeholder')
            "
            filled
            type="textarea"
            :readonly="readonly"
          />
        </q-card-section>
        <q-card-section class="full-width flex justify-end">
          <q-btn
            v-for="button in buttons"
            :key="button.id"
            class="q-ml-sm"
            :label="button.props.label"
            v-if="button.props.visible"
            :color="button.props.color"
            :outline="button.props.outlined"
            :loading="button.props.loading"
            @click="button.handler"
          />
        </q-card-section>
      </q-card>
    </q-dialog>
  </div>
</template>

<script>
import get from 'lodash/get';

export default {
  props: [
    'row',
    'common',
    'model',
    'disable-all-buttons',
    'user-task',
    'button-settings',
  ],

  computed: {
    readonly() {
      return get(this.buttonSettings, 'id') === 'returnForRevision_info';
    },
    buttons() {
      return [
        {
          id: 'cancel',
          props: {
            color: 'negative',
            label: this.$t('statements.RevisionComment.cancelComment'),
            loading: false,
            outlined: true,
            visible: !this.readonly,
          },
          handler: () => {
            this.$recordActivity({
              buttonCode: 'application_return_cancel',
              extraInfo: {
                previewInfo: [
                  {
                    value: this.model?.common?.orderId,
                    label: 'номер',
                  },
                ],
              },
            });
            this.comment = '';
            this.value = false;
          },
        },
        {
          id: 'add',
          props: {
            color: 'primary',
            label: this.$t('statements.RevisionComment.saveComment'),
            loading: false,
            outlined: false,
            visible: !this.readonly,
          },
          handler: () => {
            this.$recordActivity({
              buttonCode: 'application_return_save',
              extraInfo: {
                previewInfo: [
                  {
                    value: this.model?.common?.orderId,
                    label: 'номер',
                  },
                ],
              },
            });
            this.saveComment();
            this.value = false;
          },
        },
        {
          id: 'close',
          props: {
            color: 'primary',
            label: this.$t('statements.RevisionComment.close'),
            loading: false,
            outlined: false,
            visible: this.readonly,
          },
          handler: () => {
            this.value = false;
          },
        },
      ];
    },
  },

  data() {
    return {
      comment: '',
      value: false,
    };
  },

  methods: {
    get,
    doAction() {
      this.$recordActivity({
        buttonCode: 'application_return',
        extraInfo: {
          previewInfo: [
            {
              value: this.model?.common?.orderId,
              label: 'номер',
            },
          ],
        },
      });
      if (get(this.model, 'system.status.comment')) {
        this.comment = get(this.model, 'system.status.comment');
      }
      this.value = true;
    },
    saveComment() {
      this.$emit('submit', {
        buttonId: 'returnForRevision',
        data: {
          returnForRevisionComment: this.comment,
        },
      });
    },
  },
};
</script>
