<template>
    <div class="hc-page-box" id="carry-spot-checks-layout-target">
        <HcCard ui="hc-query-card-box" v-show="!isCarrySpotChecksDrawer">
            <template #header>
                <div class="hc-arrow-icon">
                    <HcIcon name="arrow-left-s"/>
                </div>
                <div class="hc-tag-box">
                    <el-scrollbar>
                        <div class="scrollbar-content">
                            <template v-for="item in tags">
                                <el-tag class="mx-1" closable effect="light" size="large">{{ item.name }}</el-tag>
                            </template>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-arrow-icon">
                    <HcIcon name="arrow-right-s"/>
                </div>
            </template>

            <div class="hc-query-input-box">
                <input class="input" placeholder="可按关键字模糊搜索，多个关键字用“，” 隔开">
                <div class="search-btn-box">
                    <div class="search-btn">按文件查询</div>
                    <div class="search-btn">按案卷查询</div>
                </div>
            </div>
            <div class="hc-search-hot-key">
                <span>热门搜索词汇：</span>
                <span class="text-hover ml-4">文件名</span>
                <span class="text-hover ml-4">案卷名</span>
                <span class="text-hover ml-4">档号</span>
                <span class="text-hover ml-4">单位</span>
            </div>

            <div class="hc-search-screening-item">
                <div class="title">年度：</div>
                <template v-for="item in annuals">
                    <div class="screening-key" :class="item.name === annual ? 'cut': ''" @click="annualClick(item)">{{item.name}}</div>
                </template>
            </div>
            <div class="hc-search-screening-item">
                <div class="title">月份：</div>
                <template v-for="item in months">
                    <div class="screening-key" :class="item.name === month ? 'cut': ''" @click="monthClick(item)">{{item.name}}</div>
                </template>
            </div>
            <div class="hc-search-screening-item">
                <div class="title">期限：</div>
                <template v-for="item in deadlines">
                    <div class="screening-key" :class="item.name === deadline ? 'cut': ''" @click="deadlineClick(item)">{{item.name}}</div>
                </template>
            </div>
            <div class="hc-search-screening-item">
                <div class="title">密级：</div>
                <template v-for="item in securitys">
                    <div class="screening-key" :class="item.name === security ? 'cut': ''" @click="securityClick(item)">{{item.name}}</div>
                </template>
            </div>
            <div class="hc-search-screening-item">
                <div class="title">类别：</div>
                <template v-for="item in classess">
                    <div class="screening-key" :class="item.name === classes ? 'cut': ''" @click="classesClick(item)">{{item.name}}</div>
                </template>
            </div>
            <div class="hc-search-screening-item mb-6">
                <div class="title">目录：</div>
                <div class="screening-key text-link" @click="nodeTreeClick">
                    <HcIcon name="node-tree" :line="false"/>
                    <span class="ml-1">目录树</span>
                </div>
            </div>

            <div class="hc-c-card-box" :class="tableAllShow?'all':''">
                <div class="header-box">
                    <div class="header">
                        <HcNewSwitch :datas="tabData" :keys="tabKey" @change="tabChange" :round="false" v-if="userRoleId !== website.role_id"/>
                        <span v-else>案卷</span>
                    </div>
                    <div class="extra">
                        <el-button type="primary" hc-btn>
                            <HcIcon name="download"/>
                            <span>下载</span>
                        </el-button>
                    </div>
                </div>
                <div class="hc-arrow-icon" :class="tableAllShow?'down':'up'" @click="tableAllShowClick">
                    <HcIcon name="arrow-up" v-if="!tableAllShow"/>
                    <HcIcon name="arrow-down" v-else/>
                </div>
                <div class="body" :class="tableFileShow?'file-table':''">
                    <div class="hc-c-table-box">
                        <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCurrentRow isCheck @selection-change="tableSelection" @row-click="tableRowClick"   :ui="hoverHand?'hover-hand':''">
                            <template #action="{row,index}">
                                <el-button type="primary" size="small" @click.stop="consultFileClick">查阅案卷</el-button>
                            </template>
                        </HcTable>
                    </div>
                    <div class="hc-f-table-box" v-if="tableFileShow">
                        <div class="header-box">
                            <div class="header">卷内文件</div>
                            <div class="hc-icon-close text-hover" @click="tableFileCloseClick">
                                <HcIcon name="close"  style=" color:rgb(64, 149, 229);"/>
                            </div>
                        </div>
                        <div class="hc-file-table-box">
                            <HcTable ref="tableFileRef" :column="tableFileColumn" :datas="tableFileData" :loading="tableFileLoading" isCheck @selection-change="tableFileSelection">
                                <template #action="{row,index}">
                                    <el-button type="primary" size="small" @click.stop="consultFileClick">查阅文件</el-button>
                                </template>
                            </HcTable>
                        </div>
                    </div>
                </div>
                <div class="action">
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </div>
            </div>

        </HcCard>

        <!--展开抽查-->
        <HcDrawer :show="isCarrySpotChecksDrawer" uis="hc-carry-spot-checks-target" to-id="carry-spot-checks-layout-target" @close="onCarrySpotChecksDrawerClose">
            <div class="hc-carry-spot-checks-pdf">
                <HcPdf src="https://bladex-test-info.oss-cn-chengdu.aliyuncs.com//upload/20221212/ce9799c7d18efc03efefd6f242439f2e.pdf"/>
                <el-tooltip content="展开/收起 右侧目录" placement="top" :disabled="!isBubble">
                    <div class="hc-csc-pdf-btn" @click="onCarryDataShow">
                        <HcIcon name="arrow-right-s" v-show="isCarryDataShow"/>
                        <HcIcon name="arrow-left-s" v-show="!isCarryDataShow"/>
                    </div>
                </el-tooltip>
            </div>
            <div class="hc-carry-spot-checks-data" v-show="isCarryDataShow">
                <div class="hc-csc-switch">
                    <HcNewSwitch :datas="tabTypeTab" :keys="tabTypeKey" @change="tabTypeChange" size="default" :round="false"/>
                </div>
                <div class="hc-csc-info-box">
                    <el-scrollbar>
                        <div class="hc-info-text-item">
                            <div class="title">案卷题名：</div>
                            <div class="content">安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">
                                <span>密</span>
                                <span class="ml-7">级：</span>
                            </div>
                            <div class="content">机密</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">保管期限：</div>
                            <div class="content">永久</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">卷内文件：</div>
                            <div class="content">9</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">起止日期：</div>
                            <div class="content">2022.02.12~2023.11.02</div>
                        </div>
                        <div class="hc-info-text-item">
                            <div class="title">立卷单位：</div>
                            <div class="content">贵州路桥集团xxxxx</div>
                        </div>
                    </el-scrollbar>
                </div>
                <div class="hc-csc-data-box">
                    <HcTable :column="cscTableColumn1" :datas="cscTableData1" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab1'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn2" :datas="cscTableData2" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab2'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn3" :datas="cscTableData3" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab3'">
                        <template #name="{row}">
                            <div :class="row.id === 2 ? 'text-link' : 'text-hover'">{{row?.name}}</div>
                        </template>
                    </HcTable>

                    <HcTable :column="cscTableColumn4" :datas="cscTableData4" :loading="cscTableLoading" :isIndex="false" v-if="tabTypeKey === 'tab4'">
                        <template #name="{row}">
                            <div class="hc-csc-associated-row" :class="row.id === 2 ? 'text-link' : 'text-hover'">
                                <el-tag effect="dark">{{row?.tag}}</el-tag>
                                <span class="ml-3">{{row?.name}}</span>
                            </div>
                        </template>
                    </HcTable>

                    <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>

                    <HcTable :column="cscTableColumn5" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>

                    <el-tooltip content="使用弹窗查看数据" placement="top" :disabled="!isBubble" v-if="tabTypeKey === 'tab6' || tabTypeKey === 'tab5'">
                        <div class="hc-table-info-btn" @click="cscTableDataModalShow">
                            <HcIcon name="airplay"/>
                        </div>
                    </el-tooltip>
                </div>
                <div class="hc-csc-action-box">
                    <div class="btn-box">
                        <el-button hc-btn @click="onCarrySpotChecksDrawerClose">
                            <HcIcon name="close"/>
                            <span>取消查阅</span>
                        </el-button>
                    </div>
                </div>
            </div>
        </HcDrawer>

        <!--使用弹窗查看数据-->
        <HcDialog :show="cscTableDataModal" :title="cscTableDataTitle" widths="1080px" isTable :footer="false" @close="cscTableDataModalClose">
            <MetaTable :loading="cscTableLoading" v-if="tabTypeKey === 'tab5'"/>
            <HcTable :column="cscTableColumn51" :datas="cscTableData5" :loading="cscTableLoading" v-if="tabTypeKey === 'tab6'"/>
        </HcDialog>

        <!--目录树-->
        <HcDialog :show="nodeTreeModal" widths="1080px" isTable saveText="确认" :isClose="false" @close="nodeTreeModalClose" @save="nodeTreeModalSave">
            <template #header>
                <div role="heading" class="el-dialog__title">
                    <span class="mr-3">选择目录</span>
                    <span class="text-sm text-orange">点击左侧黄色文件夹可展开下一级</span>
                </div>
            </template>
            <template #extra>
                <HcNewSwitch :datas="nodeTabData" :keys="nodeTabKey" @change="nodeTabChange" :round="false"/>
            </template>

            <el-collapse class="hc-node-tree-collapse" v-model="activeName" accordion @change="collapseChange">
                <template v-for="item in nodeTreeArr">
                    <el-collapse-item :name="item.id.toString()">
                        <template #title>
                            <div class="hc-collapse-item-title">
                                <HcIcon name="folder-3" fill class="icon"/>
                                <span class="title">{{item.name}}</span>
                            </div>
                        </template>
                        <HcNodeTree :projectId="projectId" :contractId="contractId"/>
                    </el-collapse-item>
                </template>
            </el-collapse>
        </HcDialog>

    </div>
