<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> -->
                <template #search>
                    <div class="w-40">
                        <el-select v-model="searchForm.storageTime" placeholder="保管期限" clearable>
                            <el-option v-for="item in retentionPeriod" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-40 ml-2">
                        <el-select v-model="searchForm.fileSizeValue" placeholder="文件大小" clearable>
                            <el-option v-for="item in fileSize" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-40 ml-2"  >
                        <el-select v-model="searchForm.isOutOfDate" placeholder="是否到期" clearable>
                            <el-option v-for="item in isExpired" :key="item.value" :label="item['label']" :value="item['value']"/>
                        </el-select>
                    </div>
                    <div class="w-40 ml-2">
                        <el-select v-model="searchForm.filingUnit" placeholder="立卷单位" clearable>
                            <el-option v-for="item in filingUnit" :key="item" :label="item" :value="item"/>
                        </el-select>
                    </div>
                    <div class="w-40 ml-2" v-if="searchForm.isDeleted == 1">
                        <el-select v-model="searchForm.destroyUser" placeholder="销毁操作账户" clearable>
                            <el-option v-for="item in operatingAccount" :key="item.id" :label="item['realName']" :value="item['id']"/>
                        </el-select>
                    </div>
                    <div class="ml-2">
                        <el-button type="primary" @click="searchClick">
                            <HcIcon name="search-2"/>
                            <span>搜索</span>
                        </el-button>
                    </div>
                </template>
                <template  #extra>
                    <div v-if="searchForm.isDeleted == 1" @click="hideHistory" style="cursor: pointer;">
                        <svg xmlns="http://www.w3.org/2000/svg" class="svg-icon-path-icon fill" fill="#4095e5" viewBox="64 64 896 896" width="24" height="24"><defs data-reactroot=""></defs><g><path d="M365.3 518.5l246 178c5.3 3.8 12.7 0 12.7-6.5v-46.9c0-10.2-4.9-19.9-13.2-25.9L465.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5l-246 178a8.05 8.05 0 0 0 0 13z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></g></svg>
                    </div>
                    <div v-else>
                        <HcTooltip keys="archives_appraisal_btn_destory">
                            <el-button type="primary" hc-btn @click="showdialog" :disabled="tableCheckedKeys.length <= 0">
                                <HcIcon name="git-pull-request"/>
                                <span>销毁案卷</span>
                            </el-button>
                        </HcTooltip>
                        <HcTooltip keys="archives_appraisal_btn_records">
                            <el-button hc-btn @click="showHistory">
                                <span>历史销毁记录</span>
                            </el-button>
                        </HcTooltip>
                    </div>
                </template>
                <HcTable ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelection"/>
                <template #action>
                    <HcPages :pages="searchForm" @change="pageChange"/>
                </template>
            </HcCard>
        </div>
        <DestoryDialog :show="showdestorydialog" :length="tableCheckedKeys.length" @upshow="upshow" @comfirmDestory="comfirmDestory" :isLoading="isLoading"></DestoryDialog>
    </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 DestoryDialog from './components/destory-dialog.vue'
import projectScanningApi from "~api/other-file/projectScanning";
import {getStoreValue, setStoreValue} from '~src/utils/storage'
import {downloadBlob, getArrValue, arrToId} from "js-fast-way"
import appraialApi from "~api/archiveConfig/appraisal.js";

//变量
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()
      getFilingUnitListdata()
      getArchiveDestroyUserdata()
})

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

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

//树相关的变量
const primaryKeyId = ref('')
//销毁案件弹窗
const showdestorydialog = ref(false)
const upshow = (val) => {
    showdestorydialog.value=val

}
const isLoading=ref(false)
//确认销毁comfirmDestory
const comfirmDestory = async() => {
    const rows = tableCheckedKeys.value
    if (rows.length > 0) {
        isLoading.value = true
        const ids = arrToId(rows)
        const { error, code, msg } = await appraialApi.batchDestroyArchive({
            nodeId:  nodeId.value,
            ids: ids
        })
        isLoading.value = false
        //处理数据
        if (!error && code === 200) {
            window.$message?.success(msg)
          
        } 
        showdestorydialog.value=false
        getTableData()
    } 
}
//日期时间被选择
const betweenTime = ref(null)
const betweenTimeUpdate = ({arr,query}) => {
    betweenTime.value = arr
    searchForm.value.betweenTime = query
}

//搜索
const searchClick = () => {
    getTableData()
}
//打开弹窗
const showdialog = () => {
    showdestorydialog.value= true;

}
//保管期限
const retentionPeriod = ref([
    {label: '永久', value: '3'},
    {label: '30年', value: '2'},
    {label: '10年', value: '1'}
])

//文件大小
const fileSize = ref([
    {label: '小于80M', value: '小于80M'},
    {label: '小于150M', value: '小于150M'},
    {label: '小于200M', value: '小于200M'},
    {label: '200M-500M', value: '200M-500M'},
    {label: '大于500M', value: '大于500M'},
])
//立卷单位
const filingUnit = ref([
 
])
//是否到期

const isExpired = ref([
    {label: '全部', value: ''},
    {label: '已到期', value: '1'},
    {label: '未到期', value: '0'},

])
//销毁操作账户

const operatingAccount = ref([
    {label: '张三', value: '1'},
    {label: '李四', value: '2'},
    {label: '王五', value: '3'},

])
//分页被点击
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: 600},
    {key:'storageTimeValue', name: '保管期限'},
    {key:'fileSizeValue', name: '文件大小'},

])

const tableData = ref([])
//获取数据
const tableLoading = ref(false)
const getTableData = async () => {
    tableLoading.value = true
    const { error, code, data } = await appraialApi.pageByAuthenticate({
        ...searchForm.value,
        projectId: projectId.value,
        contractId:contractId.value
    })
    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
    }
    tableRef.value?.clearSelection()
}
//获取立卷单位列表getFilingUnitList
const getFilingUnitListdata=async()=>{
    const { error, code, data } = await appraialApi.getFilingUnitList({
        projectId: projectId.value,
    })
    if (!error && code === 200) {
        console.log(data,'data');
        filingUnit.value = getArrValue(data)
     
    } else {
        filingUnit.value = []
     
    }
 
}
//获取档案销毁账户
const getArchiveDestroyUserdata=async()=>{
    const { error, code, data } = await appraialApi.getArchiveDestroyUser()
    if (!error && code === 200) {
        console.log(data,'data');
        operatingAccount.value = getArrValue(data)
     
    } else {
        operatingAccount.value = []
     
    }
 
}
const showHistory=()=>{
    searchForm.value.isDeleted = 1
    getTableData()
}
const hideHistory=()=>{
    searchForm.value.isDeleted = 0
    getTableData()
}
//多选
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(getStoreValue('apprailExpandKeys') || [])

//项目树被点击
const treeNodeInfo = ref({})
const treeDataInfo = ref({})
const nodeId= ref('')
const isStorageNode = ref(0)
const isBuiltDrawing = ref(0)
const nodeElTreeClick = ({node, data, keys, key}) => {
    nodeId.value = data.id || ''
    searchForm.value.nodeId = data.id || ''
    searchForm.value.current = 1;
    getTableData()

    //缓存展开的节点
    setStoreValue('apprailExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//树菜单被点击
const ElTreeMenuClick = async ({key, node, data, keys}) => {
    setStoreValue('apprailExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
 
}
</script>

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