<i18n>
{
  "en": {
    "EmployeesMessageForm": {
      "formName": "Message",
      "template": "Template",
      "apply": "Apply",
      "send": "Send"
    }
  },
  "ru": {
    "EmployeesMessageForm": {
      "formName": "Сообщение",
      "template": "Шаблон",
      "apply": "Применить",
      "send": "Далее"
    }
  }
}
</i18n>
<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div class="text-h6">
      {{ $t('EmployeesMessageForm.formName') }}
    </div>

    <div class="flex flex-center q-gutter-x-md">
      <div class="col">
        <q-select
          v-model="template"
          :options="templates"
          filled
          emit-value
          map-options
          :label="$t('EmployeesMessageForm.template')"
        />
      </div>
      <div class="col">
        <q-btn
          color="primary"
          :label="$t('EmployeesMessageForm.apply')"
          type="button"
          @click="sendApply"
        />
      </div>
    </div>

    <div class="row q-gutter-x-md">
      <q-editor v-model="renderedMessage" min-height="5rem" />
    </div>
    <q-btn
      color="primary"
      :label="$t('EmployeesMessageForm.send')"
      type="button"
      @click="sendCreate"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data'],
  data() {
    return {
      templatesList: [],
      template: '',
      renderedMessage: '',
      templates: [],
    };
  },
  computed: {
    outputData() {
      return {
        template: this.template,
        message: this.renderedMessage,
      };
    },
  },
  watch: {
    inputData: {
      handler: function (val) {
        if (val) {
          if (val.templatesList) {
            this.templatesList = val.templatesList;
            this.templates = this.templatesList.map((el) => {
              return {
                value: el.id,
                label: el.name,
              };
            });
          }
          this.template =
            (val.renderedMessage && val.renderedMessage.templateId) || '';
          this.renderedMessage =
            (val.renderedMessage && val.renderedMessage.body) || '';
        }
      },
      immediate: true,
    },
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
    sendApply(e) {
      this.$emit('submit', e, {
        ...this.outputData,
        transSend: false,
        transApply: true,
      });
    },
    sendCreate(e) {
      this.$emit('submit', e, {
        ...this.outputData,
        transSend: true,
        transApply: false,
      });
    },
  },
};
</script>
