<template>
  <div class="page_container">
    <div class="bg-breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> 开发管理 </el-breadcrumb-item>
        <el-breadcrumb-item > 菜单管理 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="flex_row">
      <div class="flex_left">
           <div class="tree_content">
             <div class="search"> 
               <el-input
                  v-model="search"
                  placeholder="请输入内容"
                  :prefix-icon="Search"
                />
             </div>
             <div class="tree">
              <el-tree 
                :data="data" 
                :props="defaultProps" 
                @node-click="handleNodeClick" 
                :default-expand-all="true" 
                :highlight-current="true"
                node-key="menu_id"
                ref="menuTree"
              >
                <template #default="{ node, data }">
                  <div class="custom-tree-node" pointer-events="none">
                    
                    <span
                      class="label-text text_clip"
                      :title="data.menu_name"
                      >{{ data.menu_name }}</span
                    >
                  </div>
                  <span class="tree-action-box">
                    <bg-icon
                      @click.stop="showAction($event, data,node)"
                      class="tree-more"
                      icon="#bg-ic-s-more"
                    ></bg-icon>
                  </span>
                </template>
               </el-tree >
               <Teleport to="body">
                <div
                  class="tree-action"
                  ref="treeAction"
                  v-show="actionFlag"
                  :style="{ top: acTop, left: acLeft,bottom:acBottom }"
                >
                  <div class="action" @click="fileAction(1,selectData,selectParentData)">
                    新建本级
                  </div>
                  <div class="action" @click="fileAction(2,selectData,selectParentData)">
                    新建下级
                  </div>
                  <div class="action" @click="fileAction(3,selectData,selectParentData)">
                    删除
                  </div>
                  <div class="action" :class="{'disable':moveIndex==0}" @click="fileAction(4,selectData,selectParentData,moveIndex==0)">
                    上移
                  </div>
                  <div class="action" :class="{'disable': !selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1}" @click="fileAction(5,selectData,selectParentData,!selectParentData ? moveIndex == data.length - 1 : moveIndex==selectParentData.Child.length-1)" >
                    下移
                  </div>
                </div>
              </Teleport>
             </div>
           </div>
      </div>
      <div class="flex_right">
        <div class="main_container">

        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, nextTick, computed, onBeforeMount, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus'
import axios from '../../../../request/http.js'
const router = useRouter();

const menuTree = ref(null)
const treeAction = ref(null)

const acTop = ref('');
const acLeft = ref('');
const acBottom = ref('');
const actionFlag = ref(false)

const state = reactive({
  data: [],
  search: "",
  selectData:null,
  selectParentData:null,
  treeAction,
  menuTree,
  bottomGap:30,//弹窗吸底高度
  defaultProps: {
    children: 'Child',
    label: 'menu_name',
  },
  actionDataIndex: 0,
})

const moveIndex = computed({
  get: () => {  
    let index = 0
    if(state.selectData) {
      console.log(state.selectData)
      findIndex(state.selectData.menu_id,state.data)
      index = state.actionDataIndex
    }
    
    return index
  }
})
const getMenuTree = () => {
  axios
    .get(`/apaas/system/v5/menu/tree`)
    .then((res) => {
      if (res.data.code == 200) {
        state.data = res.data.data || []
        nextTick().then(() => {
          state.menuTree && state.menuTree.setCurrentKey(state.data[0].menu_id);
          handleNodeClick(state.data[0]);
        })

      }else {
        ElMessage.error(res.data.data)
      }
    })
}
const findIndex= (code,arr) => {
  arr.forEach((e,i) => {
    if (e.menu_id == code) {
      state.actionDataIndex = i
      console.log(e,i)
    }else {
      if (e.Child && e.Child.length > 0) {
        findIndex(code,e.Child)
      }
    }
  })
}

const showAction = (e, data,node) => {
  acTop.value = ''
  acLeft.value = ''
  acBottom.value = ''
  const rect = e.target.getBoundingClientRect(); //获取点击的dom的位置
  var allHeight = document.body.scrollHeight
  console.log(rect, data,node);
  
  actionFlag.value = true;
  state.selectData = data
  if(node.parent.data.Child){
    state.selectParentData = node.parent.data
  }else{
    //没有children则是最上层元素
    state.selectParentData = null
  }
  nextTick().then(()=>{
    setTimeout(()=>{
      var height = window.getComputedStyle(state.treeAction).height
      height = parseInt(height)
      //判断弹窗位置是否超过屏幕，超过则吸底展示
      if(height+rect.y - 17>allHeight-state.bottomGap){
        acBottom.value = state.bottomGap+ "px";
        acLeft.value = rect.x + 35 + "px";
      }else{
        acTop.value = rect.y - 17 + "px";
        acLeft.value = rect.x + 35 + "px";
      }
    })
  })
};


const handleNodeClick = (data) => {
  if (state.selectData && state.selectData.menu_id == data.menu_id) {
    return
  }
  state.selectData = data
  console.log(data)
  closeAction()
}

const fileAction = (val,data,parent,disabled=false) => {
  if (val == 1) {
    console.log("新建本级", data ,parent,disabled)
    test()
  }else if (val == 2) {
    console.log("新建下级",data,parent,disabled)
    test()
  }else if (val == 3) {
    console.log("删除",data,parent,disabled)
    test()
  }else if (val == 4) {
    console.log("上移",data,parent,disabled)
    test()
    if (disabled) {
      return
    }
    test()
  }else {
    console.log("下移",data,parent,disabled)
    if (disabled) {
      return
    }
    test()
  }
}

const test = () => {
  console.log("执行了")
}

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

onBeforeMount(()=>{
  window.addEventListener("click", closeAction)
  window.addEventListener("scroll", closeAction,true)
  getMenuTree()
  
})

onBeforeUnmount(()=>{
  window.removeEventListener('click', closeAction);
  window.removeEventListener('scroll', closeAction);
  
})

const {
  data,
  search,
  defaultProps,
  selectParentData,
  selectData,
} = toRefs(state)
</script>

<style scoped>
.tree_content {
overflow: hidden;
height: calc(100% - 4px);
position: relative;
}
.search {
padding: 16px 16px 10px;
}
.tree {
overflow: auto;
height: calc(100% - 65px);
}
.tree :deep().el-tree-node .el-tree-node__content {
  padding: 0 16px!important;
} 
.tree :deep() .el-tree-node>.el-tree-node__children {
overflow: unset;
padding-left: 16px;
}

.tree-action-box {
  display: none;
  position: absolute;
  right: 0px;
  background-color: #f2f3f7;
  width: 44px;
  text-align: center;
  height: 36px;
  line-height: 36px;
}
.tree .el-tree-node__content:hover .tree-action-box {
  display: inline-block;
}
.tree-more {
  font-size: 12px;
  color: #3759be;
}
.tree-action {
  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;
}
.tree-action .action {
  width: 100%;
  height: 34px;
  line-height: 34px;
  padding-left: 16px;
  font-size: 14px;
  color: #202531;
  cursor: pointer;
}
.tree-action .action:hover {
  background-color: #f2f3f7;
  color: #3759be;
}

.tree-action .disable{
  cursor: not-allowed;
  color: #616f94;
}
.tree-action .disable:hover{
  background-color: #fff;
  color: #616f94;
}
.main_container {
padding: 15px;
height: 100%;
}
.table_container {
height: calc(100% - 30px);
overflow: auto;
}
.pagination_box {
position: sticky;
margin-top: 16px;
bottom: 0px;
background-color: #fff;
z-index: 1024;
height: 40px;
line-height: 40px;
padding-top: 8px;
}
.bg-pagination {
bottom: unset
}

</style>