<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 useSystemVersion from '@/hooks/web/useSystemVersion';

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 { formItem } = useSystemVersion(formMethods, { disabled: props.actionType === 'edit' }, props);

const formSchema = reactive<FormSchema[]>([
  ...formItem,

  {
    field: 'modelId',
    label: '模型ID',
    component: 'Input',
    componentProps: {
      disabled: props.actionType === 'edit',
    },
  },
  {
    field: 'modelName',
    label: '模型名称',
    component: 'Input',
    componentProps: {},
  },
  // {
  //   field: 'storeType',
  //   label: '存储方式',
  //   component: 'Select',
  //   componentProps: {
  //     disabled: props.actionType === 'edit',
  //   },
  //   optionApi: async () => {
  //     const res = await getDictOneApi({
  //       paramName: 'DataStoreType_param',
  //       systemCode: 'system',
  //     });
  //     return res;
  //   },
  // },
  // {
  //   field: 'storeFrequency',
  //   label: '存储频度',
  //   component: 'Select',
  //   optionApi: async () => {
  //     const res = await getDictOneApi({
  //       paramName: 'DataStoreFrequency_param',
  //       systemCode: 'system',
  //     });
  //     return res;
  //   },
  //   componentProps: {},
  // },
]);

const rules = reactive({
  system_version: [required()],
  modelId: [required()],
  modelName: [required()],
  storeType: [required()],
  // storeFrequency: [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>
