<template>
  <div class="deptListComponent">
    <div class="tree-max-box">
      <el-tree
        class="tree-line"
        @node-click="nodeClickButton"
        :indent="0"
        :current-node-key="treeId"
        :check-on-click-node="false"
        check-strictly
        highlight-current
        :default-expanded-keys="defaultKey"
        node-key="treeId"
        :data="deptOptions"
        :props="defaultProps"
        ref="tree"
        :load="loadNode"
        accordion
        lazy>
        <template #default="{ node, data }">
            <span style="
                max-width:255px;
                display:block;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;"
                  :style="!data.level?'font-size:20px':(data.level==1?'font-size:26px':(data.level==2?'font-size:24px':(data.level==3?'font-size:20px':'')))">{{data.deptName}}</span>
        </template>
      </el-tree>
    </div>
  </div>
</template>
<script>
  import {
    laboratoryLabDeptTreeLargeTree,
    laboratorySubPassOutGetCountByBuildId,
  } from "@/api/index";
  export default {
    name: 'deptListComponent',
    data () {
      return {
        treeList:[],
        showType:false,
        deptId:null,
        deptName:null,
        buildId:null,
        buildName:null,
        floorId:null,
        floorName:null,
        //新树
        deptOptions: null,
        defaultKey:null,
        defaultProps: {
          children: "childTreeList",
          label: "deptName",
          isLeaf:"leaf",
        },
        //当前选中ID
        treeId:null,
      }
    },
    created(){

    },
    mounted(){
      // this.systemBuildingGetTreeList()
      this.laboratoryLabDeptTreeLargeTree()
    },
    methods:{
      //选中楼层
      checkButton(bigItem,item,minItem){
        this.$set(this, 'deptId', bigItem.id)
        this.$set(this, 'deptName', bigItem.name)
        this.$set(this, 'buildId', item.id)
        this.$set(this, 'buildName', item.name)
        this.$set(this, 'floorId', minItem.id)
        this.$set(this, 'floorName', minItem.name)
        let obj = {
          deptId:bigItem.id,
          deptName:bigItem.name,
          buildId:item.id,
          buildName:item.name,
          floorId:minItem.id,
          floorName:minItem.name,
        }
        this.$parent.checkComponent(JSON.parse(JSON.stringify(obj)));
      },
      //获取学校/楼栋/楼层数据
      systemBuildingGetTreeList() {
        systemBuildingGetTreeList({}).then(response => {
          let list = this.forBuildFloor(response.data);
          if (list[0]) {
            for (let i = 0; i < list.length; i++) {
              if(list[i].buildFloorVoList){
                list[i].onType = true
                for (let o = 0; o < list[i].buildFloorVoList.length; o++) {
                  if(list[i].buildFloorVoList[o].buildFloorVoList){
                    list[i].buildFloorVoList[o].onType = true
                    for (let x = 0; x < list[i].buildFloorVoList[o].buildFloorVoList.length; x++) {
                      if(!this.showType){
                        this.$set(this, 'deptId', list[i].id)
                        this.$set(this, 'deptName', list[i].name)
                        this.$set(this, 'buildId', list[i].buildFloorVoList[o].id)
                        this.$set(this, 'buildName', list[i].buildFloorVoList[o].name)
                        this.$set(this, 'floorId', list[i].buildFloorVoList[o].buildFloorVoList[x].id)
                        this.$set(this, 'floorName', list[i].buildFloorVoList[o].buildFloorVoList[x].name)
                        this.$set(this, 'showType', true)
                        let obj = {
                          deptId:list[i].id,
                          deptName:list[i].name,
                          buildId:list[i].buildFloorVoList[o].id,
                          buildName:list[i].buildFloorVoList[o].name,
                          floorId:list[i].buildFloorVoList[o].buildFloorVoList[x].id,
                          floorName:list[i].buildFloorVoList[o].buildFloorVoList[x].name,
                        }
                        this.$parent.checkComponent(JSON.parse(JSON.stringify(obj)));
                      }
                    }
                  }
                }
              }
            }
            this.$set(this, 'treeList', list)
          }
        })
      },
      //处理楼栋楼层数据
      forBuildFloor(list){
        let self = this;
        for(let i=0;i<list.length;i++){
          if(list[i].buildFloorVoList){
            if(list[i].buildFloorVoList[0]){
              list[i].buildFloorVoList = self.forBuildFloor(list[i].buildFloorVoList);
            }else{
              delete list[i].buildFloorVoList;
            }
          }else{
            delete list[i].buildFloorVoList;
          }
        }
        return list
      },

      //新树
      laboratoryLabDeptTreeLargeTree() {
        let self = this;
        laboratoryLabDeptTreeLargeTree({}).then(response => {
          let self = this;
          let list = this.forTreeId(response.data);
          this.$nextTick(()=>{
            //写入楼层下数据
            this.$set(this,'deptOptions',list)
            let checkData = list[0].childTreeList[0].childTreeList[0];
            //展开列表
            self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].treeId]);
            setTimeout(function(){
              //选中列表
              self.$refs.tree.setCurrentKey(checkData.treeId);
              self.$set(self,'treeId',checkData.treeId);
              //当前位置展示
              self.checkAddress(checkData.treeId);
              //查询实验室人数
              self.laboratorySubPassOutGetCountByBuildId(2,checkData.treeId);
              //父级地图数据
              self.$parent.setMapData(checkData);
              //父级危险源数据
              self.$parent.setDanger(checkData.treeId);
            },200);
          })
        })
      },
      forTreeId(list){
        let self = this;
        list.forEach((item,index)=>{
          item.treeId = item.id;
          item.deptName = item.name;
          item.level = item.type;
          if(item.level != 3){
            item.childTreeList = item.buildFloorVoList;
            item.leaf = false;
          }else{
            item.leaf = true;
          }
          delete item.id
          delete item.name
          delete item.type
          delete item.buildFloorVoList
          if(item.childTreeList){
            if(item.childTreeList[0]){
              self.forTreeId(item.childTreeList);
            }
          }
        })
        return list
      },
      //点击操作
      nodeClickButton(e,data){
        this.$nextTick(() => {
          if (e.level == 3) {
            if(this.treeId != e.treeId){
              this.treeId = e.treeId;
              //等待后续逻辑-面板展示-实验室信息-视屏信息
              //当前位置展示
              this.checkAddress(e.treeId);
              //查询实验室人数
              this.laboratorySubPassOutGetCountByBuildId(2,e.treeId);
              //父级地图数据
              this.$parent.setMapData(e);
              //父级危险源数据
              this.$parent.setDanger(e.treeId);
            }
          }
          this.$refs.tree.setCurrentKey(this.treeId);
        });
      },
      //手动加载
      loadNode(node, resolve) {
        let self = this;
        if (node.data){
          if(node.data.level != 3){
            if(node.data.childTreeList){
              if(node.data.childTreeList[0]){
                if(node.data.level != 2){
                  node.data.childTreeList.forEach((item)=>{
                    if(item.childTreeList){
                      if(!item.childTreeList[0]){
                        item.leaf = true;
                      }
                    }else{
                      item.leaf = true;
                    }
                  })
                }
                resolve(node.data.childTreeList);
              }else{
                resolve([]);
              }
            }else{
              resolve([]);
            }
          }
        }

      },
      //选中位置联查
      checkAddress(id){
        let list = this.forAddress(this.$refs.tree._data.root.childNodes,id);
        this.$parent.setAddress(list);
      },
      forAddress(list,id){
        let self = this;
        let nameList = [];
        let name = []
        for(let i=0;i<list.length;i++){
          if(list[i].data.treeId == id){
            return list[i].data.deptName
          }else{
            if(list[i].childNodes){
              if(list[i].childNodes[0]){
                name = self.forAddress(list[i].childNodes,id);
                if(name){
                  nameList = [list[i].data.deptName].concat(name)
                  return nameList
                }
              }
            }
          }
        }
      },
      //查询实验室在线人数
      laboratorySubPassOutGetCountByBuildId(type,id){
        let obj = {};
        if(type == 1){
          obj.buildId = id
        }else if(type == 2){
          obj.floorId = id
        }else if(type == 3){
          obj.subId = id
        }
        laboratorySubPassOutGetCountByBuildId(obj).then(response => {
          this.$parent.setUserNum(response.data)
        });
      },
    },
  }