</template>

<script setup>
import {ref, nextTick, onMounted, watch} from "vue";
import {useAppStore} from "~src/store";
import MetaTable from "../transfer/components/meta-table.vue"
//import HcNodeTree from "./components/query/hc-tree.vue"
import HcNodeTree from "~src/components/tree/hc-tree-1.vue"
import website from '~src/config/index'

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isBubble = ref(useAppState.getBubble);
const userRoleId = ref(useAppState.getRoleId);
const hoverHand = ref(true)

//监听
watch(() => [
    useAppState.getBubble,
], ([bubble]) => {
    isBubble.value = bubble
})

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

})

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

const tags = ref([
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
    {name: '搜索字符符号'},
])

//年度
const annual = ref('2019')
const annuals = ref([
    {name: '所有'}, {name: '2020'}, {name: '2019'}, {name: '2018'},
    {name: '2017'}, {name: '2016'}, {name: '2015'}, {name: '2014'},
])
const annualClick = ({name}) => {
    annual.value = name
}

//月份
const month = ref('01月')
const months = ref([
    {name: '所有'}, {name: '01月'}, {name: '02月'}, {name: '03月'},
    {name: '04月'}, {name: '05月'}, {name: '06月'}, {name: '07月'},
    {name: '08月'}, {name: '09月'}, {name: '10月'}, {name: '11月'},
    {name: '12月'}
])
const monthClick = ({name}) => {
    month.value = name
}

