<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" :autoExpandKeys="treeAutoExpandKeys"/>
                </el-scrollbar>
            </div>
            <!--左右拖动-->
            <div class="horizontal-drag-line" @mousedown="onmousedown"/>
        </div>
        <div class="hc-page-content-box">
            <HcCard title="当前目录信息编辑">
                <template #extra>
                    <HcTooltip keys="archives_bookmark_btn_add">
                        <el-button type="primary" hc-btn @click="addModalClick(false)">
                            <span>保存设置</span>
                        </el-button>
                    </HcTooltip>
                </template>
                <el-form ref="formUserRef"  :model="formInline"  size="large" label-position="top">
                        <el-row  :gutter="20">
                        <el-col :span="12">
                                <el-form-item label="档号前缀">
                                    <el-input v-model="formInline.value.fileNumberPrefix" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                        <el-col :span="12">
                                <el-form-item label="保管期限">
                                    <el-select v-model="formInline.value.storageTime" placeholder="请选择" clearable style="width:100%">
                                        <el-option v-for="item in retentionPeriod" :key="item.value" :label="item['label']" :value="item['value']"/>
                                    </el-select>
                                </el-form-item>
                        </el-col>

                    </el-row>

                    <el-row  :gutter="20">
                        <el-col :span="12">
                                <el-form-item label="目录名称">
                                    <el-input v-model="formInline.value.title" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                        <el-col :span="12">
                                <el-form-item label="立卷人">
                                    <el-input v-model="formInline.value.rollor" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  :gutter="20">
                        <el-col :span="12">
                                <el-form-item label="卷盒规格">
                                    <el-select v-model="formInline.value.specification" placeholder="请选择" clearable style="width:100%">
                                        <el-option v-for="item in coilsize" :key="item.value" :label="item['label']" :value="item['value']"/>
                                    </el-select>
                                </el-form-item>
                        </el-col>
                        <el-col :span="12">
                                <el-form-item label="审核人">
                                    <el-input v-model="formInline.value.reviewer" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row  :gutter="20">
                        <el-col :span="12">
                                <el-form-item label="案卷后缀">
                                    <el-input v-model="formInline.value.archiveNameSuffix" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <template #action>
                    <el-alert title="提示：设置基础信息，系统可统一内置到组卷信息里面去" type="error" :closable="false"  />
                </template>
            </HcCard>
        </div>
    <!-- 新增子目录文件夹 -->
        <el-dialog v-model="showaddModal" :title="showaddModaltype+'子目录文件夹'" width="50rem" class="hc-modal-border" draggable destroy-on-close @closed="cancelClick">
           <el-form :model="addform" label-width="150px" style="flex-wrap: nowrap;">
            <el-form-item label="文件目录名称：">
                <div class="el-form-item__content">
                     <el-input v-model="addform.title" />
                     <!-- <i class="ri-add-circle-line mleft" @click="addinputItem"></i>
                      <i class="ri-delete-bin-line mleft"  @click="delinputItem(index,item)"></i> -->
                </div>
            </el-form-item>
             <el-form-item label="文件目录名称："  v-for="(item,index) in addArray" :key="index" >
                <div class="el-form-item__content" v-if="addArray.length>0">
                     <el-input v-model="item.title" /> <i class="ri-add-circle-line mleft" @click="addinputItem"></i>
                     <i class="ri-delete-bin-line mleft"  @click="delinputItem(index,item)"></i>
                </div>
            </el-form-item>
           </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button size="large" @click="cancelClick">
                        <HcIcon name="close"/>
                        <span>取消</span>
                    </el-button>
                    <el-button type="primary" hc-btn  @click="confirmClick">
                        <HcIcon name="check"/>
                        <span>确认</span>
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {ref, watch, onMounted,reactive } from "vue";
import {useAppStore} from "~src/store";

// import HcTree from "./components/hc-tree.vue"
import HcTree from "~src/components/tree/hc-tree.vue"
import projectScanningApi from "~api/other-file/projectScanning";
import { getArchiveTreeLazyTree } from '~api/other';
import {getStoreValue, setStoreValue} from '~src/utils/storage'
import {downloadBlob, getArrValue, deepClone} from "js-fast-way"
import {HcIsButton} from "~src/plugins/IsButtons";

import {archiveTreeUpdate} from "~api/other";

//变量
const useAppState = useAppStore()
const projectId = ref(useAppState.getProjectId);
const contractId = ref(useAppState.getContractId);
const projectInfo = ref(useAppState.getProjectInfo);
const menusData=ref([])
const isCollapse = ref(useAppState.getCollapse);
let parentId=ref('')
const showaddModal = ref(false)
const showaddModaltype = ref('新增')
let addform = reactive({title: ''})
const addArray = reactive([])
let checkArray = reactive([])
import {delMessage, rowsToId, rowsToIdNumArr} from "~uti/tools";

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

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

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

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

const coilsize = ref([
    {label: '30mm', value: '30'},
    {label: '40mm', value: '40'},
    {label: '50mm', value: '50'}
])
const onSubmit = () => {
  console.log('submit!')
}//新增

const addModalClick = async(type) => {
    if(!formInline.value.id){
        window.$message?.warning('请先点选左侧要修改信息的树节点')
        return;
    }
    const {code } = await archiveTreeUpdate(formInline.value)
    //console.log(res);
    if (code == 200) {
        window.$message?.success('修改成功')
    }

}
const addinputItem = () => {
    addArray.push({title:'' });
}

const delinputItem = (item,index) => {
  addArray.splice(index,1)
}
//确认

const confirmClick = () => {
   showaddModal.value = false
}
const cancelClick = () => {
   showaddModal.value = false
}
//删除
const delModalClick = () => {
    delMessage(() => {

    })
}
//树相关的变量
const primaryKeyId = ref('')
//子节点树
const nodeItemInfo = ref({})

//左右拖动，改变树形结构宽度
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 treeAutoExpandKeys = ref(getStoreValue('bookExpandKeys') || [])
//项目树被点击
const nodeElTreeClick = ({node, data, keys, key}) => {
    console.log('点击',data);
    // treeNodeInfo.value = node
   formInline.value=data

   setStoreValue('bookExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//设置树菜单数据
const ElTreeMenu = ref([])
const TreeMark = ref(false)
const setElTreeMenu = (contractType) => {
    let newArr = [];
    newArr=[

        {icon: 'add-circle', label: '新增', key: "add"},
        {icon: 'draft', label: '编辑', key: "edit"},
        {icon: 'delete-bin', label: '删除', key: "del"},
    ]
    ElTreeMenu.value = newArr

}
//树菜单被点击
const ElTreeMenuClick = async ({key,node,data}) => {
    // nodeItemInfo.value = node
    // nodeDataInfo.value = data
    setTreeMenuDataClick({key,node,data})
    setStoreValue('bookExpandKeys', keys)
    treeAutoExpandKeys.value = keys || []
}
//处理菜单被点击数据
const setTreeMenuDataClick = ({key,node,data}) => {
     if (key === 'add'){
        addArray.length=0
        addform={title:''}
         showaddModal.value = true;
     }else if(key === 'del'){
         delMessage(() => {

    })
     }else{
         addform=data
           showaddModaltype.value='编辑'
            showaddModal.value = true;
     }
}
</script>

<style lang="scss" scoped>
.el-form-item__content{
    flex-wrap: nowrap;
}
.mleft{
    margin-left: 10px;
    font-size: 1.25rem;
}

</style>
