<script setup lang="tsx">
import { Form, FormSchema } from '@/components/Form';
import { useForm } from '@/hooks/web/useForm';
import { PropType, reactive, watch, ref } from 'vue';
import { useValidator } from '@/hooks/web/useValidator';
import { COUNT_TYPE } from '../constants'
const { required } = useValidator();

const actionType = ref('update');
const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null,
  },
  dialogTableRuleVisible: {
    default: false,
    type: Boolean,
  },
});

const formSchema = reactive<FormSchema[]>([
  {
    field: 'pkid',
    label: '主键',
    component: 'Input',
    hidden: true,
    value: props.currentRow.pkid,
  },
  {
    field: 'sourceSystemCode',
    label: '源系统编码',
    component: 'Input',
    hidden: true,
    value: props.currentRow.sourceSystemCode,
  },
  {
    field: 'targetSystemCode',
    label: '目标系统编码',
    component: 'Input',
    hidden: true,
    value: props.currentRow.targetSystemCode,
  },
  {
    field: 'systemGroupName',
    label: '系统组',
    component: 'Input',
    hidden: true,
    value: props.currentRow.systemGroupName,
  },
  {
    field: 'checkVersion',
    label: '校验版本号',
    component: 'Input',
    hidden: true,
    value: props.currentRow.checkVersion,
  },
  {
    field: 'ruleMakingOrgan',
    label: '规则编制机构',
    component: 'Select',
    hidden: true,
    value: props.currentRow.ruleMakingOrgan,
  },
  {
    field: 'riskLevel',
    label: '风险等级',
    component: 'Select',
    hidden: true,
    value: props.currentRow.riskLevel,
  },
  {
    field: 'attentionDegree',
    label: '官方关注度',
    component: 'Select',
    hidden: true,
    value: props.currentRow.attentionDegree,
  },
  {
    field: 'businessType',
    label: '业务类型',
    component: 'Select',
    hidden: true,
    value: props.currentRow.businessType,
  },
  {
    field: 'frequency',
    label: '执行频度',
    component: 'Select',
    hidden: true,
    value: props.currentRow.frequency,
  },
  {
    field: 'comparator',
    label: '比较符',
    component: 'Select',
    hidden: true,
    value: props.currentRow.comparator,
  },
  {
    field: 'faultTolerance',
    label: '容差范围',
    component: 'Input',
    hidden: true,
    value: props.currentRow.faultTolerance,
  },
  {
    field: 'ruleDesc',
    label: '规则描述',
    component: 'Input',
    hidden: true,
    value: props.currentRow.ruleDesc,
  },
  {
    field: 'isEnable',
    label: '是否启用',
    component: 'RadioGroup',
    hidden: true,
    value: props.currentRow.isEnable,
  },
  {
    field: 'isEnforcement',
    label: '是否强制执行',
    component: 'RadioGroup',
    hidden: true,
    value: props.currentRow.isEnforcement,
  },
  {
    field: '',
    label: '源系统：' + props.currentRow.sourceSystemCode,
    component: 'Divider',
  },
  {
    field: 'sourceSystemCode',
    label: '系统编码',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    value: props.currentRow.sourceSystemCode,
  },
  {
    field: 'sourceModelId',
    label: '模型ID',
    component: 'Input',
  },
  {
    field: 'sourceRuleType',
    label: '计算规则类型',
    component: 'Input',
  },
  {
    field: 'sourceRuleConfig',
    label: '计算规则',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'sourceTableExcel',
    label: '导出规则',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'sourceRuleDesc',
    label: '规则描述',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'sourceAggType',
    label: '源计算类型',
    component: 'Select',
    componentProps: {
      options: COUNT_TYPE
    },
  },
  {
    field: '',
    component: 'Divider',
    label: '目标系统：' + props.currentRow.targetSystemCode,
  },
  {
    field: 'targetSystemCode',
    label: '系统编码',
    component: 'Input',
    componentProps: {
      disabled: true,
    },
    value: props.currentRow.targetSystemCode,
  },
  {
    field: 'targetModelId',
    label: '模型ID',
    component: 'Input',
  },
  {
    field: 'targetRuleType',
    label: '计算规则类型',
    component: 'Input',
  },
  {
    field: 'targetRuleConfig',
    label: '计算规则',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'targetTableExcel',
    label: '导出规则',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'targetRuleDesc',
    label: '规则描述',
    component: 'Input',
    colProps: { span: 24 },
    componentProps: {
      type: 'textarea',
    },
  },
  {
    field: 'targetAggType',
    label: '目标计算类型',
    component: 'Select',
    componentProps: {
      options: COUNT_TYPE
    },
    value: props.currentRow.targetAggType,
  },
]);
const rules = reactive({
  sourceRuleType: [required()],
  sourcemodelid: [required()],
  sourceAggType: [required()],
  sourceRuleConfig: [required()],
  sourceRuleDesc: [required()],
  targetRuleType: [required()],
  targetRuleConfig: [required()],
  targetRuleDesc: [required()],
  targetAggType: [required()],
  sourceTableExcel: [required()],
  targetTableExcel: [required()],
});
const { formRegister, formMethods } = useForm();
const { setValues, getFormData, getElFormExpose } = formMethods;

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;
    actionType.value = 'update';
    setValues(currentRow);
  },
  {
    deep: true,
    immediate: true,
  },
);

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

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

<style lang="less" scoped>
:deep(.el-divider) {
  .el-divider__text {
    font-weight: bold !important;
  }
}
</style>
