<!-- 查看基本信息 -->
<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.gkxf" :scjd="'管控及修复方案'" />
          </a-collapse-panel>
          <a-collapse-panel key="3" header="技术路线" v-if="data.gkxf.jslx.length != 0">
            <technicalLines :data="data?.gkxf?.jslx" />
          </a-collapse-panel>
          <a-collapse-panel key="4" header="污染土壤外运处置" :forceRender="true">
            <sftrwy ref="chilrenwrtrwy" :data="{ sfczwrtrwycz: isres, wrdkid: param.wrdkid, disabled: true }" />
          </a-collapse-panel>
          <a-collapse-panel :key="'4-' + index" header="风险管控及修复方案编制单位基本信息" v-for="(item, index) in data.bzdw">
            <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" title="监理单位报告" />
          </a-collapse-panel>
          <a-collapse-panel key="4222222" header="土壤和地下水管控及修复信息">
              <EditTrwrDetail  :data="data.trhjfxxx" />
          </a-collapse-panel>
          <a-collapse-panel key="5" header="风险管控及修复方案措施信息">
            <MeasureInfoTable :data="data.gkxf" labelFirst="风险管控与修复" />
          </a-collapse-panel>
          <a-collapse-panel key="6" header="风险管控及修复方案文件上传">
            <CdUpload
              labelFirst="管控与修复"
              :visibleFlag="false"
              :dkxx="data.wrdkjbxxb"
              :objec="[{ name: '公示截图' }, { name: '管控及修复报告' }]"
              :data="{ ...data.gkxf, scjdbm: 'S10', pgtype: param.pgtype }"
            />
          </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="S10" />
        </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 technicalLines from '/@/components/customComponent/technicalLines.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 EditTrwrDetail from '/@/components/customComponent/fxpg/trfxDetail.vue'; //土壤和地下水管控及修复信息
  import CdUpload from '/@/components/customComponent/CdUpload.vue';
  import fillProgress from '/@/components/customComponent/fillProgress.vue';
  import sftrwy from '/@/components/customComponent/sftrwy.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 { useUserStore } from '/@/store/modules/user';
  import AdviceModal from '@/components/customComponent/AdviceModal.vue';
  import History from '@/components/customComponent/History.vue';
  import { useRouter } from 'vue-router';
  import { plotDetails, isSfczwrtrwycz } from '/@/api/common/api';

  let router = useRouter(); // 注册路由
  const data = ref<any>({
    gkxf: {
      jslx: [],
    },
  });
  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 isres = ref();
  //手风琴
  const activeKey = ref(['1', '2', '3', '4', '5', '6', '7', '4222222']);
  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: 'S10',
    });
    isres.value = await isSfczwrtrwycz({ wrdkid: param.value.wrdkid });
    //  默认展开所有面板
    const prefixes = ['4-', '8-', '9-'];
    const arrays = [data.value.bzdw, data.value.ssdw, data.value.jldw];
    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: 'S10',
      pgtype: param.value.pgtype,
      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 views() {
  //     router.push(`/directory/mlzk/land/modules/ViewModal?wrdkid=${param.value.wrdkid}`);
  //   }
</script>
<style lang="less" scoped>
  :deep(.ant-collapse-borderless) {
    width: 100%;
  }
</style>
