<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> -->
                 <div class="body" :class="tableFileShow?'file-table':''">
                    <div class="hc-c-table-box">
                        <HcTable ref="tableRef"
                        :column="tableColumn"
                        :datas="tableData"
                        :loading="tableLoading"
                        isCheck @selection-change="tableSelection"
                        @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="tableData"
                            :loading="tableFileLoading"
                            isCheck
                            @selection-change="tableFileSelection"
                            @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" ></MetaInfo>
      <!--调整排序-->
    <HcDialog :show="sortModal" title="调整排序" widths="980px" isTable isRowFooter @close="sortModalClose">
        <el-alert title="可拖动排序，也可在后面点击图标，切换排序" type="error" :closable="false"/>
        <div class="hc-table-h">
            <HcTable ui="hc-table-row-drop" :column="sortTableColumn" :datas="sortTableData" :loading="sortTableLoading" isRowDrop @row-drop="sortTableRowDrop">
                <template #key2="{row}">
                    <span class="text-link">{{row?.key2}}</span>
                </template>
                <template #action="{index}">
                <span class="text-link text-xl" @click="upSortClick(index)">
                    <HcIcon name="arrow-up" fill/>
                </span>
                    <span class="text-link text-xl ml-2" @click="downSortClick(index)">
                    <HcIcon name="arrow-down" fill/>
                </span>
                </template>
            </HcTable>
        </div>
        <template #leftRowFooter>
            <el-button hc-btn @click="sortModalClose">
                <HcIcon name="close"/>
                <span>取消</span>
            </el-button>
            <el-button type="primary" hc-btn :loading="sortModalLoading" @click="sortModalSave">
                <HcIcon name="check"/>
                <span>确认</span>
            </el-button>
        </template>
        <template #rightRowFooter>
            <HcPages :pages="sortSearchForm" :sizes="[10, 20, 50, 100, 200, 300, 400, 500, 600]" @change="sortPageChange"/>
        </template>
    </HcDialog>

    </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 MetaInfo from './components/meta-info.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)
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:'key1', name: '档号'},
    {key:'key2', name: '案卷题名',width:600},
    {key:'key3', name: '保管期限'},
    {key:'key4', name: '总页数'},

])
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: '293',
        key4: '300',
        key5: '备注信息',
    },
    {
        id: 2,
        key1: 'FJZB-02-123',
        key2: '初步设计外业验收有关文件、工程初步设计图纸、初步设计批复、初步设计审查咨询报告',
        key3: '293',
        key4: '300',
        key5: '备注信息',
    },
    {
        id: 3,
        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 tableFileShow = ref(false)
const tableRowClick = () => {
    tableFileShow.value = true;
}
//收起卷内文件
const closetableFile = () => {
    tableFileShow.value = false
}
//卷内文件点击

const tableFileRowClick = () => {
    showMeteInfo.value = true;

}
//表格排序
const sortModal = ref(false)
//显示
const tableSortClick = () => {
    sortModal.value = true
}

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

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

//表格数据
const sortTableColumn = ref([
    {key:'key1', name: '档号', width: 160},
    {key:'key2', name: '案卷名称'},
    {key:'action', name: '排序', width: 90},
])
const sortTableData = ref([
    {
        id: 1,
        key1: 'xxxx-xxxx-xxx',
        key2: '30 奉建路PPP项目实施方案的批复-市发展改革委（渝发改交〔2018〕1361号）-20220317090413.pdf',
    },
    {
        id: 2,
        key1: 'xxxx-xxxx-222',
        key2: '40 奉建路PPP项目实施方案的批复-市发展改革委（渝发改交〔2018〕1361号）-20220317090413.pdf',
    }
])

const sortTableLoading = ref(false)
const getSortTableData = () => {

}

//拖动完成
const sortTableRowDrop = (rows) => {
    sortTableData.value = rows
}

//向下
const downSortClick = (index) => {
    const indexs = index + 1
    const data = sortTableData.value
    if(indexs !== data.length) {
        const tmp = data.splice(indexs,1);
        sortTableData.value.splice(index,0,tmp[0]);
    } else {
        window?.$message?.warning('已经处于置底，无法下移')
    }
}

//向上
const upSortClick = (index) => {
    const data = sortTableData.value || []
    if(index !== 0) {
        const tmp = data.splice(index - 1,1);
        sortTableData.value.splice(index,0,tmp[0]);
    } else {
        window?.$message?.warning('已经处于置顶，无法上移')
    }
}

//保存
const sortModalLoading = ref(false)
const sortModalSave = () => {
    sortModal.value = false
}

//关闭
const sortModalClose = () => {
    sortModal.value = false
}

//获取树的数据
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);
    setStoreData('scanningTreeExpandKeys', 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>