//期限
const deadline = ref('永久')
const deadlines = ref([
    {name: '所有'}, {name: '永久'}, {name: '30年'}, {name: '10年'}
])
const deadlineClick = ({name}) => {
    deadline.value = name
}

//密级
const security = ref('所有')
const securitys = ref([
    {name: '所有'}, {name: '秘密'}, {name: '机密'}, {name: '绝密'}
])
const securityClick = ({name}) => {
    security.value = name
}

//类别
const classes = ref('所有')
const classess = ref([
    {name: '所有'}, {name: '竣工图'}, {name: '试验'}, {name: '声像'}, {name: '质检'}, {name: '计量'}, {name: '隐蔽'}, {name: '管理文件'},
])
const classesClick = ({name}) => {
    classes.value = name
}

//目录树
const nodeTreeClick = () => {
    nodeTreeModal.value = true
}
const nodeTreeModal = ref(false)
const nodeTreeModalClose = () => {
    nodeTreeModal.value = false
}
//确认
const nodeTreeModalSave = () => {
    nodeTreeModal.value = false
}

//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    {key:'tab1', name: '文书档案', text: '(23)'},
    {key:'tab2', name: '竣工档案', text: '(13)'},
]);
const tabChange = (item) => {
    tabKey.value = item?.key;
}

