<template>
    <el-tree class="file-tree" :data="data" :props="defaultProps" @node-click="handleNodeClick" :default-expand-all="true">
         <template #default="{ node, data }">
           <div class="custom_tree_node">
             <span
               class="label-text "
               :class="{'is_active': selectData && selectData.dept === data.dept}"
               :title="node.label"
               >{{ node.label }}
             </span>
             <span v-if="data.dept === 1" class="tree-action-box first_node" @click.stop="showAction($event, data,node)">
               <bg-icon
                 class="tree-more"
                 icon="#bg-ic-s-more"
               ></bg-icon>
             </span>
             <span v-else class="tree-action-box" :class="{'position_sticky': isSticky(data.label) }" @click.stop="showAction($event, data,node)">
               <bg-icon
                 class="tree-more"
                 icon="#bg-ic-s-more"
               ></bg-icon>
             </span>
           </div>
         </template>
    </el-tree>
    <Teleport to="body">
       <div
         class="tree-action"
         v-show="actionFlag"
         :style="{ top: acTop, left: acLeft }"
       >
         <div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'directory',target: null})">新建目录</div>
         <div v-if="selectData && selectData.dept === 1" class="action" @click="treeCreate({type: 'org',target: null})" >新建组织</div>

         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'local'})">新建本级目录</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'create',target: 'child'})">新建下级目录</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'child'})">新建下级组织</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'edit',target: 'local'})">编辑目录</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'delete',target: 'local'})">删除</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvup',target: 'local'})">上移</div>
         <div v-if="selectData && selectData.children" class="action" @click="treeCreate({type: 'directory',action: 'mvdown',target: 'local'})">下移</div>

         <div v-if="selectData && !selectData.children &&  selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'create',target: 'local'})">新建本级组织</div>
         <div v-if="selectData && !selectData.children &&  selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'edit',target: 'local'})">编辑组织</div>
         <div v-if="selectData && !selectData.children &&  selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'delete',target: 'local'})">删除</div>
         <div v-if="selectData && !selectData.children &&  selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvup',target: 'local'})">上移</div>
         <div v-if="selectData && !selectData.children &&  selectData.dept !== 1" class="action" @click="treeCreate({type: 'org',action: 'mvdown',target: 'local'})">下移</div>
       </div>
    </Teleport>
</template>

