<template>
        <HcCard actionSize="lg" scrollbar>
            <template #extra>
                <el-button type="primary" @click="editClick"  size="large" v-if="!isShowIcon&&!isedit">
                            <span>编辑组织机构</span>
                 </el-button>
              
                 <el-button type="primary" @click="goback"  size="large" v-if="!isShowIcon&&isedit">
                            <span>返回上一级</span>
                 </el-button>
            </template>
         
            <div class="content-box" v-if="isShowIcon">
                <HcIcon name="add-box" class="add_icon" @click="addClick"/>
            </div>
            <div class="content-box1" v-if="!isShowIcon&&!isedit">
              <div style="height: 400px;text-align: center;">
                <vue3-tree-org
                    :data="testdata"
                    :horizontal="horizontal"
                    :collapsable="collapsable"
                    :label-style="style"
                    :node-draggable="true"
                    :scalable="false"
                    :only-one-node="onlyOneNode"
                    :default-expand-level="4"
                    :clone-node-drag="cloneNodeDrag"
                    @on-contextmenu="onMenus"
                    @on-node-click="onNodeClick"
                >
                    <!-- 自定义节点内容 -->
                    <template v-slot="{node}">
                        <div class="tree-org-node__text node-label">
                            <!-- <div class="custom-content">自定义内容</div> -->
                            <div>{{node.label}}</div>
                        </div>
                    </template>
                    <!-- 自定义展开按钮 -->
                    <template v-slot:expand="{node}">
                        <div>{{node.children.length}}</div>
                    </template>
                </vue3-tree-org>
            </div>
            </div>
            <div  v-if="!isShowIcon&&isedit">
            <div class="tree-box blue">
                <el-scrollbar class="h-100p">
                    <el-tree
                    class="tree-line1"
                    :data="dataSource"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    >
                    <template #default="{ node, data }">
                        <span class="custom-tree-node">
                                <span  :class="node.level === 1?'level-name':''" class="label">{{ node.label }}</span>
                            <span>
                                <HcIcon name="add-box" @click="addClick" style=" color: rgb(84, 188, 189);" v-if="data.children"/>
                                <HcIcon name="edit" @click="addClick" style="margin-left: 8px;color: rgb(84, 188, 189);" />
                                <HcIcon name="delete-bin" @click="delClick" style="margin-left: 8px;color: orange;" />
                                <HcIcon name="vip-crown-2" @click="authorityClick" style="margin-left: 8px;color: purple;"/>
                            </span>
                        </span>
                  
                    </template>
                    </el-tree>
                </el-scrollbar>
        </div>
            </div>
          
            <HcDialog :show="testModal" title="新增机构信息" @close="testModalClose" widths="80rem">
                <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left"
                             size="large">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="上级组织节点名称">
                                        <el-select v-model="formModel.top" class="m-2" placeholder="请选择" size="large" style="width:100%">
                                            <el-option
                                            v-for="item in topMenuoptions"
                                            :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-select v-model="formModel.top" class="m-2" placeholder="请选择" size="large" style="width:100%">
                                            <el-option
                                            v-for="item in topMenuoptions"
                                            :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="formModel.deptId"  placeholder=""/>
                                </el-form-item>
                            </el-col>
                      
                        </el-row>
                 </el-form>
            </HcDialog>
            <HcDialog :show="authorityModal" title="权限配置" @close="authorityModalClose" widths="80rem">
                <el-tree
                :props="props"
                :load="loadNode"
                lazy
                show-checkbox
                @check-change="handleCheckChange"
            />
            </HcDialog>
        </HcCard>
    
</template>

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

const isShowIcon=ref(false)
const isedit=ref(false)
const editClick=()=>{
    isedit.value=true
}
const addClick=()=>{
    testModal.value = true
}
const testModal = ref(false)