//分页被点击
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: '页数', width: 120},
    {key:'key6', name: '立卷单位', width: 260},
    {key:'action', name: '操作', width: 120},
])
const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: '秘密',
        key4: '永久',
        key5: '2',
        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: '秘密',
        key4: '永久',
        key5: '2',
        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '安康至来凤国家高速公路奉节至巫山（渝鄂界）段干岩洞隧道LK3+425～LK3+393初期支护钢筋网分项开工报告、检验申请批复单、质量检验报告单、记录表、试验检测记录及评定报告、中间交工证书',
        key3: '秘密',
        key4: '永久',
        key5: '2',
        key6: 'xxxxxxxxxxxxxxxxxxxxxxx',
    }
])

const tableLoading = ref(false)
const getTableData = async () => {

}

//多选
const tableKeys = ref([]);
const tableSelection = (rows) => {
    tableKeys.value = rows
}


const tableAllShow = ref(false)
const tableAllShowClick = () => {
    tableFileShow.value = false;
    tableAllShow.value = !tableAllShow.value;
}

//表头
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: '页数', width: 120},
    {key:'action', name: '操作', width: 120},
])
const tableFileData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: 'K0+000~K0+100土沟土沟.pdf',
        key3: '20220212',
        key4: '贵州路桥xxxxx',
        key5: '2',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: 'K0+000~K0+100土沟土沟.pdf',
        key3: '20220212',
        key4: '贵州路桥xxxxx',
        key5: '2',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: 'K0+000~K0+100土沟土沟.pdf',
        key3: '20220212',
        key4: '贵州路桥xxxxx',
        key5: '2',
    }
])
const tableFileLoading = ref(false)
const tableFileSelection = (rows) => {
    console.log(rows)
}

//表格行被点击
const tableFileShow = ref(false)
const tableRowClick = () => {
    tableAllShow.value = true;
    tableFileShow.value = true;
}
const tableFileCloseClick = () => {
    tableFileShow.value = false;
}

const consultFileClick = () => {
    isCarrySpotChecksDrawer.value = true
}
const isCarrySpotChecksDrawer = ref(false)

//类型tab数据和相关处理
const tabTypeKey = ref('tab1')
const tabTypeTab = ref([
    {key:'tab1',  name: '卷内文件'},
    {key:'tab2', name: '竣工资料'},
    {key:'tab3', name: '计量资料'},
    {key:'tab4', name: '关联资料'},
    {key:'tab5', name: '元数据'},
    {key:'tab6', name: '验签包'},
]);
const tabTypeChange = ({key}) => {
    tabTypeKey.value = key
}

const cscTableLoading = ref(false)

