<!-- 查看基本信息 -->
<template>
  <!-- <BasicDrawer v-bind="$attrs" @register="registerDrawer" title="资料填报"  width="80%" @ok="handleSubmit" destroyOnClose> -->
  <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" @click="views">查看地块全流程</a-button> -->
            <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="详情">
        <a-collapse v-model:activeKey="activeKey" :bordered="false">
          <a-collapse-panel key="1" header="地块信息" v-if="data.wrdkjbxxb">
            <DkTable :data="data.wrdkjbxxb" />
          </a-collapse-panel>
          <a-collapse-panel key="2" header="风险管控及修复效果评估报告基本信息">
            <suBainTable :data="data.xgpg" :scjd="'管控及修复效果评估'" />
          </a-collapse-panel>
          <a-collapse-panel :key="'3-' + index" header="风险管控及修复效果评估编制单位基本信息" v-for="(item, index) in data?.bzdw">
            <unitMessageTable :data="item" />
          </a-collapse-panel>
          <a-collapse-panel :key="'4-' + index" header="风险管控及修复效果评估检测单位基本信息" v-for="(item, index) in data?.jcdw">
            <unitMessageTable :data="item" />
          </a-collapse-panel>
          <a-collapse-panel :key="'8-' + index" header="风险管控及修复效果评估实施单位基本信息" v-for="(item, index) in data?.ssdw">
            <unitMessageTable :data="item" />
          </a-collapse-panel>
          <a-collapse-panel :key="'9-' + index" header="风险管控及修复效果评估监理单位基本信息" v-for="(item, index) in data?.jldw">
            <unitMessageTable :data="item" />
          </a-collapse-panel>
          <a-collapse-panel :key="'10-' + index" header="风险管控及修复效果评估施工总结报告基本信息" v-for="(item, index) in data?.sgzj">
            <unitMessageTable :data="item" />
          </a-collapse-panel>
          <a-collapse-panel key="5" header="风险管控及修复效果评估措施信息">
            <MeasureInfoTable :data="data.xgpg" labelFirst="风险管控及修复效果评估" />
            <div
              >土壤环境检测数据<span class="text-red ml-3">
                [提示: 检测项编号请参考字典，点击
                <a-button type="primary" @click.prevent="down('/upload/static/检测项编号字典表.xlsx', '检测项编号字典表')">下载</a-button>
                查看]</span
              ></div
            >
            <PointInfor type="view" :data="{ wrdkid: param.wrdkid, pointType: 'solid', scjdbm: 'S6', faId: param.id }" />
            <div
              >地下水环境检测数据<span class="text-red">
                [提示: 检测项编号请参考字典，点击
                <a-button type="primary" @click.prevent="down('/upload/static/检测项编号字典表.xlsx', '检测项编号字典表')">下载</a-button>
                查看]</span
              ></div
            >
            <PointInfor type="view" :data="{ wrdkid: param.wrdkid, pointType: 'water', scjdbm: 'S6', faId: param.id }" />
          </a-collapse-panel>
          <a-collapse-panel key="6" header="地块边界文件">
            <!-- <dkbjfileUpload labelFirst="风险" /> -->
            <CdUpload
              ref="chilrenReportxx"
              labelFirst="效果评估"
              :objec="[{ name: '公示截图' }, { name: '评估报告' }]"
              :data="{ ...data.xgpg, scjdbm: 'S6', pgtype: param.pgtype }"
              :dksdzt="data?.xgpg?.dksdzt"
            />
          </a-collapse-panel>
          <a-collapse-panel key="7" header="填报进度">
            <fillProgress :List="data.lzjd" />
          </a-collapse-panel>
        </a-collapse>
      </a-tab-pane>
      <a-tab-pane key="2" tab="评审信息">
        <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" :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="S6" type="gkxfpg" />
        </div>
        <div v-else class="text-center py-5">暂无评审信息</div>
      </a-tab-pane>
    </a-tabs>
    <History @register="registerModal" />
    <AdviceModal @register="registerAdviceModal"></AdviceModal>
  </div>
  <!-- </BasicDrawer> -->
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import DkTable from '/@/components/customComponent/DkTable.vue';
  import suBainTable from '/@/components/customComponent/fxpg/fxpgInfro.vue';
  import unitMessageTable from '/@/components/customComponent/unitMessageTable.vue'; // 单位检测信息请传不同的obj
  import MeasureInfoTable from '/@/components/customComponent/MeasureInfoTable.vue'; // 公共组件
  // import dkbjfileUpload from '/@/components/customComponent/fxpg/UploadBj.vue'
  import CdUpload from '/@/components/customComponent/CdUpload.vue';
  import fillProgress from '/@/components/customComponent/fillProgress.vue';
  import MaterialUpload from './components/MaterialUpload.vue';
  import Border from '/@/components/customComponent/Border.vue'; // 公共组件
  import ViewZjz from '/@/views/dkgl/investigate/components/ViewZjz.vue'; // 公共组件
  import ViewChry from '/@/views/dkgl/investigate/components/ViewChry.vue'; // 公共组件
  import ViewGdcl from '/@/components/customComponent/ViewGdcl.vue'; // 公共组件
  import HistoryInfo from '/@/components/customComponent/HistoryInfo.vue'; // 公共组件
  import { useModal } from '/@/components/Modal';
  import { useRouter } from 'vue-router';
  import { plotDetails } from '/@/api/common/api';
  import { useUserStore } from '/@/store/modules/user';
  import AdviceModal from '@/components/customComponent/AdviceModal.vue';
  import History from '@/components/customComponent/History.vue';
  import PointInfor from '/@/components/customComponent/PointInfor.vue';
  import { downloadFile } from '/@/api/common/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  let router = useRouter(); // 注册路由
  const data = ref<any>({});
  const param = ref<any>(router.currentRoute.value.query);
  const { userInfo }: any = useUserStore();
  const [registerModal, { openModal }] = useModal();
  const [registerAdviceModal, { openModal: openAdviceModal }] = useModal();
  // 评审信息
  const isreview = ref(true);
  const isexpert = ref(true);
  const isparticipant = ref(true);
  const ismaterial = ref(true);

  //手风琴
  const activeKey = ref(['1', '2', '3', '5', '6', '7']);
  const active = ref('1');
  getInfor();
  // 获取地块基本信息
  async function getInfor() {
    data.value = await plotDetails({
      wrdkid: param.value.wrdkid,
      id: param.value.id,
      pgtype: param.value.pgtype,
      scjdbm: 'S6',
    });
    data.value.bzdw = data.value.bzdw || [];
    data.value.jcdw = data.value.jcdw || [];
    data.value.ssdw = data.value.ssdw || [];
    data.value.jldw = data.value.jldw || [];
    data.value.sgzj = data.value.sgzj || [];

    //  默认展开所有面板
    const prefixes = ['3-', '4-', '8-', '9-', '10-'];
    const arrays = [data.value.bzdw, data.value.jcdw, data.value.ssdw, data.value.jldw, data.value.sgzj];
    for (let i = 0; i < arrays.length; i++) {
      arrays[i].forEach((el, index) => {
        console.log(el);
        activeKey.value.push(prefixes[i] + index);
      });
    }
    console.log(activeKey);
  }
  // 点击退改历史退回意见
  function backHistory(v) {
    let obj: any = {
      wrdkid: param.value.wrdkid,
      scjdbm: 'S6',
      pgtype: param.value.pgtype,
      jdnzt: data.value.jdnzt,
    };
    if (v == 'tg') {
      openModal(true, {
        record: obj,
        showFooter: true,
      });
    } else if (v == 'xdyj') {
      if (data.value.wrdkjbxxb?.dksdzt == '1') {
        createMessage.info('地块已经被锁定不能此执行操作');
        return;
      }
      obj.title = '下达意见';
      openAdviceModal(true, {
        record: obj,
        showFooter: true,
      });
    } else if (v == 'bjzdyj') {
      if (data.value.wrdkjbxxb?.dksdzt == '1') {
        createMessage.info('地块已经被锁定不能此执行操作');
        return;
      }
      obj.title = '边界指导意见';
      openAdviceModal(true, {
        record: obj,
        showFooter: true,
      });
    }
  }
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
  // 点击查看地块全流程
  //   function views() {
  //     router.push(`/directory/mlzk/land/modules/ViewModal?wrdkid=${param.value.wrdkid}`);
  //   }
</script>
<style lang="less" scoped>
  :deep(.ant-collapse-borderless) {
    width: 100%;
  }
</style>
