<template>
  <div style="text-align:center;height:100%;z-index:999">
    <div class="right_fixed" @click="show_detail" v-if="is_showDetail">权限等级信息查看</div>
    <div class="tree_con" v-else>
      <div class="tree-title">{{juntuanname}} <img src="../../../static/image/openright.png" alt="" class="openright" @click="close_right"></div>
      <img src="../../../static/image/tuanzhang_star.png" alt="" class="tuanzhangimg fl"><p class="tuanzhang-name fl">团长名称</p>
      <Tree :data="treeContent" :render="renderContent" id="right_fixed" @on-toggle-expand='selectTree' class="clear"></Tree>
    </div>
  </div>
</template>
<script>
import { fail } from "assert";
export default {
  name: "right_fixed",
  data() {
    return {
      is_showDetail: true,
      treeContent: [],
      selectId:null,
      juntuanname:'',
    };
  },
  computed: {},
  watch:{
    is_showDetail(n){
      if(n){
        this.$nextTick(()=>{
          // this.getRightFixed()
        })
      }
    }
  },
  methods: {
    show_detail() {
      this.is_showDetail = false;
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
            textAlign: "left"
          }
        },
        [
          h("span",[
            h("img", {
              attrs: {
                src: data.pid==0?data.name==='已离职'?'../../../static/image/old_wenjianjia.png':'../../../static/image/wenjianjia.png':'../../../static/image/left-ff.png'
              },
              style: data.pid==0?{
                width: "18px",
                height: "16px",
                marginLeft: "8px",
                marginTop:'3px'
              }:{
                position:'relative',
                top:'-6px',
                left:'-9px'
              }
            }),
            h('img',{
              attrs: {
                src: data.pid==0?'':!!data.manager.is_leader?data.manager.is_leader===1?'../../../static/image/zuzhangstar.png':'../../../static/image/userstar.png':'../../../static/image/wenjianjia.png'
              },
              style: data.pid==0?{
                width: "8px",
                height: "8px",
              }:{
                width: "14px",
                height: "12px",
                marginRight: "10px",
                marginTop:'6px'
              }
            }),
            h("span",{
              style:data.pid==0?{
                position:'relative',
                left:'5px'
              }:{
                position:'relative',
                left:'-4px'
              },
              on:{
                click:()=>{
                  this.selectTree(data)
                }
              }
            }, data.name + (data.children&&data.pid==0?'（'+data.children.length+'）':''))
          ]),
          h("span", {
            style: {
              display: "inline-block",
              float: "right",
              marginRight: "32px"
            }
          })
        ]
      );
    },
    getRightFixed() {
      this.$api.getRightFixedList().then(data => {
        if (data.code == 200) {
          let arr = data.data;
          this.treeContent=this.changeArray(arr)
          this.juntuanname=''
          // let result = arr.reduce((prev, item) => {
          //   prev[item.pid]? prev[item.pid].push(item) : (prev[item.pid] = [item]);
          //   return prev;
          // }, {});
          // for (let prop in result) {
          //   result[prop].forEach(function(item, i) {
          //     result[item.id] ? (item.children = result[item.id]) : "";
          //   });
          // }
          // this.treeContent=result[0]
          // this.treeContent.push({name:'已离职',pid:0})
        }
      });
    },
    changeArray(arr){
      for(let i of arr){
        if(i.manager.length){
          for(let j  of i.manager){
            j.pid=i.id
            j.children=[]
            j.manager=j
            i.children.push(j)
          }
        }else{
          this.changeArray(i.children)
        }
      }
      return arr
    },
    close_right(){
      this.is_showDetail=true
    },
    selectTree(data){
      if(this.selectId&&this.selectId!==data.id){
      }
    }
  },
  created(){
    // this.getRightFixed()
  }
};
</script>
<style>
.tree-con li {
  height: 40px;
  line-height: 40px;
}
.tree-title {
  width: 100%;
  height: 30px;
  background-color: #009cff;
  border-radius: 3px 3px 0px 0px;
  font-size: 13px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 30px;
  text-align: center;
}
.right_fixed {
  text-align: center;
  width: 21px;
  height: 140px;
  padding: 14px 0px 14px 2px;
  background: rgba(0, 156, 255, 1);
  border-radius: 3px;
  color: rgba(255, 255, 255, 1);
  font-size: 12px;
  position: fixed;
  margin: auto 0px;
  right: 0;
  top: 0;
  bottom: 0;
  cursor: pointer;
  line-height: 14px;
}
.tree_con {
  background-color: #e2e2e2;
  /* width: 168px; */
  min-width: 174px;
  height: auto;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: -2px;
  background: rgba(255, 255, 255, 1);
  border: 2px solid rgba(241, 241, 241, 1);
  border-top: 0;
  box-shadow: 0px 0px 15px 1px rgba(27, 116, 227, 0.08);
  border-radius: 3px;
  z-index: 999;
}
.first-tree-li img {
  width: 11px;
  text-align: left;
}
.tree-con-title {
  margin-left: 10px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
#right_fixed{
  padding-left: 20px
}
#right_fixed .ivu-tree-arrow {
  width: 100%;
  position: absolute;
  z-index: 9999;
}
#right_fixed .ivu-icon-arrow-right-b:before{
  content:''
}
#right_fixed .ivu-tree{
  padding-left: 20px
}
#right_fixed.ivu-tree ul li{
  margin:8px
}
#right_fixed .ivu-tree-children .ivu-tree-arrow.ivu-tree-arrow-open + span{
  color: #009CFF
}
.openright{
  position: relative;
  top: 10px;
  left: 14px;
}
#right_fixed.ivu-tree li ul{
  padding:0 0 0 28px
}
.tuanzhang-name{
  padding-top: 10px;
  line-height: 20px;
  padding-bottom: 8px;
  font-size: 12px;
  color: rgba(51, 51, 51, 1);
  position: relative;
  left: 50px;
}
#right_fixed .ivu-tree-empty{
  display: none
}
.tuanzhangimg{
  width: 16px;
  height: 14px;
  position: relative;
  top: 12px;
  left: 36px;
}
</style>


