<template>
  <BasicForm @register="registerForm" />
</template>
<script lang="ts" name="dkgl-fxgk-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,
    },
    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,
        showTime: false,
        valueFormat: 'YYYY-MM-DD',
      },
    },
    {
      label: '会议组织方',
      field: 'hyzzf',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: props.disabled,
        showTime: false,
        valueFormat: 'YYYY-MM-DD',
      },
    },

    {
      label: '方案是否通过',
      field: 'tgjg',
      component: 'Select',
      required: true,

      componentProps: {
        disabled: props.disabled,
        options: [
          { label: '通过，无需修改', value: 1 },
          { label: '通过但需修改', value: 2 },
          { label: '未通过', value: 0 },
        ],
      },
    },
    {
      label: '评审文件',
      field: 'shfj',
      component: 'JUpload',
      required: true,
      colProps: { span: 24 },
      componentProps: () => {
        return {
          disabled: props.disabled,
          maxCount: 1,
          tipArr: ['(提示：提交的文件包括但不限于：广东省建设用地土壤污染状况调查报告审查评价表、建设用地土壤污染状况初步调查监督检查意见单、专家签名表等，压缩为一个.zip文件上传）'],
          replaceLastOne: true,
          showUploadList: false,
          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个字)',
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  const [registerForm, { setFieldsValue, resetFields, validate, clearValidate, 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,
        });
        await clearValidate();
      } else {
        await nextTick();
        await resetFields();
      }
    },
    { deep: true, immediate: true }
  );
  async function getFormValues() {
    const fieldsValue = getFieldsValue();
    return fieldsValue;
  }
  defineExpose({
    validate,
    getFormValues,
  });
</script>
