<template>
  <basicModal @register="modalRegister" ref="modalRef" @ok="okModal">
    <template #default>
      <BasicForm @register="registerForm" class="pt-6 basicForm" />
    </template>
  </basicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicForm, useForm } from '@/components/Form/index';
  import { basicModal, useModal } from '@/components/Modal';
  import { addDictType, editDictType } from '@/api/system/dictionary';
  import type { FormSchema } from '@/components/Form/index';
  import { ElMessage } from 'element-plus';

  const emit = defineEmits(['change', 'register']);

  const message = ElMessage;

  const props = defineProps({
    title: {
      type: String,
      default: '添加字典',
    },
  });

  //表单项配置
  const schemas: FormSchema[] = [
    {
      field: 'dictId',
      hidden: true,
    },
    {
      field: 'dictName',
      component: 'Input',
      label: `字典名称`,
      componentProps: {
        placeholder: `请输入字典名称`,
      },
      rules: [
        {
          required: true,
          message: `字典名称不能为空`,
          trigger: ['blur'],
        },
      ],
    },
    {
      field: 'dictType',
      component: 'Input',
      label: '字典类型',
      labelMessage: '如已经用到此类型，修改此处时候，相关代码也需要一并修改',
      componentProps: {
        placeholder: `请输入字典类型`,
      },
      rules: [
        {
          required: true,
          message: `字典类型不能为空`,
          trigger: ['blur'],
        },
      ],
    },
    {
      field: 'status',
      component: 'RadioGroup',
      label: '状态',
      componentProps: {
        options: [
          {
            label: '正常',
            value: '0',
          },
          {
            label: '停用',
            value: '1',
          },
        ],
      },
    },
    {
      field: 'remark',
      component: 'Input',
      label: '备注',
      componentProps: {
        placeholder: '请输入备注',
        type: 'textarea',
      },
    },
  ];

  const title = ref(props.title);

  //创建form
  const [registerForm, { submit, setFieldsValue, getFieldsValue }] = useForm({
    collapsed: false,
    labelWidth: 100,
    layout: 'horizontal',
    submitButtonText: '确定',
    showActionButtonGroup: false,
    schemas,
  });

  //弹窗
  const [modalRegister, { openModal, closeModal, setSubLoading, setProps }] = useModal({
    title,
    subBtuText: '确定',
    width: 450,
  });

  //提交
  async function okModal() {
    const formRes = await submit();
    if (formRes) {
      const formData = getFieldsValue();
      const params = {
        ...formData,
      };
      if (formData.dictId) {
        editDictType(params)
          .then(() => {
            message.success('修改成功');
            emit('change');
            closeModal();
          })
          .catch(() => {
            setSubLoading(false);
          });
      } else {
        addDictType(params)
          .then(() => {
            message.success('添加成功');
            emit('change');
            closeModal();
          })
          .catch(() => {
            setSubLoading(false);
          });
      }
    } else {
      message.error('验证失败，请填写完整信息');
      setSubLoading(false);
    }
  }

  //导出方法
  defineExpose({
    openModal,
    closeModal,
    setFieldsValue,
    setProps,
  });
</script>