//卷内目录
const cscTableColumn1 = [
    {key:'name', name: '卷内文件题名', align: 'center'}
];
const cscTableData1 = ref([
    {id: 1, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 2, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 3, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 4, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 5, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 6, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'},
    {id: 7, name: '[K8+450阳光大桥第x联（跨）墩顶负弯矩张拉压浆].PDF'}
])

//竣工资料
const cscTableColumn2 = [
    {key:'name', name: '竣工图资料', align: 'center'}
];
const cscTableData2 = ref([
    {id: 1, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 2, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 3, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 4, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 5, name: 'J6-3-2-Q-8-34 桥墩一般构造图(1-9).pdf'},
    {id: 6, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'},
    {id: 7, name: 'S6-3-2-Q-8-32 箱梁梁底支座垫石钢筋构造图111-箱梁梁底调平垫块及支座垫石钢筋构造图.pdf'}
])

//计量资料
const cscTableColumn3 = [
    {key:'name', name: '计量资料', align: 'center'}
];
const cscTableData3 = ref([
    {id: 1, name: 'ZB2-17.pdf'},
    {id: 2, name: 'ZB2-18.pdf'},
    {id: 3, name: 'ZB2-19.pdf'},
    {id: 4, name: 'ZB2-20.pdf'},
    {id: 5, name: 'ZB2-21.pdf'},
    {id: 6, name: 'ZB2-22.pdf'},
    {id: 7, name: 'ZB2-23.pdf'}
])

//计量资料
const cscTableColumn4 = [
    {key:'name', name: '关联文件', align: 'center'}
];
const cscTableData4 = ref([
    {id: 1, name: 'xxxxxxxxxxxxxxxxxxx.pdf', tag: '开工'},
    {id: 2, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '工序'},
    {id: 3, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '评定'},
    {id: 4, name: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx.pdf', tag: '交工'},
    {id: 5, name: '', tag: '抽检'},
    {id: 6, name: '', tag: '隐蔽'}
])

//验签包
const cscTableColumn5 = [
    {key:'user', name: '签名者'},
    {key:'time', name: '签名时间'},
    {key:'val', name: '摘要'},
];
const cscTableColumn51 = [
    {key:'user', name: '签名者', width: 300},
    {key:'time', name: '签名时间', width: 200},
    {key:'val', name: '摘要'},
];
const cscTableData5 = ref([
    {id: 1, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 2, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 3, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 4, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 5, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'},
    {id: 6, user: '051@王海军@0422431197502148151@1', time: '2022-05-13 08:54:15', val: '签名有效。由051@王海军@0422431197502148151@1签名。自应用本签名以来，文档未被修改过。签名者身份有效。'}
])

//抽检意见
const reform = ref({
    type: false, content: ''
})

//显示右侧目录
const isCarryDataShow = ref(true)
const onCarryDataShow = () => {
    isCarryDataShow.value = !isCarryDataShow.value
}

//使用弹窗查看数据
const cscTableDataModal = ref(false)
const cscTableDataTitle = ref('')
//显示弹窗
const cscTableDataModalShow = () => {
    const key = tabTypeKey.value;
    if (key === 'tab5') {
        cscTableDataTitle.value = '元数据'
    } else if (key === 'tab6') {
        cscTableDataTitle.value = '验签包'
    }
    cscTableDataModal.value = true
}

//关闭弹窗
const cscTableDataModalClose = () => {
    cscTableDataModal.value = false
}

//关闭抽查
const onCarrySpotChecksDrawerClose = () => {
    isCarrySpotChecksDrawer.value = false
}

//tab数据和相关处理
const nodeTabKey = ref('tab1')
const nodeTabData = ref([
    {key:'tab1', name: '业主档案'},
    {key:'tab2', name: '施工档案'},
    {key:'tab3', name: '监理档案'},
    {key:'tab4', name: '文书档案'},
]);
const nodeTabChange = (item) => {
    nodeTabKey.value = item?.key;
}


const activeName = ref('')
const nodeTreeArr = ref([
    {id: '1', name: '一、立项审批文件'},
    {id: '2', name: '二、勘察设计文件'},
    {id: '3', name: '三、招标投标、合同协议文件'},
    {id: '4', name: '四、工程准备、征地、拆迁、移民等文件'},
    {id: '5', name: '五、项目管理文件'},
    {id: '6', name: '六、计量与支付、结算与审计文件'},
    {id: '7', name: '七、交、竣工文件'},
    {id: '8', name: '八、工程照片、音像资料'},
])
const collapseChange = (key) => {
    activeName.value = key.toString();
}

</script>

<style lang="scss" scoped>
.hc-arrow-icon {
    width: 32px;
    height: 32px;
    display: flex;
    font-size: 20px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s;
    &:hover {
        color: var(--el-color-primary);
    }
}
.hc-tag-box {
    position: relative;
    width: calc(100% - 40px);
    overflow: hidden;
}
.scrollbar-content {
    white-space: nowrap;
}

.hc-query-input-box {
    position: relative;
    display: flex;
    align-items: center;
    .input {
        position: relative;
        height: 62px;
        border: 0;
        flex: 1;
        padding: 0 24px;
        font-size: 18px;
        background: #E7EEF4;
        border-radius: 100px 0 0 100px;
        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #cccccc;
        }
        &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #cccccc;
        }
        &:-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #cccccc;
        }
        &:-ms-input-placeholder { /* Internet Explorer 10-11 */
            color: #cccccc;
        }
        &:-ms-input-placeholder { /* Microsoft Edge */
            color: #cccccc;
        }
        &:focus {
            outline: none;
        }
    }
    .search-btn-box {
        position: relative;
        height: 62px;
        .search-btn {
            position: relative;
            height: 30px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 24px;
            cursor: pointer;
            background: var(--el-color-primary);
            border-radius: 0 100px 100px 0;
            transition: background 0.2s;
            &:hover {
                background: var(--el-color-primary-dark-2);
            }
        }
        .search-btn + .search-btn {
            margin-top: 2px;
        }
    }
}
.hc-search-hot-key {
    position: relative;
    color: #9A9A9A;
    padding: 20px;
    font-size: 14px;
}

.hc-search-screening-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 14px;
    .title {
        position: relative;
    }
    .screening-key {
        position: relative;
        padding: 4px 12px;
        border-radius: 100px;
        cursor: pointer;
        display: flex;
        align-items: center;
        transition: background 0.2s, color 0.2s;
        &:hover {
            background: var(--el-color-primary-light-8);
        }
        &.cut {
            background: var(--el-color-primary);
            color: white;
            cursor: default;
        }
    }
}
.hc-search-screening-item + .hc-search-screening-item {
    margin-top: 14px;
}