//弹窗关闭
const testModalClose = () => {
    console.log('弹窗关闭')
    testModal.value = false
}
const formModel=ref({})
const formRules=ref({})
const topMenuoptions=ref([])
const dataSource = ref([
  {
    id: 1,
    label: '技术部',
    children: [
      {
        id: 4,
        label: '研发经理',
        children: [
          {
            id: 9,
            label: '产品经理',
          },
          {
            id: 10,
            label: 'java技术',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '人事部',
    children: [
      {
        id: 5,
        label: '人事管理',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
])

const delClick = (node, data) => {
    console.log(node,'node');
    window?.$messageBox?.alert('您确定要注销[xxx] 的机构信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '注销提醒', {
        showCancelButton: true,
        confirmButtonText: '确认注销',
        cancelButtonText: '取消',
        type: 'warning',
        callback: (action) => {
            if (action === 'confirm') {
                console.log(11111);
            }
        }
    })
}
const authorityModal=ref(false)
const authorityClick=()=>{
    authorityModal.value=true
}
const authorityModalClose = () => {
    console.log('弹窗关闭')
    authorityModal.value = false
}
const props = {
  label: 'name',
  children: 'zones',
}
const goback=()=>{
    isedit.value=false
}
const handleCheckChange = (
  data,
  checked,
  indeterminate
) => {
  console.log(data, checked, indeterminate)
}

const loadNode = (node, resolve) => {
  if (node.level === 0) {
    return resolve([{ name: 'region' }])
  }
  if (node.level > 1) return resolve([])

  setTimeout(() => {
    const data = [
      {
        name: 'leaf',
        leaf: true,
      },
      {
        name: 'zone',
      },
    ]

    resolve(data)
  }, 500)
}
//组织架构显示信息

  const testdata=ref({
                "id":1,"label":"xxx科技有限公司",
                "children":[
                    {
                        "id":2,"pid":1,"label":"产品研发部",
                        "style":{"color":"#fff","background":"#108ffe"},
                        "children":[
                            {"id":6,"pid":2,"label":"禁止编辑节点","disabled":true},
                            {"id":8,"pid":2,"label":"禁止拖拽节点","noDragging":true},
                            {"id":10,"pid":2,"label":"测试"}
                        ]
                    },
                    {
                        "id":3,"pid":1,"label":"客服部",
                        "children":[
                            {"id":11,"pid":3,"label":"客服一部"},
                            {"id":12,"pid":3,"label":"客服二部"}
                        ]
                    },
                    {"id":4,"pid":1,"label":"业务部"}
                ]
            })
  const horizontal=ref(false)
  const collapsable=ref(true)
  const onlyOneNode=ref(true)
  const cloneNodeDrag=ref(true)
  const expandAll=ref(true)
  const style=ref({background: "#fff",color: "#5e6d82",})
  const onMenus=({ node, command })=>{
    console.log(node, command);
  }
  const onNodeClick=(e, data)=>{
   
  }
  const expandChange=()=>{
    
  }
</script>

<style lang="scss" scoped>
// 树的线样式
.tree-line1 {
    :deep(.el-tree-node) {
        position: relative;
        padding-left: 12px; // 缩进量
        width: 100%;
    }
    :deep(.el-tree-node__children) {
        padding-left: 12px; // 缩进量
    }
    // 竖线
    :deep(.el-tree-node::before) {
        content:"";
        height: 100%;
        width: 1px;
        position: absolute;
        left: 1px;
        top: 0px;
        border-width: 1px;
        border-left: 2px dashed var(--el-color-primary);
    }
    // 当前层最后⼀个节点的竖线⾼度固定
    :deep(.el-tree-node:last-child::before){
        height: 15px; // 可以⾃⼰调节到合适数值
    }
    // 横线
    :deep(.el-tree-node::after) {
        content:"";
        width: 25px;
        height: 20px;
        position: absolute;
        left: 2px;
        top: 12px;
        border-width: 1px;
        border-top: 2px dashed var(--el-color-primary);
    }
    // 去掉最顶层的虚线，放最下⾯样式才不会被上⾯的覆盖了
    & > :deep(.el-tree-node::after) {
        border-top: none !important;
        border-top: 0 !important;
    }
    & > :deep(.el-tree-node::before) {
        border-left: none;
    }
    // 展开关闭的icon
    :deep(.el-tree-node__expand-icon) {
        font-size: 16px;
        &.is-leaf {
            color: transparent;
            font-size: 0;
           
           
           
           
        }
    }
    :deep(.el-tree__empty-block) {
      min-width: 300px;
    }
}

</style>

<style lang="scss">
.content-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 386px);
    text-align: center;
    width: 100%;
    color: rgb(84, 188, 189);
}
.content-box1{
  text-align: center;
}
.add_icon{
    font-size: 8rem;
    cursor: pointer;
    
}
.h-100p{height: 100%;}
// 树样式
.tree-box .el-tree-node{
    font-size: 18px;
}
.tree-box .el-tree-node .data-custom-tree-node .level-name{  
    font-size: 24px;
}


</style>
