<!-- 查看基本信息 -->
<template>
    <div class="bg-[#fff]">
        <a-page-header style="border: 1px solid rgb(235, 237, 240)" @back="router.go(-1)">
            <template #backIcon>
                <div class="flex">
                    <div><a-button type="primary">返回</a-button></div>
                </div>
            </template>
            <template #title>
                <div>
                    <a-space wrap>
                        <a-button type="primary" @click="advice">下达意见</a-button>
                        <a-button type="primary" @clcik="view">查看地块全流程</a-button>
                        <a-button type="primary" @click="history">退改历史</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="地块信息">
                        <DkTable :data="data" />
                    </a-collapse-panel>
                    <a-collapse-panel key="2" header="初步调查报告基本信息">
                        <suBainTable />
                    </a-collapse-panel>
                    <a-collapse-panel header="初步调查报告编制单位基本信息" key="3">
                        <unitMessageTable />
                    </a-collapse-panel>
                    <a-collapse-panel header="初步调查检测单位信息" key="4">
                        <unitMessageTable />
                    </a-collapse-panel>
                    <a-collapse-panel header="详细调查报告基本信息" key="5">
                        <unitMessageTable :labelFirst="'详细'" />
                    </a-collapse-panel>
                    <a-collapse-panel header="详细调查报告编制单位基本信息" key="6">
                        <unitMessageTable :labelFirst="'详细'" />
                    </a-collapse-panel>
                    <a-collapse-panel header="详细调查检测单位信息" key="7">
                        <unitMessageTable :labelFirst="'详细'" />
                    </a-collapse-panel>
                    <a-collapse-panel header="土壤环境质量信息" key="8">
                        <soilMessageTable :labelFirst="'控制显示土壤'" />
                    </a-collapse-panel>
                    <a-collapse-panel header="敏感受体信息" key="9">
                        <sensitivityTable :labelFirst="'详细'" />
                    </a-collapse-panel>
                    <a-collapse-panel header="修复方案基本信息" key="10">
                        <repairBainTable />
                    </a-collapse-panel>
                    <a-collapse-panel header="技术路线" key="11">
                        <technicalLines />
                    </a-collapse-panel>
                    <a-collapse-panel key="12" header="修复方案编制单位基本信息">
                        <suBainTable />
                    </a-collapse-panel>
                    <a-collapse-panel key="13" header="修复方案编制单位基本信息">
                        <MeasureInfoTable labelFirst="修复" />
                    </a-collapse-panel>
                    <a-collapse-panel key="14" header="地块边界文件上传">
                        <dkbjfileUpload />
                    </a-collapse-panel>
                    <a-collapse-panel key="15" header="填报进度">
                        <fillProgress />
                    </a-collapse-panel>
                </a-collapse>
            </a-tab-pane>
            <a-tab-pane key="2" tab="评审信息">
                <div class="w-[98%] mx-auto">
                    <a-divider orientation="left">最近一次评审信息</a-divider>
                    <Border title="评审材料" v-model="isreview">
                        <ReviewMaterial v-if="isreview" />
                    </Border>
                    <!-- 专家组意见 -->
                    <Border title="专家组意见" v-model="isexpert">
                        <a-table class=" w-[98%] mx-auto" v-if="isexpert" :columns="opinionColumns"
                            :data-source="opinionList">
                        </a-table>
                    </Border>
                    <!-- 参会人员信息 -->
                    <Border title="参会人员信息" v-model="isparticipant">
                        <a-table class=" w-[98%] mx-auto" v-if="isparticipant" :columns="participantsColumns"
                            :data-source="participantList">
                        </a-table>
                    </Border>
                    <!-- 归档材料信息 -->
                    <Border title="归档材料信息" v-model="ismaterial">
                      <ViewGdcl class="w-[98%] mx-auto" :data="record?.gdclList || []" v-show="ismaterial" />
                    </Border>
                    <a-divider orientation="left">历次评审信息</a-divider>
                    <Border title="归档材料信息" v-model="ishistroy">
                        <a-table class=" w-[98%] mx-auto" v-if="ishistroy" :columns="histroyColumns"
                            :data-source="hisList">
                        </a-table>
                    </Border>
                    <a-divider orientation="left">最近一次评审信息</a-divider>
                    <Border title="归档材料信息" v-model="iszjps">
                        <a-table class=" w-[98%] mx-auto" v-if="ishistroy" :columns="zjpsColumns"
                            :data-source="zjpsList">
                        </a-table>
                    </Border>
                </div>
            </a-tab-pane>

        </a-tabs>
        <AdviceModal @register="registerModal"></AdviceModal>
    </div>
</template>

<script lang="ts" setup>
import { ref } from '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 sensitivityTable from '/@/components/customComponent/sensitivityTable.vue'
import technicalLines from '/@/components/customComponent/technicalLines.vue'
import repairBainTable from '/@/components/customComponent/repairBainTable.vue'
import MeasureInfoTable from '/@/components/customComponent/MeasureInfoTable.vue'
import dkbjfileUpload from '/@/components/customComponent/dkbjfileUpload.vue'
import fillProgress from '/@/components/customComponent/fillProgress.vue'
import ReviewMaterial from '/@/components/customComponent/ReviewMaterial.vue'
import Border from '/@/components/customComponent/Border.vue'
import ViewGdcl from '/@/components/customComponent/ViewGdcl.vue'; // 公共组件
import { useModal } from '/@/components/Modal';
import { opinionColumns, participantsColumns, histroyColumns, zjpsColumns } from './viewData'
import { useRouter } from 'vue-router';
import { plotDetails, reviewRecords } from '/@/api/common/api'
import AdviceModal from './AdviceModal.vue'


let router = useRouter();
// Emits声明
const [registerModal, { openModal }] = useModal();
const active = ref('1')
const activeKey = ref('1')
const data = ref<any>({})
const record = ref<any>({})
const hisList = ref<any>([])
const zjpsList = 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 ishistroy = ref(true)
const iszjps = ref(true)

function init() {
    getInfor()
    getRecord()
}
init()
// 获取地块基本信息
async function getInfor() {
    data.value = await plotDetails({
        wrdkid: param.value.wrdkid,
        scjdbm: param.value.scjdbm
    })
}
// 获取评审记录数据
async function getRecord() {
    record.value = await reviewRecords({
        wrdkid: router.currentRoute.value.query.wrdkid,
        scjdbm: router.currentRoute.value.query.scjdbm
    })
    participantList.value = record.value.chryList
    materialList.value = record.value.gdclList
    hisList.value = record.value.hisList
    zjpsList.value = record.value.zjyj
    opinionList.value = record.value.zjzList
}
// 点击下达意见
function advice() {
    openModal(true, {
        record: { wrdkid: param.value.wrdkid },
        isUpdate: true,
        showFooter: true,
    })
}
// 点击查看地块全流程
function view() {
    router.push(`/directory/mlzk/land/modules/ViewModal?wrdkid=${param.value.wrdkid}`)
}
// 点击退回历史
function history() {
    router.push(`/directory/mlzk/land/modules/History?wrdkid=${param.value.wrdkid}`)
}
</script>

<style lang="less" scoped>
:deep(.ant-table-thead) {
    background-color: #F2F2F2;

    th {
        background-color: #F2F2F2;
    }
}
</style>
