<template>
  <BasicModal v-bind="$attrs" @register="registerModal" okText="详情" :title="title" width="1000px" :footer="null">
    <a-collapse v-model:activeKey="activeKey" :bordered="false">
      <a-collapse-panel key="1" header="监理单位基本信息" v-for="(item, index) in jlDw" :key="index+'jldw'">
        <unitMessageForm ref="jldw" :data="item" :isRead="true" />
      </a-collapse-panel>
      <a-collapse-panel key="2" header="运输单位基本信息" v-for="(item, index) in ysDw" :key="index+'jldw'">
        <unitMessageForm ref="ysdw" :data="item" :isRead="true" />
      </a-collapse-panel>
      <a-collapse-panel key="3" header="处置单位基本信息" v-for="(item, index) in czDw" :key="index+'jldw'">
        <unitMessageForm ref="czdw" :data="item" :isRead="true" />
      </a-collapse-panel>
      <a-collapse-panel key="4" header="接受单位基本信息" v-for="(item, index) in jsDw" :key="index+'jsdw'">
        <zyjhForm ref="jsdw" :data="item" :isRead="true" />
      </a-collapse-panel>
    </a-collapse>
    <!-- <div class="pt-5">
      <BasicForm @register="registerForm" />
    </div> -->
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { FormSchema } from '/@/components/Table';
  import { useRouter } from 'vue-router';
  import { useUserStore } from '/@/store/modules/user';
  import { findJsdzg } from '../api';
  import unitMessageForm from '/@/components/customComponent/unitMessageForm.vue';
  import zyjhForm from '/@/components/customComponent/zyjhForm.vue';
  const userStore: any = useUserStore();
  const router = useRouter();
  const params = ref<any>(router.currentRoute.value.query);
  const activeKey = ref(['1', '2', '3', '4']);
  const AdviceFormSchema: FormSchema[] = [
    {
      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',
        };
      },
    },
    {
      label: '土壤转运时间',
      field: 'trzysj',
      required: true,
      component: 'Input',
      // component: 'DatePicker',
      componentProps: {
        // format: 'YYYY-MM-DD',
        // valueFormat: 'YYYY-MM-DD',
        disabled: true,
      },
    },
    {
      label: '土壤运输方式',
      field: 'trysfs',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '土壤运输路线',
      field: 'tryslx',
      required: true,
      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '污染土壤转运总量',
      field: 'wrtryzzl',
      required: true,
      component: 'InputNumber',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '处置措施',
      field: 'czcs',
      required: true,
      component: 'CheckboxGroup',
      componentProps: {
        options: [
          { label: '水泥窑', value: '水泥窑' },
          { label: '集中处置场所', value: '集中处置场所' },
          { label: '填埋', value: '填埋' },
          { label: '其他', value: '其他' },
        ],
        disabled: true,
      },
    },
    {
      label: '计划处置完成期限',
      field: 'jhczwcqx',
      required: true,
      component: 'InputNumber',
      componentProps: {
        disabled: true,
      },
    },
    {
      label: '土壤转运计划表',
      field: 'tryzjhb',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: true,
          showUploadList: false,
        };
      },
    },
    {
      label: '处置单位环评材料',
      field: 'czdwhpcl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: true,
          showUploadList: false,
        };
      },
    },
    {
      label: '污染土壤处置合同或协议',
      field: 'wrtrczhthxy',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: true,
          showUploadList: false,
        };
      },
    },
    {
      label: '对处置单位的现场核查材料',
      field: 'dczdwdxchccl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: true,
          showUploadList: false,
        };
      },
    },
    {
      label: '土壤危废鉴别材料',
      field: 'trwfjbcl',
      required: true,
      component: 'JUpload',
      componentProps: () => {
        return {
          disabled: true,
          showUploadList: false,
        };
      },
    },
  ];
  //表单配置
  const [registerForm, { resetFields, setFieldsValue }] = useForm({
    labelWidth: 180,
    schemas: AdviceFormSchema,
    showActionButtonGroup: false,
    baseColProps: { span: 12 },
  });
  //设置标题
  const title = ref('详情');
  const jlDw = ref([]);
  const ysDw = ref([]);
  const czDw = ref([]);
  const jsDw = ref([]);
  //表单赋值
  const [registerModal] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
   
    jlDw.value = []
    ysDw.value = []
    czDw.value = []
    jsDw.value = []
    const filteredData = data.record.dwxxList
    jsDw.value = data.record.jbxxList?data.record.jbxxList:[]
    filteredData.forEach(element => {
      if (element.jgtype == 'czdw') {
        jlDw.value.push(element)
      } else if (element.jgtype == 'jldw') {
        czDw.value.push(element)
      } else if (element.jgtype == 'ysdw') {
        ysDw.value.push(element)
      }
    });
    
    await setFieldsValue({
      ...data.record,
    });
  });
</script>

<style lang="less" scoped>
  :deep(.ant-input-number) {
    width: 100%;
  }
</style>
