<template>
    <div class="hc-page-layout-box">
        <div class="hc-layout-left-box" :style="'width:' + leftWidth + 'px;'">
            <div class="hc-project-box">
                <div class="hc-project-icon-box">
                    <HcIcon name="stack"/>
                </div>
                <div class="ml-2 project-name-box">
                    <span class="text-xl text-cut project-alias">{{projectInfo['projectAlias']}}</span>
                    <div class="text-xs text-cut project-name">{{projectInfo['name']}}</div>
                </div>
            </div>
            <div class="hc-tree-box"  v-loading="treeLoading" element-loading-text="加载中...">
                <el-scrollbar>
                    <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick"  @nodeLoading="treeNodeLoading"/>
                    <!--ProjectTree :datas="ElTreeData" :autoExpandKeys="TreeAutoExpandKeys" @nodeTap="nodeElTreeClick" :ischeck="false"/-->
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard title="已形成的案卷">
                <!-- <template  #header>
                   <div class="hc-card-header-table-title">
                      已形成的案卷
                  </div>
                </template> -->
                <template  #extra>
                    <HcTooltip keys="archives_rolling_btn_update">
                        <el-button type="primary" hc-btn>
                            <HcIcon name="git-pull-request"/>
                            <span>立即更新立卷</span>
                        </el-button>
                    </HcTooltip>
                </template>

                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"/>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
//import HcTree from "./components/hc-tree.vue"
import HcTree from "~src/components/tree/hc-tree.vue"
import ProjectTree from "./components/ProjectTree.vue"
import projectScanningApi from "~api/other-file/projectScanning";
import {getStoreData, setStoreData} from '~src/utils/storage'
import {downloadBlob, getArrValue, deepClone} from "vue-utils-plus"
//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse)

//监听
watch(() => [
    useAppState.getCollapse
], ([Collapse]) => {
    isCollapse.value = Collapse
})

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

//树加载
const treeLoading = ref(true)
const treeNodeLoading = () => {
    treeLoading.value = false
}

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

//树相关的变量
const primaryKeyId = ref('')

//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr,query}) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

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

//表格数据
const tableRef = ref(null)
const tableColumn = 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: '293',
        key4: '300',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '300',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '300',
        key5: '备注信息',
    }
])

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

}

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

//删除
const delModalClick = () => {

}

//左右拖动，改变树形结构宽度
const leftWidth = ref(382);
const onmousedown = () => {
    const leftNum = isCollapse.value ? 142 : 272
    document.onmousemove = (ve) => {
        let diffVal = ve.clientX - leftNum;
        if(diffVal >= 310 && diffVal <= 900) {
            leftWidth.value = diffVal;
        }
    }
    document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
    }
}

//获取树的数据
const ElTreeData = ref([])
let childtreedata = ref([])//子目录信息
const getClassIfyList = async () => {
    const { error, code, data } = await projectScanningApi.getClassIfyList({
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据
    if (!error && code === 200) {
        ElTreeData.value = getArrValue(data)
    } else {
        ElTreeData.value = []
    }
    console.log(ElTreeData.value,'ElTreeData');
}
//自动展开缓存
const TreeAutoExpandKeys = ref(getStoreData('scanningTreeExpandKeys') || [])

//项目树被点击
const treeNodeInfo = ref({})
const treeDataInfo = ref({})
const nodeIds = ref('')
const isStorageNode = ref(0)
const isBuiltDrawing = ref(0)
const nodeElTreeClick = ({node, data, keys, key}) => {
    console.log('点击',data);
    // treeNodeInfo.value = node
//    formInline.value=data

//   if(data.children){
//        childtreedata.value=data.children
//   }else{
//       childtreedata.value=[data]
//   }


    // //设置变量
    // nodeIds.value = key || ''
    // isStorageNode.value = data['isStorageNode'] || 0
    // isBuiltDrawing.value = data['isBuiltDrawing'] || 0
    // //设置搜索数据
    // searchForm.value.current = 1;
    // searchForm.value.nodeIds = key || ''
    // setTableColumns()
    // getTableData()
    //缓存展开的节点
    setStoreData('scanningTreeExpandKeys', keys)
}
</script>

<style lang="scss" scoped>
.hc-card-header-table-title{
 font-size: 1.125rem;
line-height: 1.75rem;
}

</style>
