<template>
  <BasicForm @register="registerForm" />
</template>
<script lang="ts" name="dkgl-fxpg-MaterialUpload" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { watch, nextTick, defineEmits } from 'vue';
  import { useRouter } from 'vue-router';
  import { useMessage } from '/@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const emit = defineEmits(['changePsfs']);
  const router = useRouter();
  const props = defineProps({
    data: {
      type: Object,
    },
    wrdkjbxx: {
      type: Object,
    },
    disabled: {
      type: Boolean,
      default: false, // 默认可以编辑
    },
    dksdzt: {
      type: String,
      default: '',
    },
  });

  //自定义表单字段
  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: 'tgjgg',
      component: 'Select',
      required: true,
      ifShow: () => {
        return props.dksdzt == '1' || props?.data?.dksdzt == 1;
      },
      componentProps: {
        disabled: props.disabled,
        options: [
          { label: '通过', value: 1 },
          { label: '不通过', value: 0 },
        ],
      },
    },
    {
      label: '报告是否通过',
      field: 'tgjg',
      component: 'Select',
      ifShow: () => {
        return props.dksdzt != '1' && props?.data?.dksdzt != 1;
      },
      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 === 0) {
              formModel.shjg = 2;
            } else {
              // 删除-清空，1或2-用户自己选择
              formModel.shjg = null;
            }
            await validate(['tgjg', 'shjg']);
          },
        };
      },
    },
    {
      label: '报告结论',
      field: 'shjg',
      component: 'Select',
      ifShow: () => {
        return props.dksdzt != '1' && props?.data?.dksdzt != 1;
      },
      required: true,
      colProps: { span: 6 },
      componentProps: {
        disabled: props.disabled,
        options: [],
      },
    },
    {
      label: '环境类型',
      field: 'hjlx',
      component: 'CheckboxGroup',
      required: true,
      colProps: { span: 6 },
      ifShow: ( { values } ) => {
        return props.dksdzt != '1' && props?.data?.dksdzt != 1 && values.shjg==1;
      },
      componentProps: {
        disabled: props.disabled,
        options: [
          { label: '土壤', value: '土壤' },
          { label: '地下水', value: '地下水' },
        ]
      },
    },
    {
      label: '是否依据土壤法纳入建设用地土壤污染风险管控与修复名录',
      field: 'sfyjtrfnrjsydtrwrfxgkyxfml',
      component: 'Select',
      required: true,
      componentProps: {
        disabled: props.disabled,
        placeholder: '请选择是否纳入',
        options: [
          { label: '是', value: 1 },
          { label: '否', value: 0 },
        ],
      },
      ifShow: ({ values }) => {
        return (values.tgjg === 1 || values.tgjg === 2) && values.shjg > 1;
      },
      itemProps: {
        class: 'lin-feed',
      },
    },
    {
      label: '不纳入理由',
      field: 'bnrly',
      component: 'Input',
      required: true,
      ifShow: ({ values }) => {
        return values.sfyjtrfnrjsydtrwrfxgkyxfml === 0;
      },
      componentProps: {
        disabled: props.disabled,
      },
    },
    {
      label: '评审文件',
      field: 'shfj',
      component: 'JUpload',
      required: true,
      colProps: { span: 24 },
      componentProps: () => {
        return {
          disabled: props.disabled,
          maxCount: 1,
          tipArr: ['(提示：提交的文件包括但不限于：申请表、参会人员签到表、评审报告等，压缩为一个.zip格式文件上传)'],
          replaceLastOne: true,
          showUploadList: false,
          fileName: props?.wrdkjbxx?.wrdkmc+"—风险评估评审文件",
          accept: '.rar,.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'rar' || isFile == 'zip') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    },
    {
      label: '专家意见',
      field: 'zjyj',
      component: 'InputTextArea',
      required: true,
      colProps: { span: 24 },
      componentProps: {
        disabled: props.disabled,
        placeholder: '请输入专家意见(最少10个字)',
      },
    },
    // {
    //   label: '意见和结论',
    //   field: 'xgpgJielun',
    //   component: 'InputTextArea',
    //   required: true,
    //   colProps: { span: 24 },
    //   componentProps: {
    //     disabled: props.disabled,
    //   },
    // },
  ];
  /**
   * 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,
        });
        if (props.dksdzt == '1') return;
        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: any = [];
    if (val === 0) {
      options = [{ label: '风险不确定，需要进一步补充调查，并再次进行风险评估和评审', value: 2 }];
    } else if (val === 1 || val === 2) {
      options = [
        { label: '风险可接受，且不需要进一步补充调查，不需要采取风险管控、修复措施', value: 1 },
        { label: '风险不可接受，需要采取风险管控措施', value: 2 },
        { label: '风险不可接受，需要采取修复措施', value: 3 },
        { label: '风险不可接受，需要采取管控及修复措施', value: 4 },
      ];
    } else {
      options = [];
    }
    return options;
  }
  async function getFormValues() {
    const fieldsValue = getFieldsValue();
    return fieldsValue;
  }
  defineExpose({
    validate,
    getFormValues,
  });
</script>
<style lang="less" scoped></style>
