<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': treeSelected === data.dept}"
               :title="node.label"
               >{{ node.label }}
             </span>
             <span 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 class="action" >新建本级目录</div>
         <div class="action" >新建下级目录</div>
         <div class="action" >新建本级组织</div>
         <div class="action" >新建下级组织</div>
         <div class="action" >编辑目录</div>
         <div class="action" >删除</div>
         <div class="action" >上移</div>
         <div class="action" >下移</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 treeSelected = ref(null);
  

  const data = [
    {
      label: '平台用户组织',
      dept: 1
    },
    {
      label: '湖北省efadsfasfdgsafgfdtrgsdfsfsd555',
      dept: 4,
      children: [
        {
          label: '武汉市啊实打实大苏打大阿斯顿发士大夫地',
          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 showAction = (e, data,node) => {
    const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
    console.log(rect, data,node);
    acTop.value = rect.y - 17 + "px";
    acLeft.value = rect.x + 35 + "px";
    actionFlag.value = true;
  };
  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 nodeClick = (node,nodeAttr,treeNode,event)=>{
    
//   }
  const emit = defineEmits(['action'])
  const handleNodeClick = (node,nodeAttr,treeNode,event) => {
    treeSelected.value = data.dept
    console.log(treeSelected.value)
    emit('select',{node,nodeAttr,treeNode,event})
    //只读则无操作事件
      closeAction()
  }
  
  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 > .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>