<template>
    <div class="hc-page-box" id="submit-report-layout-target">
        <HcCard scrollbar>
            <template #header>
                <HcNewSwitch :datas="tabData" :keys="tabKey" :round="false" style="margin-right: 24px"
                             @change="tabChange"/>
                <HcTooltip keys="transfer_initial_expert_btn_preview">
                    <el-button hc-btn type="primary">
                        <HcIcon name="file-pdf"/>
                        <span>预览</span>
                    </el-button>
                </HcTooltip>
            </template>
            <template #extra>
                <!--transfer_initial_expert_btn_sampling -->
                <el-button color="#0581fe" hc-btn @click="submitReportClick">
                    <HcIcon name="shield-check"/>
                    <span>开始抽检</span>
                </el-button>
                <HcTooltip keys="transfer_initial_expert_btn_submit_report">
                    <el-button color="#7f83f7" hc-btn style="color: white" @click="writingConclusionClick">
                        <HcIcon name="git-pull-request"/>
                        <span>编写结论</span>
                    </el-button>
                </HcTooltip>
                <HcTooltip keys="transfer_initial_expert_btn_history_report">
                    <el-button color="#38b54a" hc-btn style="color: white" @click="onSubmitReportClick">
                        <HcIcon name="history"/>
                        <span>查看验收报告</span>
                    </el-button>
                </HcTooltip>
            </template>
            <div class="hc-card-table-title">建设单位归档资料（1200卷）</div>
            <HcCardItem ui="h-half">
                <template #header>
                    <span>一、立项审批</span>
                    <span class="text-gray">（238卷）</span>
                </template>
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
                         heights="auto"/>
            </HcCardItem>

            <HcCardItem ui="h-half">
                <template #header>
                    <span>二、勘察设计文件</span>
                    <span class="text-gray">（95卷）</span>
                </template>
                <HcTable ref="tableFileRef" :column="tableFileColumn" :datas="tableFileData" :loading="tableFileLoading"
                         heights="auto"/>
            </HcCardItem>
        </HcCard>

        <!--历史报告-->
        <HcDrawer :show="isSubmitReportDrawer" to-id="submit-report-layout-target" uis="hc-submit-report-target"
                  @close="onSubmitReportDrawerClose">
            <template #header>
                <div class="hc-select-view w-52">
                    <el-select v-model="pdfDate" placeholder="选择日期">
                        <el-option label="2022年12月24日" value="2022年12月24日"/>
                        <el-option label="2022年12月25日" value="2022年12月25日"/>
                        <el-option label="2022年12月26日" value="2022年12月26日"/>
                        <el-option label="2022年12月27日" value="2022年12月27日"/>
                    </el-select>
                </div>
                <div class="hc-title-view">试验资料（含工地试验室资质证书、仪器标定证书等）</div>
                <div class="hc-icon-view text-hover" @click="onSubmitReportDrawerClose">
                    <HcIcon name="close"/>
                </div>
            </template>
            <HcPdf
                src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
        </HcDrawer>

    </div>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {useRouter} from "vue-router";
import {useAppStore} from "~src/store";

//变量
const router = useRouter()
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);

//渲染完成
onMounted(() => {

})

//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    {key: 'tab1', name: '建设单位归档资料'},
    {key: 'tab2', name: '监理单位归档资料'},
    {key: 'tab3', name: '施工单位归档资料'},
    {key: 'tab4', name: '科研、新技术资料'},
]);
const tabChange = (item) => {
    tabKey.value = item?.key;
}


//------立项审批

//搜索表单
const searchForm = ref({
    current: 1, size: 20, total: 0
})

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//表头
const tableRef = ref(null)
const tableColumn = ref([
    {key: 'key1', name: '档号', width: 180},
    {key: 'key2', name: '案卷题名'},
    {key: 'key3', name: '总页数', width: 120},
    {key: 'key4', name: '保管期限', width: 120},
    {key: 'key5', name: '备注'},
])
const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    }
])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {

}

//------勘察设计文件

//搜索表单
const searchFormFile = ref({
    current: 1, size: 20, total: 0
})

//分页被点击
const pageFileChange = ({current, size}) => {
    searchFormFile.value.current = current
    searchFormFile.value.size = size
    getTableFileData()
}

//表头
const tableFileRef = ref(null)
const tableFileColumn = ref([
    {key: 'key1', name: '档号', width: 180},
    {key: 'key2', name: '案卷题名'},
    {key: 'key3', name: '总页数', width: 120},
    {key: 'key4', name: '保管期限', width: 120},
    {key: 'key5', name: '备注'},
])
const tableFileData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '永久',
        key5: '备注信息',
    }
])

//获取数据
const tableFileLoading = ref(false)
const getTableFileData = async () => {

}

//编写结论
const writingConclusionClick = () => {
    router.push({
        name: 'transfer-writing-conclusion'
    })
}

//开始抽检
const submitReportClick = () => {
    router.push({
        name: 'transfer-entry-sampling'
    });
}

//历史报告
const isSubmitReportDrawer = ref(false)
const onSubmitReportClick = () => {
    isSubmitReportDrawer.value = true
}
const pdfDate = ref(null)

//历史报告
const onSubmitReportDrawerClose = () => {
    isSubmitReportDrawer.value = false
}
</script>

<style lang="scss" scoped>
@import '~style/transfer/scoped/initial-expert.scss';
</style>

<style lang="scss">
.hc-submit-report-target.el-overlay {
    position: absolute;
    margin: -24px;
    height: revert;
    background-color: transparent;
    .hc-drawer-box.el-drawer {
        --el-drawer-bg-color: transparent;
        .el-drawer__body {
            padding: 24px;
            overflow: hidden;
            .hc-card-box {
                padding: 10px;
                .el-card__header {
                    padding: 10px;
                    .hc-card-header-box .hc-card-header {
                        .hc-select-view {
                            position: absolute;
                            z-index: 11;
                        }
                        .hc-title-view {
                            font-weight: bold;
                            font-size: 20px;
                            text-align: center;
                            position: relative;
                            width: 100%;
                        }
                        .hc-icon-view {
                            position: absolute;
                            right: 0;
                            font-size: 26px;
                            z-index: 11;
                        }
                    }
                }
                .el-card__body {
                    padding: 10px;
                }
            }
        }
    }
}
</style>
