<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    :title="t('monitor.message.log.email.detailTitle')"
    centered
    :okButtonProps="{ disabled: true }"
    @ok="handleOK"
    :width="700"
  >
    <div class="pt-6px pr-6px">
      <BasicForm @register="registerForm" />
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, h } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { Tinymce } from '/@/components/Tinymce';
  import { useI18n } from '/@/hooks/web/useI18n';

  const schemas: FormSchema[] = [
    {
      field: 'emailBody',
      component: 'Input',
      label: '',
      rules: [{ required: true }],
      render: ({ model, field }) => {
        return h(Tinymce, {
          value: model[field],
          // showImageUpload: false,
          onChange: (value: string) => {
            model[field] = value;
          },
        });
      },
    },
  ];
  export default defineComponent({
    components: { BasicModal, BasicForm },
    setup() {
      const { t } = useI18n();
      const [registerForm, { resetFields, setFieldsValue }] = useForm({
        labelWidth: 70,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      const [register, { closeModal }] = useModalInner(async (data) => {
        await resetFields();
        await setFieldsValue({
          ...data.record,
        });
      });

      async function handleOK() {
        closeModal();
      }

      return { register, schemas, registerForm, handleOK, t };
    },
  });
</script>