<!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm" />
</template>

<script lang="ts" setup>
  //引入依赖
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { ref, watch, nextTick, toRaw } from 'vue';
  import { useRouter } from 'vue-router';
  import { encryptData, findJsdzg } from '/@/api/common/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { decrypts } from '@/utils/checkTip';
  import { useUserStore } from '/@/store/modules/user';

  const { createMessage } = useMessage();
  const router = useRouter();
  const params = ref<any>(router.currentRoute.value.query);
  const userStore: any = useUserStore();

  const props = defineProps({
    data: {
      type: Object,
    },
    title: {
      type: String,
      default: '检测',
    },
    isRead: {
      type: Boolean,
      default: false,
    },
    upload: {
      type: String,
      default: '',
    },
    dkxx: {
      type: Object,
    },
  });

  //自定义表单字段
  const formSchemas: FormSchema[] = [
    { label: '污染地块ID', field: 'id', component: 'Input', show: false },
    {
      label: '地块所在地主管部门',
      field: 'szdzgbm',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '接收地主管部门',
      field: 'jsdzgbm',
      required: true,
      component: 'ApiSelect',
      componentProps: () => {
        let bm = params.value.wrdkbm;
        if (userStore.userInfo.userType == 'S') bm = '';
        return {
          api: findJsdzg,
          params: { wrdkbm: bm },
          labelField: 'realname',
          valueField: 'id',
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
        };
      },
    },
    {
      label: '土壤转运时间',
      field: 'trzysj',
      required: true,
      component: 'Input',
      // component: 'DatePicker',
      componentProps: {
        // format: 'YYYY-MM-DD',
        // valueFormat: 'YYYY-MM-DD',
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '土壤运输方式',
      field: 'trysfs',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '土壤运输路线',
      field: 'tryslx',
      required: true,
      component: 'Input',
      componentProps: {
        placeholder: '起点→XX路→XX大道→XX高速→终点',
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '污染土壤转运总量',
      field: 'wrtryzzl',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '处置措施',
      field: 'czcs',
      required: true,
      component: 'CheckboxGroup',
      componentProps: {
        //options里面由一个一个的radio组成,支持disabled
        options: [
          { label: '水泥窑', value: '水泥窑' },
          { label: '集中处置场所', value: '集中处置场所' },
          { label: '填埋', value: '填埋' },
          { label: '其他', value: '其他' },
        ],
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '计划处置完成期限',
      field: 'jhczwcqx',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
      },
    },
    {
      label: '土壤转运计划表',
      field: 'tryzjhb',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
          showUploadList: false,
          fileName: '土壤转运计划表',
          accept: '.xls,.xlsx',
          beforeUpload: (file) => {
            let isshow = false;
            if (file.type == 'application/vnd.ms-excel' || file.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
              isshow = true;
            } else {
              createMessage.error('只能上传.xls/.xlsx格式的文件');
              isshow = false;
            }
            return isshow;
          },
        };
      },
    },
    {
      label: '处置单位环评材料',
      field: 'czdwhpcl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
          showUploadList: false,
          fileName: '处置单位环评材料',
          accept: '.pdf,.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    },
    {
      label: '污染土壤处置合同或协议',
      field: 'wrtrczhthxy',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
          showUploadList: false,
          fileName: '污染土壤处置合同或协议',
          accept: '.pdf,.zip,.doc,.docx',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF' || isFile == 'doc' || isFile == 'docx') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    },
    {
      label: '对处置单位的现场核查材料',
      field: 'dczdwdxchccl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
          showUploadList: false,
          fileName: '对处置单位的现场核查材料',
          accept: '.pdf,.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    },
    {
      label: '土壤危废鉴别材料',
      field: 'trwfjbcl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: params.value.type == 'detail' || params.value.flag == '1' || params.value.flag == '2',
          showUploadList: false,
          fileName: '土壤危废鉴别材料',
          accept: '.pdf,.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    },
  ];
  /**
   * BasicForm绑定注册;
   */
  const [registerForm, { getFieldsValue, setFieldsValue, resetFields, updateSchema, validate, clearValidate }] = 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: '180px' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });
  watch(
    () => props?.data,
    async (val: any) => {
      if (val) {
        await nextTick();
        const obj: any = toRaw(props.data);

        if (obj.lxdh) {
          obj.lxdh = await decrypts(obj.lxdh, props?.isRead);
        }
        await setFieldsValue({
          ...obj,
        });
      } else {
        await nextTick();
        await resetFields();
      }
      // console.log(props.upload, 'upload编制单位');
    },
    { deep: true, immediate: true }
  );

  watch(
    () => props?.isRead,
    async (val: any) => {
      await nextTick();
      console.log(val, 'val');
      handleChange(val);
    },
    { deep: true, immediate: true }
  );

  // 根据isRead字段判断是否禁用
  function handleChange(val) {
    updateSchema({
      label: '单位名称',
      field: 'syqdwmc',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '统一社会信用代码',
      field: 'gsyyzzh',
      required: true,
      component: 'Input',
      dynamicRules: () => {
        return [{ pattern: /^[0-9A-Z]{18}$/, message: '工商营业执照号格式有误', required: true }];
      },
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '法定代表人/负责人姓名',
      field: 'frdb',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '住所',
      field: 'wrdkdz',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '联系人',
      field: 'lxr',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '联系电话',
      field: 'lxdh',
      component: 'Input',
      required: true,
      dynamicRules: () => {
        return [{ pattern: /^((\d{3,4}-)?\d{7,8}|1[3-9]\d{9})$/, message: '', required: true }];
      },
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '直接负责的主管人员',
      field: 'zjzgfzry',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: '其他直接责任人员',
      field: 'qtzgfzry',
      component: 'Input',
      required: true,
      componentProps: {
        disabled: val,
      },
    });

    updateSchema({
      label: '委托调查合同金额',
      field: 'wthtje',
      component: 'InputNumber',
      required: true,
      suffix: '万元',
      componentProps: {
        disabled: val,
      },
    });
    updateSchema({
      label: `${props.title == '施工' ? props.title + '报告总结' : props.title + '单位报告'}`,
      field: 'bglj',
      required: true,
      ifShow: () => {
        return props.upload == '检测单位' ? true : false;
      },

      component: 'JUpload',
      componentProps: () => {
        return {
          showUploadList: false,
          fileName: `${props.title == '施工' ? props.title + '报告总结' : props.title + '单位报告'}`,
          disabled: props.isRead,
          accept: '.pdf,.zip,.rar',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            if (isFile == 'pdf' || isFile == 'zip' || isFile == 'PDF' || isFile == 'rar') {
              isshow = true;
            } else {
              createMessage.error('只能上传.pdf/.zip/.rar格式的文件');
              isshow = false;
            }

            return isshow;
          },
        };
      },
    });
  }
  const fieldsValue = ref<any>({});
  // 获取子组件 列表
  async function getFormValueBz(type) {
    //获取所有值
    fieldsValue.value = await getFieldsValue();
    if (type == 'save') {
      await clearValidate()
    } else {
      fieldsValue.value = await validate();
    }
    // 加密
    fieldsValue.value.lxdh = await encryptData({ str: fieldsValue.value.lxdh });
    return fieldsValue.value;
  }

  // 通过ref必须把在父组件里面的方法导出
  defineExpose({
    getFormValueBz,
  });
</script>

<style scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-picker) {
    width: 100%;
  }

  /* :deep(.ant-radio-wrapper) {
    width: 120px;
    text-align: left;
} */
</style>
