<!-- 初调文件上传 --><!-- 表单布局 -->
<template>
  <!-- 自定义表单 -->
  <BasicForm @register="registerForm"> </BasicForm>
</template>

<script lang="ts" setup>
  //引入依赖
  import { nextTick, watch, toRaw } from 'vue';
  import { updateCbdc, updateXxdc, saveGFxpg, saveGkxf, saveXgpg, checkShp, saveBjxx } from '/@/api/common/api';
  import { useForm, BasicForm, FormSchema } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { transformation } from '@/utils/EPSG';

  const { createMessage } = useMessage();
  const props = defineProps({
    labelFirst: {
      type: String,
      default: '初步',
    },
    objec: {
      type: Array,
      default: [
        {
          name: '',
        },
      ],
    },
    visibleFlag: {
      type: Boolean,
      default: true,
    },
    data: {
      type: Object,
      default: {},
    },
    dksdzt: {
      type: String,
      default: null,
    },
    dkxx: {
      type: Object,
      default: {
        wrdkmc:'',
        wrdkbm:'',
      },
    },
  });
  //自定义表单字段
  const formSchemas: FormSchema[] = [
    {
      label: '污染地块id',
      field: 'wrdkid',
      component: 'Input',
      show: false,
    },
    {
      label: 'id',
      field: 'id',
      component: 'Input',
      show: false,
    },
    {
      label: `${props?.objec ? props?.objec[0]?.name : '公示照片'}`,
      field: 'gspic',
      component: 'JUpload',
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      required: true,
      componentProps: () => {
        return {
          buttonVisible: props.visibleFlag,
          showUploadList: false,
          fileName: `${props?.objec ? ((props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+props?.objec[0]?.name) : ( (props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+ '公示照片')}`,
          accept: '.png,.jpg,.jpeg',
          beforeUpload: (file) => {
            if (file.type != 'image/jpeg' && file.type != 'image/png') {
              createMessage.error('只能上传png、jpg格式的图片');
              return false
            }
            // return file.type == 'image/jpeg';
          },
          onChange: async (v) => {
            const arry = v.split(',');
            upLoad({
              wrdkid: props.data.wrdkid,
              id: props.data.id,
              gspic: arry[arry.length - 1],
            });
          },
        };
      },
    },
    {
      label: `${props?.objec ? props?.objec[1]?.name : '初步调查报告'}`,
      field: 'dcbglj',
      component: 'JUpload',
      required: true,
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      componentProps: () => {
        return {
          buttonVisible: props.visibleFlag,
          showUploadList: false,
          fileName: `${props?.objec ? ((props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+props?.objec[1]?.name) : ((props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+'初步调查报告')}`,
          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;
          },
          onChange: async (v) => {
            const arry = v.split(',');
            if (props.labelFirst == '风险') {
              upLoad({
                wrdkid: props.data.wrdkid,
                id: props.data.id,
                fxpgbglj: arry[arry.length - 1],
              });
            } else if (props.labelFirst == '风险管控' || props.labelFirst == '修复文件' || props.labelFirst == '管控与修复') {
              upLoad({
                wrdkid: props.data.wrdkid,
                id: props.data.id,
                falj: arry[arry.length - 1],
              });
            } else if (props.labelFirst == '效果评估') {
              upLoad({
                wrdkid: props.data.wrdkid,
                id: props.data.id,
                zlyxfxgpgbglj: arry[arry.length - 1],
              });
            } else {
              upLoad({
                wrdkid: props.data.wrdkid,
                id: props.data.id,
                dcbglj: arry[arry.length - 1],
              });
            }
          },
        };
      },
    },
    {
      label: '边界文件',
      field: 'dkshp',
      required: true,
      component: 'JUpload',
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      componentProps: () => {
        return {
          tipHtml: {
            preContent: '(',
            downloadLinkText: '<span class="red">下载边界文件要求说明',
            nextContent: ')，填报前必读)',
            fileUrl: '/upload/static/边界文件要求说明20200514.pdf',
            fileName: '边界说明文件.pdf',
            params: { wrdkid: props.data.wrdkid, scjdbm: props.data.scjdbm, pgtype: props.data.pgtype },
          },
          buttonVisible: props.visibleFlag,
          showUploadList: false,
          fileName: (props?.dkxx?.wrdkbm?props?.dkxx?.wrdkbm+'-':'')+'边界文件',
          accept: '.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            console.log(file, 'file');
            if (isFile == 'zip') {
              isshow = true;
            } else {
              createMessage.error('只能上传.zip格式的文件');
              isshow = false;
            }
            // if (file.type == 'application/x-zip-compressed') {
            //   isshow = true;
            // } else {
            //   createMessage.error('只能上传zip格式的文件');
            //   isshow = false;
            // }
            return isshow;
          },
          onChange: async (v) => {
            const arry = v.split(',');
            const param = {
              wrdkid: props.data.wrdkid,
              scjdbm: props.data.scjdbm,
              pgtype: props.data.pgtype,
              url: arry[arry.length - 1],
            };
            const res = await checkShp(param);
            let ss = transformation(res.zbx, JSON.parse(res.geomtry));
            res.geo = ss;
            await saveBjxx(res);
            upLoad({
              wrdkid: props.data.wrdkid,
              id: props.data.id,
              dkshp: arry[arry.length - 1],
            });
          },
        };
      },
    },
    {
      label: '边界图片',
      field: 'dkpic',
      component: 'JUpload',
      required: true,
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      componentProps: () => {
        return {
          buttonVisible: props.visibleFlag,
          showPreviewBtn: true,
          showUploadList: false,
          fileName: (props?.dkxx?.wrdkbm?props?.dkxx?.wrdkbm+'-':'')+'边界图片',
          accept: '.png,.jpg,.jpeg',
          beforeUpload: (file) => {
            if (file.type != 'image/jpeg' && file.type != 'image/png') {
              createMessage.error('只能上传png、jpg格式的图片');
              return false
            }
            // return file.type == 'image/jpeg';
          },
          onChange: async (v) => {
            const arry = v.split(',');
            upLoad({
              wrdkid: props.data.wrdkid,
              id: props.data.id,
              dkpic: arry[arry.length - 1],
            });
          },
        };
      },
    },
    {
      label: '现场施工佐证材料',
      field: 'xcsgzzcl',
      // required: true,
      component: 'JUpload',
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      show: () => {
        return (props.labelFirst == '风险管控' || props.labelFirst == '修复文件' || props.labelFirst == '管控与修复') ? true : false;
      },
      componentProps: () => {
        return {
          tipHtml: {
            preContent: '(',
            downloadLinkText: '<span class="red">优先监管地块管理使用',
            nextContent: ')',
          },
          buttonVisible: props.visibleFlag,
          showUploadList: false,
          fileName: (props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+'现场施工佐证材料',
          accept: '.zip',
          beforeUpload: (file) => {
            let isshow = false;
            const isFile = file.name.split('.')[file.name.split('.').length - 1];
            console.log(file, 'file');
            if (isFile == 'zip') {
              isshow = true;
            } else {
              createMessage.error('只能上传.zip格式的文件');
              isshow = false;
            }
            return isshow;
          },
          onChange: async (v) => {
            const arry = v.split(',');
            upLoad({
              wrdkid: props.data.wrdkid,
              id: props.data.id,
              xcsgzzcl: arry[arry.length - 1],
            });
          },
        };
      },
    },
    {
      label: '详细调查检测数据表格',
      field: 'xxdcjcsjbg',
      required: true,
      dynamicDisabled: () => {
        return props.dksdzt == '1';
      },
      show: () => {
        return props.labelFirst == '详细调查' ? true : false;
      },
      component: 'JUpload',
      componentProps: () => {
        return {
          tipHtml: {
            downloadLinkText: '<button class="ant-btn ant-btn-primary">下载模板</button>',
            fileUrl: '/upload/static/详细调查检测数据表格模板.xlsx',
            fileName: '详细调查检测数据表格模板.xlsx',
          },
          buttonVisible: props.visibleFlag,
          showUploadList: false,
          fileName: (props?.dkxx?.wrdkmc?props?.dkxx?.wrdkmc+'-':'')+'详细调查检测数据表格',
          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;
          },
          onChange: async (v) => {
            const arry = v.split(',');
            upLoad({
              wrdkid: props.data.wrdkid,
              id: props.data.id,
              xxdcjcsjbg: arry[arry.length - 1],
            });
          },
        };
      },
    },
  ];

  const [registerForm, { setFieldsValue }] = 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' } },
    //row行的样式
    baseRowStyle: { width: '100%' },
    //表单布局属性，支持（vertical,horizontal），默认为horizontal
    layout: 'horizontal',
  });

  watch(
    () => props.data,
    async (newVal: any, oldVal: any) => {
      ((newVal?.id != oldVal?.id) || (newVal?.wrdkid != oldVal?.wrdkid) || (newVal?.gspic != oldVal?.gspic) || (newVal?.dcbglj != oldVal?.dcbglj) || (newVal?.dkshp != oldVal?.dkshp) || (newVal?.dkpic != oldVal?.dkpic) || (newVal?.xcsgzzcl != oldVal?.xcsgzzcl) || (newVal?.xxdcjcsjbg != oldVal?.xxdcjcsjbg) || (newVal?.fxpgbglj != oldVal?.fxpgbglj) || (newVal?.falj != oldVal?.falj) || (newVal?.zlyxfxgpgbglj != oldVal?.zlyxfxgpgbglj)) &&
        nextTick(async () => {
          const obj = toRaw(newVal);
          if (props.labelFirst == '风险') {
            obj.dcbglj = obj.fxpgbglj;
          } else if (props.labelFirst == '风险管控' || props.labelFirst == '修复文件' || props.labelFirst == '管控与修复') {
            obj.dcbglj = obj.falj;
          } else if (props.labelFirst == '效果评估') {
            obj.dcbglj = obj.zlyxfxgpgbglj;
          }
          await setFieldsValue({
            ...obj,
          });
        });
    },
    { deep: true, immediate: true }
  );
  // 点击上传图片接口
  async function upLoad(param) {
    if (props.labelFirst == '初步') {
      await updateCbdc(param);
    } else if (props.labelFirst == '风险') {
      await saveGFxpg(param);
    } else if (props.labelFirst == '风险管控' || props.labelFirst == '修复文件' || props.labelFirst == '管控与修复') {
      await saveGkxf(param);
    } else if (props.labelFirst == '效果评估') {
      await saveXgpg(param);
    } else {
      await updateXxdc(param);
    }
  }
</script>

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

  :deep(.ant-picker) {
    width: 100%;
  }
</style>
