<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"  @menuTap="ElTreeMenuClick" :autoExpandKeys="treeAutoExpandKeys"/>
                   <!--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> -->
                 <div class="body" :class="tableFileShow?'file-table':''">
                    <div class="hc-c-table-box">
                        <HcTable ref="tableRef"
                        :column="tableColumn"
                        :datas="tableData"
                        :loading="tableLoading"
                        @row-click="tableRowClick"
                        :ui="hoverHand?'hover-hand':''"
                        >

                        </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">
                               <HcIcon name="close" @click="closetableFile" class="hc-icon-close text-hover" style=" color:rgb(64, 149, 229);"/>
                            </div>
                        </div>
                        <div class="hc-file-table-box">
                            <HcTable ref="tableFileRef"
                            :column="innertableColumn"
                            :datas="intableData"
                            :loading="intableLoading"
                            @row-click="tableFileRowClick"
                            :ui="hoverHand?'hover-hand':''"
                            >
                                <template #action="{row,index}">
                                    <el-button type="primary" size="small" @click.stop="consultFileClick">查阅文件</el-button>
                                </template>
                            </HcTable>
                        </div>
                    </div>
                </div>
                <template #action>
                            <HcPages :pages="searchForm" @change="pageChange"/>
                 </template>
            </HcCard>
        </div>
    <!-- 元数据信息编辑 -->
    <MetaInfo :show="showMeteInfo"   @upshowModal="upshowModal" :fileId="fileId"  @getTableData="getTableData"></MetaInfo>
 

    </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import {useAppStore} from "~src/store";
import HcTree from "~src/components/tree/hc-tree.vue"
import MetaInfo from './components/meta-info.vue'
import projectScanningApi from "~api/other-file/projectScanning";
import {getStoreValue, setStoreValue} from '~src/utils/storage'
import {downloadBlob, getArrValue, deepClone} from "js-fast-way"
import tuningApi from "~api/archiveConfig/tuning.js";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const isCollapse = ref(useAppState.getCollapse)
const hoverHand = ref(true)

//元数据信息弹窗
const showMeteInfo = ref(false)
// upshowModal
const upshowModal = (val) => {
    showMeteInfo.value=val

}

//监听
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: 'fileNumber', name: '档号'},
        {key: 'name', name: '案卷题名', width: 500},
        {key: 'storageTimeValue', name: '保管期限'},
        {key: 'pageN', name: '总页数'},

])
const innertableColumn = ref([
        {key: 'fileNumber', name: '文件编号'},
        {key: 'fileName', name: '文件题名', width: 500},
        {key: 'fileTime', name: '文件日期'},
        {key: 'dutyUser', name: '责任者'},
        {key: 'filePage', name: '页数'},

])

const tableData = ref([])

//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableFileShow.value = false
    tableLoading.value = true
    const {error, code, data} = await tuningApi.pageByArchive({
        ...searchForm.value,
        projectId: projectId.value,
        contractId: contractId.value,
        isArchive: 1
    })
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data?.records)
        searchForm.value.total = data?.total || 0
    } else {
        tableData.value = []
        searchForm.value.total = 0
    }
}

const intableLoading = ref(false)
const intableData=ref([])
//获取卷内文件
const getintableData = async () => {
    intableLoading.value = true
    const {error, code, data} = await tuningApi.getarchiveFilePage({
        nodeIds: searchForm.value.nodeIds,
        archiveId: checkInid.value,
        size:1000,
        current:1
    })
    intableLoading.value = false
    if (!error && code === 200) {
        intableData.value = getArrValue(data['records'])
    } else {
        intableData.value = []

    }
}


//删除
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 tableFileShow = ref(false)
const checkInid = ref('')
const fileId=ref('')
const tableRowClick = ({row}) => {
    tableFileShow.value = true;
    checkInid.value = row.id
    
   
    getintableData()
}
//收起卷内文件
const closetableFile = () => {
    tableFileShow.value = false
}

//卷内文件点击

const tableFileRowClick = ({row}) => {
    console.log(row,'row');
    showMeteInfo.value = true;
    fileId.value=row.id

}



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

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


//获取树的数据
const ElTreeData = 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(getStoreValue('metaExpandKeys') || [])
const nodeElTreeClick = ({node, data, keys, key}) => {
    console.log('点击',data);
    //缓存展开的节点
    setStoreValue('metaExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
    searchForm.value.total = 0
    searchForm.value.current = 1
    searchForm.value.size = 20
    searchForm.value.nodeIds = data.id || '';
    getTableData()
}
//树菜单被点击
const ElTreeMenuClick = async ({key, node, data, keys}) => {
    setStoreValue('metaExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
 
}
</script>

<style lang="scss" scoped>
.hc-card-header-table-title{
 font-size: 1.125rem;
line-height: 1.75rem;
}
.rowbox{
    text-align: center;
}
 .body {
        position: relative;
        // height: calc(100% - 140px);
        height: calc(100% - 0px);
        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;
                display: flex;
                justify-content: space-between;
                height: 60px;
                background-color:var(--el-fill-color-lighter);
                line-height: 60px;
                padding-left: 15px;
                padding-right: 15px;
                .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);
        }
    }
  .hover-hand{
      cursor: pointer;
  }
</style>
