<template>
  <div class="bg-[#fff]">
    <a-page-header style="border: 1px solid rgb(235, 237, 240)" @back="router.go(-1)">
      <template #backIcon>
        <div><a-button type="primary">返回</a-button></div>
      </template>
      <template #title>
        <div>
          <a-space>
            <a-button type="primary" v-if="userInfo.userIdentity <= 3" @click="backHistory('xdyj')">下达意见</a-button>
            <a-button type="primary" v-if="userInfo.userType != 'S'" @click="backHistory('bjzdyj')">边界指导意见</a-button>
            <a-button type="primary" @click="backHistory('tg')">退改历史</a-button>
          </a-space>
        </div>
      </template>
    </a-page-header>
    <a-tabs v-model:activeKey="active" type="card">
      <a-tab-pane key="1" tab="详细信息">
        <div class="w-100% h-[calc(100vh-245px)] overflow-y-auto" style="position:relative">
          <div class="title pl-4 pb-4" style="position: sticky;top: 0px;background-color: #fff;z-index: 999;">{{ data?.wrdkjbxxb?.wrdkmc }} — {{ data?.wrdkjbxxb?.wrdkbm }}</div>
          <a-collapse v-model:activeKey="activeKey" :bordered="false" ref="collapse">
            <a-collapse-panel key="1" header="地块信息" v-if="data.wrdkjbxxb">
              <DkTable :data="data.wrdkjbxxb" />
            </a-collapse-panel>
            <a-collapse-panel key="2" v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 1" header="初步调查报告基本信息">
              <suBainTable :data="data.cbdc" :wrdkjbxxb="data?.wrdkjbxxb" />
              <div>
                初步调查污染物信息<span class="text-red">
                  [提示: 检测项编号请参考字典，点击
                  <a-button type="primary" @click.prevent="down('/upload/static/检测项编号字典表.xlsx', '检测项编号字典表')">下载</a-button>
                  查看]</span
                >
                <CbInfor type="view" :wrdkid="data.wrdkjbxxb.wrdkid" />
              </div>
            </a-collapse-panel>
            <a-collapse-panel
              header="初步调查报告编制单位基本信息"
              v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 1"
              v-for="(item, index) in cbdcBzdw"
              :key="'6-' + index"
            >
              <unitMessageTable :data="item" title="初步调查编制单位报告" />
            </a-collapse-panel>
            <a-collapse-panel
              header="初步调查检测单位信息"
              v-if="data?.wrdkjbxxb?.dclx == 3 || (data?.wrdkjbxxb?.dclx == 1 && data?.wrdkjbxxb?.jxsmdc != '1')"
              v-for="(item, index) in cbjcdw"
              :key="'7-' + index"
            >
              <unitMessageTable :labelFirst="'详细'" :data="item" title="初步调查检测单位报告" />
            </a-collapse-panel>
            <a-collapse-panel key="3" v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 2" header="详细调查报告基本信息">
              <suBainTable :data="data.xxdc" :text-lable="'详细'" />
            </a-collapse-panel>
            <a-collapse-panel
              header="详细调查报告编制单位基本信息"
              v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 2"
              v-for="(item, index) in xxdcBzdw"
              :key="'8-' + index"
            >
              <unitMessageTable :data="item" title="详细调查编制单位报告" />
            </a-collapse-panel>
            <a-collapse-panel
              header="详细调查检测单位信息"
              v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 2"
              v-for="(item, index) in xxjcdw"
              :key="'9-' + index"
            >
              <unitMessageTable :labelFirst="'详细'" :data="item" title="详细调查检测单位报告" />
            </a-collapse-panel>
            <a-collapse-panel header="土壤和地下水环境质量信息" key="10" v-if="data.trhjzlxx">
              <EditTrwrDetail ref="chilrenTr" @gettrMj="data" :dclx="data.wrdkjbxxb.dclx" :data="data?.trhjzlxx" :sfwrdk="data?.xxdc?.sfwrdk" />
              <div
                >土壤环境检测数据<span class="text-red ml-3">
                  [提示: 检测项编号请参考字典，点击
                  <a-button type="primary" @click.prevent="down('/upload/static/检测项编号字典表.xlsx', '检测项编号字典表')">下载</a-button>
                  查看]</span
                >
                <PointInfor type="view" :data="{ wrdkid: data.wrdkjbxxb.wrdkid, pointType: 'solid', scjdbm: 'S2', faId: null }" />
              </div>

              <div
                >地下水环境检测数据<span class="text-red">
                  [提示: 检测项编号请参考字典，点击
                  <a-button type="primary" @click.prevent="down('/upload/static/检测项编号字典表.xlsx', '检测项编号字典表')">下载</a-button>
                  查看]</span
                >
                <PointInfor type="view" :data="{ wrdkid: data.wrdkjbxxb.wrdkid, pointType: 'water', scjdbm: 'S2', faId: null }" />
              </div>
            </a-collapse-panel>
            <a-collapse-panel header="敏感受体信息" key="11" v-if="data.mgst">
              <sensitivityTable :data="data.mgst" />
            </a-collapse-panel>
            <a-collapse-panel key="13" header="初步调查文件上传" v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 1">
              <CdUpload
                labelFirst="初步调查"
                :dkxx="data.wrdkjbxxb"
                :data="{ ...data.cbdc, scjdbm: 'S1' }"
                :objec="[{ name: '公示照片' }, { name: '初步调查报告' }]"
                :dksdzt="param.dksdzt"
                :visibleFlag="false"
              />
            </a-collapse-panel>
            <a-collapse-panel key="14" header="详细调查文件上传" v-if="data?.wrdkjbxxb?.dclx == 3 || data?.wrdkjbxxb?.dclx == 2">
              <CdUpload
                labelFirst="详细调查"
                :visibleFlag="false"
                :dkxx="data.wrdkjbxxb"
                :objec="[{ name: '公示照片' }, { name: '详细调查报告' }]"
                :dksdzt="param.dksdzt"
                :data="{ ...data.xxdc, scjdbm: 'S2' }"
              />
            </a-collapse-panel>
            <a-collapse-panel header="填报进度" key="15">
              <fillProgress :List="data.lzjd" :wrdkjbxxb="data?.wrdkjbxxb" />
            </a-collapse-panel>
          </a-collapse>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="评审信息">
        <div class="w-100% h-[calc(100vh-245px)] overflow-y-auto">
          <div class="w-[98%] mx-auto" v-if="data?.ps">
            <a-divider orientation="left">最近一次评审信息</a-divider>
            <Border title="评审材料" v-model="isreview">
              <!-- 默认是可以编辑，disabled:true，代表该表单不能编辑 -->
              <MaterialUpload class="w-[98%] mx-auto" :data="data?.ps" :wrdkjbxx="data?.wrdkjbxxb" :disabled="true" v-show="isreview" />
            </Border>
            <!-- 专家组意见 -->
            <Border title="专家组意见" v-model="isexpert">
              <ViewZjz class="w-[98%] mx-auto" :data="data?.ps?.zjz || []" :dcjdPsfs="data?.ps?.dcjdPsfs" v-show="isexpert" />
            </Border>
            <!-- 参会人员信息 -->
            <Border title="参会人员信息" v-model="isparticipant">
              <ViewChry class="w-[98%] mx-auto" :data="data?.ps?.chry || []" :dcjdPsfs="data?.ps?.dcjdPsfs" v-show="isparticipant" />
            </Border>
            <!-- 归档材料信息 -->
            <Border title="归档材料信息" v-model="ismaterial">
              <ViewGdcl class="w-[98%] mx-auto" :data="data?.ps?.gdcl || []" v-show="ismaterial" />
            </Border>
            <HistoryInfo :wrdkid="param.wrdkid" :pgtype="param.pgtype" scjdbm="S2" />
          </div>
          <div v-else class="text-center py-5">暂无评审信息</div>
        </div>
      </a-tab-pane>
    </a-tabs>
    <History @register="registerModal" />
    <AdviceModal @register="registerAdviceModal"></AdviceModal>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import MaterialUpload from '../components/MaterialUpload.vue';
  import Border from '/@/components/customComponent/Border.vue'; // 公共组件
  import ViewZjz from '../components/ViewZjz.vue';
  import ViewChry from '../components/ViewChry.vue';
  import ViewGdcl from '/@/components/customComponent/ViewGdcl.vue';
  import HistoryInfo from '/@/components/customComponent/HistoryInfo.vue';
  import DkTable from '/@/components/customComponent/DkTable.vue';
  import suBainTable from '/@/components/customComponent/suBainTable.vue';
  import unitMessageTable from '/@/components/customComponent/unitMessageTable.vue'; // 单位检测信息请传不同的obj
  // import soilMessageTable from '/@/components/customComponent/soilMessageTable.vue';
  import EditTrwrDetail from '/@/components/customComponent/EditTrwrDetail.vue';
  import sensitivityTable from '/@/components/customComponent/sensitivityTable.vue';
  import CdUpload from '/@/components/customComponent/CdUpload.vue';
  import fillProgress from '/@/components/customComponent/fillProgress.vue';
  import { useRouter } from 'vue-router';
  import { plotDetails } from '/@/api/common/api';
  import { useUserStore } from '/@/store/modules/user';
  import History from '@/components/customComponent/History.vue';
  import AdviceModal from '@/components/customComponent/AdviceModal.vue';
  import CbInfor from '/@/components/customComponent/CbInfor.vue';
  import PointInfor from '/@/components/customComponent/PointInfor.vue';

  import { downloadFile } from '/@/api/common/api';

  import { useModal } from '/@/components/Modal';

  let router = useRouter(); // 注册路由

  const [registerModal, { openModal }] = useModal();
  const [registerAdviceModal, { openModal: openAdviceModal }] = useModal();

  const data = ref<any>({});
  const activeKey = ref(['1', '2', '3', '10', '11', '13', '14', '15']); // 6- 7- 8- 9-
  const param = ref<any>(router.currentRoute.value.query);
  const { userInfo }: any = useUserStore();
  // 评审信息
  const isreview = ref(true);
  const isexpert = ref(true);
  const isparticipant = ref(true);
  const ismaterial = ref(true);

  // const [registerDrawer, { }] = useDrawerInner();
  const active = ref('1');
  let cbdcBzdw = ref([{ id: null }]);
  let xxdcBzdw = ref([{ id: null }]);
  let cbjcdw = ref([{ id: null }]);
  let xxjcdw = ref([{ id: null }]);

  function init() {
    getInfor();
  }
  init();
  // 获取地块基本信息
  async function getInfor() {
    data.value = await plotDetails({
      wrdkid: param.value.wrdkid,
      scjdbm: 'S2',
    });
    // 判断是详细调查的还是初步调查的
    cbdcBzdw.value = [];
    xxdcBzdw.value = [];
    data.value.bzdw.forEach((item) => {
      if (item.scjdbm == 'S1') {
        cbdcBzdw.value.push(item);
      } else if (item.scjdbm == 'S2') {
        xxdcBzdw.value.push(item);
      }
    });
    cbjcdw.value = [];
    xxjcdw.value = [];
    if (data.value.jcdw) {
      data.value.jcdw.forEach((item) => {
        if (item.scjdbm == 'S1') {
          cbjcdw.value.push(item);
        } else if (item.scjdbm == 'S2') {
          xxjcdw.value.push(item);
        }
      });
    }

    //  默认展开所有面板
    const prefixes = ['6-', '7-', '8-', '9-'];
    const arrays = [cbdcBzdw.value, cbjcdw.value, xxdcBzdw.value, xxjcdw.value];

    for (let i = 0; i < arrays.length; i++) {
      arrays[i].forEach((el, index) => {
        console.log(el);
        activeKey.value.push(prefixes[i] + index);
      });
    }
  }
  // 点击退改历史
  function backHistory(v) {
    let obj: any = {
      wrdkid: param.value.wrdkid,
      scjdbm: 'S2',
      jdnzt: data.value.jdnzt,
    };
    if (v == 'tg') {
      openModal(true, {
        record: obj,
        showFooter: true,
      });
    } else if (v == 'xdyj') {
      obj.title = '下达意见';
      openAdviceModal(true, {
        record: obj,
        showFooter: true,
      });
    } else if (v == 'bjzdyj') {
      obj.title = '边界指导意见';
      openAdviceModal(true, {
        record: obj,
        showFooter: true,
      });
    }
  }
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
</script>
<style scoped>
  :deep(.ant-collapse-borderless) {
    width: 100%;
  }
  .title {
    font-size: 16px;
    font-weight: 500;
  }
</style>
