<template>
  <BasicModal v-bind="$attrs" @register="register" title="邮件发送参数"
              :okButtonProps="{ disabled: true }"
              @ok="handleOK"
              width="700px">
    <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';
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 [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 };
  },
});
</script>