.hc-c-card-box {
    position: relative;
    background: #E7EEF4;
    border-radius: 10px;
    height: calc(100% - 375px);
    .header-box {
        position: relative;
        padding: 16px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d6d6d6;
        .header {
            position: relative;
            flex: 1;
        }
        .extra {
            position: relative;
        }
    }
    .hc-arrow-icon {
        position: absolute;
        border-radius: 50px;
        left: 48%;
        &.up {
            background: #E7EEF4;
            top: -40px;
        }
        &.down {
            background: #f1f5f8;
            top: 6px;
        }
    }
    .body {
        position: relative;
        height: calc(100% - 140px);
        padding: 16px;
        .hc-c-table-box {
            position: relative;
            height: 100%;
        }
        .hc-f-table-box {
            position: relative;
            height: 300px;
            margin-top: 24px;
            background: #f1f5f8;
            .header-box {
                border-bottom: initial;
                .hc-icon-close {
                    font-size: 18px;
                }
            }
            .hc-file-table-box {
                position: relative;
                height: calc(100% - 55px);
            }
        }
        &.file-table .hc-c-table-box {
            height: calc(100% - 324px);
        }
    }
    .action {
        position: relative;
        padding: 16px;
        border-top: 1px solid #d6d6d6;
        display: flex;
        align-items: center;
    }
    &.all {
        position: absolute;
        top: -94px;
        z-index: 9999;
        left: -24px;
        right: -24px;
        bottom: -24px;
        height: initial;
    }
}
.hc-carry-spot-checks-pdf {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    transition: 0.2s;
    .hc-csc-pdf-btn {
        position: absolute;
        right: 0;
        top: 50%;
        color: white;
        font-size: 25px;
        z-index: 111;
        cursor: pointer;
        width: 36px;
        height: 40px;
        display: flex;
        padding-left: 6px;
        align-items: center;
        justify-content: center;
        border-radius: 150px 0 0 150px;
        background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
        box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
        background-size: 200%;
        transition: background-position 0.5s;
        &:hover {
            background-position: 100% 0;
        }
    }
}
.hc-carry-spot-checks-data {
    position: relative;
    height: 100%;
    width: 480px;
    padding-left: 14px;
    border-left: 1px solid #e9e9e9;
    transition: 0.2s;
    .hc-csc-switch {
        position: relative;
        margin-bottom: 10px;
    }
    .hc-csc-info-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: 244px;
        margin-bottom: 20px;
        .hc-info-text-item {
            position: relative;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            .title {
                font-weight: bold;
            }
            .content {
                flex: 1;
                position: relative;
                color: #101010;
            }
        }
        .hc-info-text-item + .hc-info-text-item {
            margin-top: 8px;
        }
    }
    .hc-csc-data-box {
        position: relative;
        background: #E7EEF4;
        border-radius: 10px;
        padding: 12px;
        height: calc(100% - 400px);
        margin-bottom: 16px;
        .hc-csc-associated-row {
            position: relative;
            text-align: left;
            display: flex;
            align-items: center;
        }
        .hc-table-info-btn {
            position: absolute;
            right: -5px;
            top: -12px;
            color: white;
            font-size: 20px;
            z-index: 111;
            cursor: pointer;
            border-radius: 50px;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(to right, var(--el-color-primary-light-5), var(--el-color-primary), var(--el-color-primary-dark-2));
            box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
            background-size: 200%;
            transition: background-position 0.5s;
            &:hover {
                background-position: 100% 0;
            }
        }
    }
    .hc-csc-action-box {
        position: relative;
        background: white;
        border-radius: 10px;
        padding: 12px;
        height: 70px;
        .header-box {
            position: relative;
            display: flex;
            align-items: center;
            .title {
                flex: 1;
                color: #9A9A9A;
                font-size: 15px;
            }
        }
        .btn-box {
            position: relative;
            text-align: center;
        }
    }
}
.hc-collapse-item-title {
    flex: 1;
    position: relative;
    margin-left: 24px;
    display: flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    .icon {
        margin-right: 10px;
        color: #FFAF2D;
        font-size: 24px;
    }
    .title {
        flex: 1;
        position: relative;
        user-select: none;
        color: #50545E;
        font-size: 16px;
        font-weight: 400;
    }
}
</style>

