<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">
                <el-scrollbar>
                     <HcTree :projectId="projectId" :contractId="contractId" @nodeTap="nodeElTreeClick" :menus="ElTreeMenu"  @menuTap="ElTreeMenuClick" style="width:100%"/>
                </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="left">
                        <el-row  :gutter="20">
                        <el-col :span="12">
                                <el-form-item label="档号前缀">
                                    <el-input v-model="formInline.title" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                        <el-col :span="12">
                                <el-form-item label="保管期限">
                                    <el-select v-model="formInline.title" 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.user" 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.size" 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.user" 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.user" placeholder="请输入" />
                                </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <el-alert title="提示：设置基础信息，系统可统一内置到组卷信息里面去" type="error" :closable="false"  />
                <div style="margin-top:30px">
                    <div class="flex-box" style="justify-content: space-between;">
                        <div>子目录信息编辑</div>
                        <div>
                            <HcTooltip keys="archives_subdirectory_btn_add">
                                <el-button type="primary" hc-btn @click="showSubModel('新增')">
                                    <span>新增</span>
                                </el-button>
                            </HcTooltip>
                            <HcTooltip keys="archives_subdirectory_btn_edit">
                                <el-button  hc-btn @click="showSubModel('编辑')">
                                    <span>编辑</span>
                                </el-button>
                            </HcTooltip>
                            <HcTooltip keys="archives_subdirectory_btn_del">
                                <el-button  hc-btn @click="delModalClick">
                                    <span>删除</span>
                                </el-button>
                            </HcTooltip>
                        </div>
                    </div>
                    <div>
                        <el-collapse class="my-collapse">
                            <el-collapse-item v-for="(item,index) in subList" :key="index" :name="index">
                                <template #title>
                                    <el-checkbox v-model="item.checked" size="large" style="margin-left:10px" @click.stop  @change="(value)=>listChange(value,index)"/>
                                    <span style="margin-left:10px">{{item.title}}</span>
                                </template>
                                <div class="coll-item" v-for="(item2,index2) in item.children" :key="index2">
                                    <el-checkbox v-model="item2.checked" size="large" style="margin-left:10px" @click.stop @change="(value)=>itemChange(value,index)"/>
                                    <span style="margin-left:10px">{{item2.title}}</span>
                                </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>
                </div>
            </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 {getStoreData, setStoreData} from '~src/utils/storage'
import {downloadBlob, getArrValue, deepClone} from "vue-utils-plus"
import {HcIsButton} from "~src/plugins/IsButtons";
//变量
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)
})


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: '1'},
    {label: '40mm', value: '2'},
    {label: '50mm', value: '3'}
])
const onSubmit = () => {
  console.log('submit!')
}//新增
const addModalClick = (type) => {
//        addArray.length=0
//        addform={title:''}
//   if(type){
//       showaddModaltype.value='编辑'
//       if(checkArray.length<=1){
//        addform=checkArray[0]
//       }else{
//         for (let i = 1; i < checkArray.length; i++) {
//               addform=checkArray[0]
//            addArray.push(checkArray[i])
//         }
//       }
//   }
//    showaddModal.value = true;


}
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(getStoreData('scanningTreeExpandKeys') || [])

//项目树被点击
const nodeElTreeClick = ({node, data, keys, key}) => {
    console.log('点击',data);
    // treeNodeInfo.value = node
   formInline.value=data
  
    //缓存展开的节点
    setStoreData('scanningTreeExpandKeys', 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})
}
//处理菜单被点击数据
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;
     }
}

//显示新增编辑弹窗
const showSubModel = (type)=>{
    showaddModaltype.value=type
    showaddModal.value = true;
}

const subList = ref([
        {
            'title':'勘察文件、往来文件、会议纪要',
            'children':[
                {"title":'TJ01施工设计图'}
            ],
        },
        {
            'title':'初步设计文件（图纸等）、外业验收会议纪要、初步设计专家审查意见及会议纪要、咨询审查报告、初步设计申请和批复文件 ',
            'children':[],
        },
        {
            'title':'施工图设计批复、施工图设计审查咨询报告、施工图设计图纸、补充图纸、专家审查意见及会议纪要',
            'children':[],
        },
    ])//子目录列表

const getSubList = ()=>{
    
}

const listChange = (value,index)=>{
    //console.log(value)
    subList.value[index].children.forEach((item)=>{
        item.checked = value
    })
}

const itemChange = (value,index)=>{
    //console.log(value)
    if(value){
        let check = true;
        const array = subList.value[index].children;
        for (let i = 0; i < array.length; i++) {
            if(!array[i].checked){
                check = false;
                return;
            }
        }
        if(check){
            subList.value[index].checked = true;
        }
    }else{
        subList.value[index].checked = false;
    }
}

</script>

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

.flex-box{
    display: flex;
}

.my-collapse :deep(.el-collapse-item){
    background-color: #f1f5f8 !important
}
  
.my-collapse :deep(.el-collapse-item__header){
    background-color: #f1f5f8 !important
}
  
.my-collapse :deep(.el-collapse-item__wrap){
    background-color: #f1f5f8 !important
}

.coll-item{
    background-color: #d9d9d9;
}
  
</style>
