<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form';
import { useForm } from '@/hooks/web/useForm';
import { PropType, reactive, watch } from 'vue';
import { useValidator } from '@/hooks/web/useValidator';
import { getDictOneApi } from '@/api/common';

const { required } = useValidator();

const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null,
  },
  actionType: {
    type: String,
    default: 'add',
  },
});

const { formRegister, formMethods } = useForm();
const { setValues, getFormData, getElFormExpose } = formMethods;

const formSchema = reactive<FormSchema[]>([
  {
    field: 'systemCode',
    label: '系统编码',
    component: 'Input',
    componentProps: {},
    hidden: true,
  },
  {
    field: 'systemName',
    label: '系统名称',
    component: 'Input',
    componentProps: {},
    hidden: true,
  },
  {
    field: 'systemVersion',
    label: '系统版本号',
    component: 'Input',
    componentProps: {},
    hidden: true,
  },
  {
    field: 'modelId',
    label: '模型ID',
    component: 'Input',
    componentProps: {},
    hidden: true,
  },
  {
    field: 'modelName',
    label: '模型名称',
    component: 'Input',
    componentProps: {},
    hidden: true,
  },
  {
    field: 'fieldCode',
    label: '字段编码',
    component: 'Input',
    componentProps: {
      disabled: props.actionType === 'edit',
    },
  },
  {
    field: 'fieldName',
    label: '字段名称',
    component: 'Input',
    componentProps: {},
  },
  {
    field: 'dbType',
    label: '数据库类型',
    component: 'Select',
    optionApi: async () => {
      const res = await getDictOneApi({
        paramName: 'DataBaseType_param',
        systemCode: 'system',
      });
      return res;
    },
    componentProps: {},
  },
  {
    field: 'fieldType',
    label: '字段类型',
    component: 'Select',
    componentProps: {
      disabled: props.actionType === 'edit',
    },
    optionApi: async () => {
      const res = await getDictOneApi({
        paramName: 'DataType_param',
        systemCode: 'system',
      });
      return res;
    },
  },
  {
    field: 'fieldLength',
    label: '字段长度',
    component: 'InputNumber',
    componentProps: {},
  },
  {
    field: 'fieldPrecision',
    label: '字段精度',
    component: 'InputNumber',
    componentProps: {
      disabled: props.actionType === 'edit',
    },
  },
  {
    field: 'isNull',
    label: '是否为空',
    component: 'Switch',
    componentProps: {
      inlinePrompt: true,
      activeText: '是',
      activeValue: '1',
      inactiveText: '否',
      inactiveValue: '0',
    },
  },
  {
    field: 'isPkid',
    label: '是否主键',
    component: 'Switch',
    componentProps: {
      inlinePrompt: true,
      activeText: '是',
      activeValue: '1',
      inactiveText: '否',
      inactiveValue: '0',
    },
  },
]);

const rules = reactive({
  fieldCode: [required()],
  fieldName: [required()],
  dbType: [required()],
  fieldType: [required()],
});

const submit = async () => {
  const elForm = await getElFormExpose();
  const valid = await elForm?.validate().catch(err => {
    console.log(err);
  });
  if (valid) {
    const formData = await getFormData();
    return formData;
  }
};

watch(
  () => props.currentRow,
  currentRow => {
    if (!currentRow) return;
    setValues(currentRow);
  },
  {
    deep: true,
    immediate: true,
  },
);

defineExpose({
  submit,
});
</script>

<template>
  <Form :rules="rules" @register="formRegister" :schema="formSchema" />
</template>