<style lang="scss">
.hc-query-card-box.hc-card-box.el-card {
    .el-card__header {
        overflow-x: hidden;
    }
    .hc-card-header-box {
        display: block;
        width: 100%;
        .hc-card-header {
            margin: 0 -15px;
            margin-top: 5px;
        }
    }
}
.hc-carry-spot-checks-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;
            .el-card__body {
                padding: 10px;
            }
            .hc-card-main-box {
                display: flex;
            }
        }
    }
}

.hc-csc-action-box .btn-box {
    .el-button + .el-button {
        margin-left: 50px;
    }
}

.hc-node-tree-collapse.el-collapse {
    --el-collapse-header-height: 60px;
    border: 0;
    .el-collapse-item {
        margin: 0 0 16px;
        background-color: #f1f5f8;
        border: 1px solid #E9E9E9;
        border-radius: 4px;
    }
    .el-collapse-item__header {
        background-color: transparent;
        font-weight: 400;
        border-bottom: 0;
        cursor: default;
        font-size: 14px;
    }
    .el-collapse-item.is-active .el-collapse-item__header.is-active {
        background-color: #E7EEF4;
    }
    .el-collapse-item__wrap {
        background-color: transparent;
        border-bottom: 0;
        .el-collapse-item__content {
            position: relative;
            font-size: 14px;
            line-height: initial;
            padding: 24px;
        }
    }
}
  .hover-hand{
      cursor: pointer;
  }
</style>