</script>
<style scoped lang="scss">
  .deptListComponent{
    width:430px;
    height:1330px;
    overflow-y:hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
    .title-p{
      font-size:26px;
      color:#03B7CA;
      margin:16px 0 0 29px;
    }
    .checkColor{
      color:#03B7CA!important;
    }
    .for-big-box:nth-last-child(1){
      .for-big-name-box{
        .border-p{
          height:39px!important;
        }
      }
      .none-p-1{
        background-color: rgba(0,0,0,0)!important;
      }
      .for-box:nth-last-child(1){
        .none-p-2{
          background-color: rgba(0,0,0,0)!important;
        }
      }
    }
    .for-big-box{
      .for-big-name-box{
        display: flex;
        margin-left:38px;
        p:nth-child(1){
          width:1px;
          height:50px;
          background-color: #15827c;
        }
        p:nth-child(2){
          width:30px;
          height:1px;
          margin-top:38px;
          border-top:1px dashed #15827c;
        }
        p:nth-child(3){
          cursor: pointer;
          flex:1;
          margin-top:28px;
          line-height:24px;
          font-size:24px;
          height:24px;
          color:#fff;
        }
      }
      .for-box:nth-last-child(1){
        .for-name-box{
          .border-p{
            height:39px!important;
          }
        }
        .none-p-2{
          background-color: rgba(0,0,0,0)!important;
        }
      }
      .for-box{
        .for-name-box{
          display: flex;
          margin-left:38px;
          p:nth-child(1){
            width:1px;
            height:50px;
            background-color: #15827c;
          }
          p:nth-child(2){
            margin-left:42px;
            width:1px;
            height:50px;
            background-color: #15827c;
          }
          p:nth-child(3){
            width:30px;
            height:1px;
            margin-top:38px;
            border-top:1px dashed #15827c;
          }
          p:nth-child(4){
            cursor: pointer;
            flex:1;
            margin-top:26px;
            line-height:24px;
            font-size:24px;
            height:24px;
            color:#fff;
          }
        }
        .for-min-box{
          .for-min-name-box{
            display: flex;
            margin-left:38px;
            p:nth-child(1){
              width:1px;
              height:50px;
              background-color: #15827c;
            }
            p:nth-child(2){
              margin-left:42px;
              width:1px;
              height:50px;
              background-color: #15827c;
            }
            p:nth-child(3){
              margin-left:42px;
              width:1px;
              height:50px;
              background-color: #15827c;
            }
            p:nth-child(4){
              width:30px;
              height:1px;
              margin-top:38px;
              border-top:1px dashed #15827c;
            }
            p:nth-child(5){
              cursor: pointer;
              flex:1;
              margin-top:30px;
              line-height:20px;
              font-size:20px;
              height:20px;
              color:#fff;
            }
          }
        }
        .for-min-box:nth-last-child(1){
          .for-min-name-box{
            .border-p{
              height:39px!important;
            }
          }
        }
      }
    }

    //新树
    .tree-max-box{
      flex:1;
      margin:30px 0 30px 9px;
      overflow-y:scroll;
    }
    .el-tree{
      background-color: transparent;
      color:#fff;

    }
    ::v-deep .tree-line .el-tree-node__expand-icon{
      display: block;
      height: 60px;
      width: 60px;
      padding: 0;
      line-height: 60px;
      text-align: center;
      margin-right: auto;
      font-size: 24px!important;
      color:#15827C;
    }
    //选中
    ::v-deep .is-current{
      /*color:#03B7CA;*/
    }
    ::v-deep .el-tree-node:focus > .el-tree-node__content{
      background-color: transparent;
    }
    ::v-deep .el-tree-node__content{
      height:60px;
      display: flex;
      flex-direction: row-reverse;
    }
    ::v-deep .el-tree-node__content:hover{
      background-color: transparent;
      color:#03B7CA;
    }
    ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content{
      background-color: transparent;
      color:#03B7CA;
    }
    //引导线
    ::v-deep .tree-line {
      .el-tree-node {
        position: relative;
        padding-left: 27px; // 缩进量
      }
      .el-tree-node__children {
        padding-left: 16px; // 缩进量
      }

      // 竖线
      .el-tree-node::before {
        content: '';
        height: 100%;
        width: 1px;
        position: absolute;
        left: -3px;
        top: -8px;
        border-width: 1px;
        border-left: 1px solid #15827C;
      }
      // 当前层最后一个节点的竖线高度固定
      .el-tree-node:last-child::before {
        height: 38px; // 可以自己调节到合适数值
      }

      // 横线
      .el-tree-node::after {
        content: '';
        width: 24px;
        height: 20px;
        position: absolute;
        left: 0px;
        top: 30px;
        border-width: 1px;
        border-top: 1px dashed #15827C;
      }

      // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
      & > .el-tree-node::after {
        border-top: none;
      }
      & > .el-tree-node::before {
        border-left: none;
      }

      // 展开关闭的icon
      .el-tree-node__expand-icon {
        font-size: 16px;
        // 叶子节点（无子节点）
        &.is-leaf {
          color: transparent;
          // display: none; // 也可以去掉
        }
      }
    }
  }
  .tree-max-box::-webkit-scrollbar {
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  .tree-max-box::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #07B4C7;
    background: #07B4C7;
  }
  .tree-max-box::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #013138;
    border-radius: 0;
    background: #013138;
  }
</style>
