<template>
    <HcCard >
        <div>
            <el-button type="primary" @click="oprensearchbox"  v-if="!searchboxshow" style="float:right">
                                <HcIcon name="archive-drawer"/>
                            <span>展开搜索栏</span>
            </el-button>
            <el-button type="primary" @click="oprensearchbox"  v-else style="float:right">
                                    <HcIcon name="archive-drawer"/>
                                <span>收起搜索栏</span>
            </el-button>
            <el-button type="primary" style="float:right;margin-right: 5px">
                                    <HcIcon name="archive-drawer"/>
                                <span>下载</span>
            </el-button>
        </div>


        <!-- <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"  class="tablebox" /> -->
          <HcTable1 ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"  @row-click="tableRowClick">
                    <template #table-expand-header>
                        <HcCard>
                                <template #header>
                                    <div class="rowbox">
                                <h3>卷内文件</h3>
                            </div>
                        </template>

                                <HcTable ref="tableRef" :column="innertableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection" @row-click="tableRowClick">

                                </HcTable>
                        </HcCard>
                    </template>
             </HcTable1>

        <template #action>
         <div style="    display: flex;align-items: center;">
               <!-- <el-button type="primary" @click="oprensearchbox"  v-if="!searchboxshow">
                                <HcIcon name="archive-drawer"/>
                            <span>展开搜索栏</span>
                </el-button>
                 <el-button type="primary" @click="oprensearchbox"  v-else>
                                <HcIcon name="archive-drawer"/>
                            <span>收起搜索栏</span>
            </el-button> -->
             <HcPages :pages="searchForm" @change="pageChange"/>
         </div>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, nextTick, watch, onMounted} from "vue";
import {getArrValue} from "js-fast-way"

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    treeData: {
        type: Object,
        default: () => ({})
    },
    searchboxshow:{
        type:Boolean
    }
})

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const nodeData = ref(props.treeData);

//监听
watch(() => [
    props.treeData
], ([treeData]) => {
    nodeData.value = treeData;
})

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

})

//tab数据和相关处理
const tabKey = ref('tab1')
const tabData = ref([
    {key:'tab1',  name: '全部汇总'},
    {key:'tab2',  name: '历史验收报告'},
    {key:'tab3', 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: 200},
    {key:'key2', name: '案卷题名'},
    {key:'key3', name: '保管期限', width: 140},
    {key:'key4', name: '总页数', width: 140},
])
const innertableColumn = ref([
    {key:'key1', name: '文件编号'},
    {key:'key2', name: '题名',width:600},
    {key:'key3', name: '责任者'},
    {key:'key4', name: '页数'},

])
const tableData = ref([
    {
        id: 1,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
     {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
     {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
     {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
     {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '永久',
        key4: '293',
    },
])

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

}
//搜索栏
const oprensearchbox = (item) => {
    // searchboxshow.value =  true;
     emits('upsearchboxshow')
}
const emits = defineEmits(['upsearchboxshow'])
</script>

<style lang="scss" scoped>
.tablebox{
    margin-top: 10px;
}
</style>
