<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 bgc_white">
             <div class="tree_header">
                 政务机构
             </div>
             <div class="tree_content">
               <div class="search"> 
                 <el-input
                    v-model="search"
                    placeholder="请输入组织名称搜索"
                    :prefix-icon="Search"
                  />
               </div>
               <div class="tree">
                 <!-- <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>
                  </Teleport> -->
                  <tree></tree>
               </div>
             </div>
           </div>
           <div class="flex_right">
             <div class="info_container bgc_white">
               <div class="title"><span  class="icon_box"><bg-icon class="step_icon" icon="#bg-ic-file"></bg-icon></span> 基本信息  <bg-icon style="font-size: 14px" class="step_icon" icon="#bg-ic-arrow-right"></bg-icon> </div>
               <bg-info :data="baseInfo"></bg-info>
             </div>
             <div class="main_container bgc_white">
              <div class="apaas_button">
                <el-button type="primary" @click="addAccount(0)">新建</el-button><el-button @click="addAccount(1)">编辑</el-button>
              </div>
                <div class="table_container apaas_scroll">
                  <bg-table ref="bgTable" :headers="headers" :rows="tableRows" :isIndex="true" :stripe="true">
                    <template v-slot:action="{ row }">
                      <bg-table-btn class="btn">
                        编辑
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        修改密码
                      </bg-table-btn>
                      <bg-table-btn class="btn">
                        删除
                      </bg-table-btn>
                    </template>
                  </bg-table>
                  <div class="pagination_box">
                     <bg-pagination
                    :page="1"
                    :size="10"
                    :total="100"
                    @change-page="changePage"
                    @change-size="changeSize"
                  >
                  </bg-pagination>
                  </div>       
                </div>
              </div>
           </div>
        </div>
    </div>
</template>

<script setup>
import { Search } from '@element-plus/icons-vue'
import { reactive, toRefs, ref, } from '@vue/reactivity'
import { getCurrentInstance } from 'vue'
import { computed, onBeforeMount } from '@vue/runtime-core'
import { useRouter } from 'vue-router';
import tree from './tree.vue';
  const baseInfo = ref(
    [
    {
      name: "能力名称",
      value: "",
      nameWidth: 112
    },
    {
      name: "调用地址",
      value: "",
      nameWidth: 112
    },
    {
      name: "是否TLS协议",
      value: "",
      full: true,
      nameWidth: 112
    },
    {
      name: "是否TLS协议",
      value: "",
      full: true,
      nameWidth: 112
    },
  ]
  )
  const headers = ref([
        {
          label: "账号",
          prop: "account",
          width: 180
        },
        {
          label: "手机号",
          prop: "phone",
          minWidth: 180
        },
        {
          label: "角色",
          prop: "role",
          width: 150
        },
        {
          label: "创建时间",
          prop: "create_time",
          width: 150
        },
        {
          label: "是否启用",
          prop: "is_use",
          width: 80
        },
        {
          label: "操作",
          prop: "action",
          width: 220,
          fixed: "right",
        },
      ])
 
  const tableRows = ref([
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
    {account: "admin",phone: "15625364536",role: "管理员",create_time: "2022-01-01 00:00",is_use: "是"},
  ])
  const search=ref("");

  const router = useRouter();
  onBeforeMount(() => {
   
  })

  const addAccount = (params) => {
    router.push({
        path: "/develop/account/add",
        query: {
          type: params
        }
      })
  }
  const treeSelected = ref(null);
  const handleNodeClick = (data) => {
    treeSelected.value = data.dept
    console.log(treeSelected.value)
  }

  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 changeSize = (size) => {

    }

    const changePage = (size) => {

    }
  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;
    // state.selectData = data
    // if(node.parent.data.children){
    //   state.selectParentData = node.parent.data
    // }else{
    //   //没有children则是最上层元素
    //   state.selectParentData = null
    // }
  };
  const isSticky = (data) => {

          const canvas = document.createElement("canvas");
          const context = canvas.getContext("2d");
          context.font = '14px MicrosoftYaHei';
          const { width } = context.measureText(data);

          console.log(data)
           console.log(width)

          return width > 252 ? true : false;
  }


</script>

<style scoped>
.tree_header {
  height: 40px;
  line-height: 40px;
	background-color: #f7f7f9;
	border-radius: 6px 6px 0px 0px;
  font-size: 16px;
	letter-spacing: 0px;
	color: #202531;
  padding-left: 16px;
}
.tree_content {
  overflow: hidden;
  height: calc(100% - 45px);
}
.search {
  padding: 16px;
}
.tree {
  overflow: auto;
  height: calc(100% - 65px);
  padding: 5px;
}
.tree :deep() .el-tree-node>.el-tree-node__children {
  overflow: unset;
}
.flex_right {
  display: flex;
  flex-direction: column;
}
.info_container {
  padding: 15px;
  margin-bottom: 10px;
}
.title {
  font-size: 18px;
	color: #202531;
  font-weight: bold;
  margin-bottom: 10px;
}
.icon_box {
    background-color: rgb(42, 74, 167);
    color: rgb(255, 255, 255);
    padding: 2px 4px;
    border-radius: 4px;
    font-size: 14px;
}
.main_container {
  padding: 15px;
  flex: 1;
  overflow: hidden;
}
.table_container {
  height: calc(100% - 20px);
  overflow: auto;
}
.pagination_box {
  position: sticky;
  position: -webkit-sticky;
  margin-top: 16px;
  bottom: 1px;
  background-color: #fff;
  z-index: 1024;
  height: 40px;
  line-height: 40px;
  padding-top: 5px;
}
.bg-pagination {
  bottom: unset
}

.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>