<template>
  <BasicForm @register="registerForm" />
</template>
<script lang="ts" name="dkgl-xfpg-MaterialUpload" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { watch, nextTick, defineEmits } from 'vue';
  import { useRouter } from 'vue-router';
  const emit = defineEmits(['changePsfs']);
  const router = useRouter();
  const props = defineProps({
    data: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false, // 默认可以编辑
    },
  });

  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '评审方式',
      field: 'dcjdPsfs',
      component: 'Select',
      required: true,
      ifShow: router.currentRoute.value.query.isnyd2yzlg === '1',
      componentProps: () => {
        return {
          disabled: props.disabled,
          options: [
            { label: '专家评审', value: 1 },
            { label: '其他评审方式', value: 2 },
          ],
          onChange: (e) => {
            emit('changePsfs', e);
          },
        };
      },
    },
    {
      label: '第几次评审',
      field: 'pscs',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '会议时间',
      field: 'hysj',
      component: 'DatePicker',
      required: true,
      componentProps: {
        disabled: props.disabled,
        showTime: false,
        valueFormat: 'YYYY-MM-DD',
        placeholder: '',
      },
    },
    {
      label: '会议地点',
      field: 'hydd',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.disabled,
      },
    },
    {
      label: '会议组织方',
      field: 'hyzzf',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.disabled,
      },
    },
    {
      label: '报告是否通过',
      field: 'tgjg',
      component: 'Select',
      required: true,
      componentProps: ({ formActionType, formModel }) => {
        return {
          disabled: props.disabled,
          options: [
            { label: '通过，无需修改', value: 1 },
            { label: '通过但需修改', value: 2 },
            { label: '未通过', value: 0 },
          ],
          onChange: async (e) => {
            const { updateSchema, validate } = formActionType;
            let options = await changeTgjg(e);
            updateSchema([
              {
                field: 'shjg',
                componentProps: {
                  options,
                },
              },
            ]);
            if (e === 1 || e === 2) {
              formModel.shjg = 1;
            } else {
              // 删除-清空，1或2-用户自己选择
              formModel.shjg = null;
            }
            await validate(['tgjg', 'shjg']);
          },
        };
      },
    },
    {
      label: '报告结论',
      field: 'shjg',
      component: 'Select',
      required: true,
      componentProps: {
        disabled: props.disabled,
        options: [],
      },
    },
    {
      label: '评审文件',
      field: 'shfj',
      component: 'JUpload',
      required: true,
      colProps: { span: 24 },
      componentProps: {
        disabled: props.disabled,
        maxCount: 1,
        tipArr: ['(提示：提交的文件包括但不限于：申请表、参会人员签到表、评审报告等，压缩为一个文件上传）'],
        replaceLastOne: true,
        showUploadList: false,
      },
    },
    {
      label: '专家意见',
      field: 'zjyj',
      component: 'InputTextArea',
      required: true,
      colProps: { span: 24 },
      componentProps: {
        disabled: props.disabled,
        placeholder: '请输入专家意见(最少10个字)',
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  const [registerForm, { setFieldsValue, resetFields, validate, clearValidate, updateSchema, getFieldsValue }] = useForm({
    //注册表单列
    schemas: formSchemas,
    //不显示查询和重置按钮
    showActionButtonGroup: false,
    //默认row行配置,当 layout 为 horizontal 生效
    rowProps: { gutter: 24, justify: 'start', align: 'middle' },
    //全局col列占比(每列显示多少位)，和schemas中的colProps属性一致
    baseColProps: { span: 12 },
    //使用labelCol的样式参数来控制标题宽度
    labelCol: { style: { width: '150px' } },
  });
  watch(
    () => props?.data,
    async (val: any) => {
      if (val) {
        await nextTick();
        await setFieldsValue({
          ...props.data,
        });
        let options = await changeTgjg(props.data.tgjg);
        updateSchema([
          {
            field: 'shjg',
            componentProps: {
              options,
            },
          },
        ]);
        await clearValidate();
      } else {
        await nextTick();
        await resetFields();
      }
    },
    { deep: true, immediate: true }
  );
  async function changeTgjg(val) {
    let options = [];
    if (val === 1 || val === 2) {
      options = [{ label: '达到土壤污染风险评估报告确定的风险管控、修复目标且可以安全利用', value: 1 }];
    } else if (val === 0) {
      options = [
        { label: '未达到土壤污染风险评估报告确定的风险管控、修复目标，不可以安全利用', value: -1 },
        { label: '不确定，需要进一步补充调查，并再次进行效果评估', value: 0 },
      ];
    } else {
      options = [];
    }
    return options;
  }
  async function getFormValues() {
    const fieldsValue = getFieldsValue();
    return fieldsValue;
  }
  defineExpose({
    validate,
    getFormValues,
  });
</script>