<script setup>
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount, onBeforeUnmount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';

  const data = [
    {
      label: '平台用户组织',
      dept: 1
    },
    {
      label: '湖北省efadsfasfdgsafgfdtrgsdfsfsd555',
      dept: 4,
      children: [
        {
          label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
          dept: 666,
          children: [
            {
              label: '公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅公安厅',
              dept: 2
            },
            {
              label: 'fddfsgdfgdfgdsfsffsdfsdfsdfwefadsgs',
               dept: 3
            },
            {
              label: '咯技术的卡洛斯达拉斯达拉斯昆德拉老师',
              dept: 5,
            },
          ],
        },
        {
          label: '荆州市',
          dept: 6,
          children: [
            {
              label: '公安局',
              dept: 7,
            },
            {
              label: '应急管理局',
              dept: 8,
            },
          ],
        }
      ],
    },
    {
      label: '四川省',
      dept: 9,
      children: [
        {
          label: '成都市',
          dept: 10,
          children: [
            {
              label: '天府新区',
              dept: 11,
            },
          ],
        },
      ],
    },
    {
      label: '比格大数据',
      dept: 12,
      children: [
        {
          label: '武汉研发中心',
          dept: 13,
          children: [
            {
              label: '研发部',
              dept: 14,
            },
          ],
        },
        {
          label: '西南大区',
          dept: 15,
          children: [
            {
              label: '事业部',
              dept: 16,
            },
            {
              label: '事业部',
              dept: 17,
            },
            {
              label: '事业部',
              dept: 18,
            },
            {
              label: '事业部',
              dept: 19,
            },
            {
              label: '事业部',
              dept: 20,
            },
            {
              label: '事业部',
              dept: 21,
            },
            {
              label: '事业部',
              dept: 22,
            },
          ],
        },
      ],
    },
  ]

  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  const acTop = ref(0);
  const acLeft = ref(0);
  const actionFlag = ref(false)
  const selectData = ref(null)
  const selectDataParent = ref(null) 
  const showAction = (e, data,node) => {
    const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
    acTop.value = rect.y - 17 + "px";
    acLeft.value = rect.x + 35 + "px";
    actionFlag.value = true;
    selectData.value = data;
    selectDataParent.value = node.parent.data.label ? node.parent.data : null;
  };
  const isSticky = (data) => {

    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    context.font = '14px MicrosoftYaHei';
    const { width } = context.measureText(data);
    return width > 255 ? true : false;
  }

  const closeAction = ()=>{
    actionFlag.value = false;
  }
  

  const emit = defineEmits(['action'])
  const handleNodeClick = (node,nodeAttr,treeNode,event) => {
    selectData.value = node;
    emit('select',{node,nodeAttr,treeNode,event});
    //只读则无操作事件
      closeAction();
  }

  const treeCreate = (params) => {
    emit('create',{type: params.type,action: params.action,data: params.target === 'local'? selectDataParent : selectData});
  }
  
  onBeforeMount(()=>{
    //只读则无操作事件
      window.addEventListener("click", closeAction);
      window.addEventListener("scroll", closeAction,true);
  })
  
  onBeforeUnmount(()=>{
    //只读则无操作事件
      window.removeEventListener('click', closeAction);
      window.removeEventListener('scroll', closeAction);
  })

</script>

<style scoped>
.tree-action-box {
    display: none;  
    position: absolute;
    right: -5px;
    top: 0px;
    width: 44px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    background-color: #f2f3f7;
    box-shadow: -3px 0px 8px -3px 
		rgba(0, 7, 101, 0.15);
}
.position_sticky {
  position: sticky;
  position: -webkit-sticky;
}
.tree-more {
  font-size: 12px;
  color: #3759be;
}

.file-tree :deep() .el-tree-node__content:hover .tree-action-box {
  display: inline-block;
}
.file-tree :deep() .el-tree-node__content .first_node {
  display: inline-block;
}
.file-tree :deep() .el-tree-node > .el-tree-node__children {
  overflow: visible;
}
.file-tree :deep() .el-tree-node__content {
  position: relative;
}
.action-box:hover .tree-action {
  display: block;
}
.label-text {
  font-size: 14px;
	color: #404a62;
}
.tree-action-box:hover + .label-text {
  padding: 8px 0;
  background-color: var(--el-tree-node-hover-bg-color);
}
.label-text:hover {
  padding: 8px 0;
  background-color: var(--el-tree-node-hover-bg-color);
}
.is_active {
  padding: 8px 0;
  background-color: var(--el-tree-node-hover-bg-color);
}

.custom_tree_node {
  width: 100%;
  font-size: 14px;
  color: #202531;
  padding-right: 16px;
}
.text_clip {
      width: 100%;
    display: inline-block;
}

.tree-action .action {
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding-left: 16px;
  font-size: 14px;
  color: #202531;
  cursor: pointer;
}
.tree-action :deep().el-upload {
  width: 100%;
}
.tree-action .action:hover {
  background-color: #eff2fa;
  color: #3759be;
}

.tree-action .disable{
  cursor: not-allowed;
  color: #616f94;
}
.tree-action .disable:hover{
  background-color: #fff;
  color: #616f94;
}

.tree-action {
  /* display: none; */
  width: 144px;
  background-color: #ffffff;
  box-shadow: 0px 1px 4px 0px rgba(0, 7, 101, 0.15);
  padding: 4px 0;
  border-radius: 4px;
  position: fixed;
  z-index: 9;
}

</style>