<!-- 查看基本信息 -->
<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" v-if="userInfo.userIdentity <= 3" @click="backHistory('xdyj')">下达意见</a-button>
            <a-button type="primary" v-if="userInfo.userIdentity != '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.fxpg" :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" header="土壤环境风险信息">
            <soilMessageTable :data="data.trhjfxxx" />
          </a-collapse-panel>
          <a-collapse-panel key="5" header="风险评估文件上传">
            <dkbjfileUpload :objec="[{ name: '公式截图' }, { name: '风险评估报告' }]" :data="data.fxpg" />
          </a-collapse-panel>
          <a-collapse-panel key="6" 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="S3" />
        </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 soilMessageTable from '/@/components/customComponent/fxpg/trfxView.vue';
  import dkbjfileUpload 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 History from '@/components/customComponent/History.vue';
  import { useUserStore } from '/@/store/modules/user';
  import AdviceModal from '@/components/customComponent/AdviceModal.vue';
  import { useModal } from '/@/components/Modal';

  import { useRouter } from 'vue-router';
  import { plotDetails } from '/@/api/common/api';

  const [registerModal, { openModal }] = useModal();
  const [registerAdviceModal, { openModal: openAdviceModal }] = useModal();
  const { userInfo }: any = useUserStore();
  let router = useRouter(); // 注册路由
  const data = ref<any>({});
  const param = ref<any>(router.currentRoute.value.query);

  // 评审信息
  const isreview = ref(true);
  const isexpert = ref(true);
  const isparticipant = ref(true);
  const ismaterial = ref(true);

  //手风琴
  const activeKey = ref(['1', '2', '4', '5', '6']);
  const active = ref('1');
  getInfor();
  // 获取地块基本信息
  async function getInfor() {
    data.value = await plotDetails({
      wrdkid: param.value.wrdkid,
      scjdbm: 'S3',
    });
    //  默认展开所有面板
    const prefixes = ['3-'];
    const arrays = [data.value.bzdw];
    for (let i = 0; i < arrays.length; i++) {
      arrays[i].forEach((index) => {
        activeKey.value.push(prefixes[i] + index);
      });
    }
  }
  // 点击退改历史退回意见
  function backHistory(v) {
    let obj: any = {
      wrdkid: param.value.wrdkid,
      scjdbm: 'S3',
      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,
      });
    }
  }
</script>
<style lang="less" scoped>
  :deep(.ant-collapse-borderless) {
    width: 100%;
  }
</style>
