<template>
  <div class="panel-box building-nav">
    <div class="corner-deco tl"></div><div class="corner-deco tr"></div>
    <div class="corner-deco bl"></div><div class="corner-deco br"></div>
    <div class="panel-title">建筑结构导航</div>
    <div class="panel-content">
      <el-input class="video-select"
        @keyup.enter.native="handleEnter"
        @clear="handleEnter"
        clearable
        v-model="queryParams.searchValue"
        type="text" placeholder="搜索楼栋/楼层...." >
      </el-input>
      <el-select class="video-select"
        @change="handleEnter"
        @clear="handleEnter"
        clearable
        v-model="queryParams.deptId"
        placeholder="请选择二级单位">
        <el-option
          v-for="item in options"
          :key="item.deptId"
          :label="item.deptName"
          :value="item.deptId">
        </el-option>
      </el-select>
      <div class="tree-container">
        <el-tree
          class="dark-tree"
          @node-click="nodeClickButton"
          :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 class="tree-node-label">
              <span>{{ data.deptName }}</span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import { getBuildingTree, laboratoryLabScreenRooms, laboratoryLabScreenDeptDropList } from '@/api'

export default {
  name: 'BuildingNav',
  data() {
    return {
      defaultProps: {
        children: "childTreeList",
        label: "deptName",
        isLeaf:"leaf",
      },
      queryParams:{
        searchValue: "",
        deptId: '',
      },
      deptOptions: [],
      options:[],
      treeId:null,
      defaultKey:null,
    }
  },
  mounted() {
    this.getBuildingTree();
    this.laboratoryLabScreenDeptDropList();
  },
  methods: {
    handleEnter(){
      this.getBuildingTree();
    },
    //二级学院下拉列表
    async laboratoryLabScreenDeptDropList() {
      let self = this;
      try {
        const res = await laboratoryLabScreenDeptDropList({})
        this.$set(this,'options',res.data[0].child);
      } catch (e) {
        console.error('BuildingNav:', e)
      }
    },
    async getBuildingTree() {
      let self = this;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      try {
        const res = await getBuildingTree(obj)
        let list = this.forTreeId(res.data);
        this.$set(self,'deptOptions',list)
        this.$nextTick(()=>{
          let checkData = []
          if(this.queryParams.searchValue){
            checkData = list[0].childTreeList[0].childTreeList[0];
            //展开列表
            self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].treeId]);
            setTimeout(function(){
              self.$set(self,'defaultKey',[list[0].treeId,list[0].childTreeList[0].childTreeList[0].treeId]);
            },200)
          }else{
            checkData = list[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.getSubId(checkData);
          },600);
        })
      } catch (e) {
        console.error('BuildingNav:', e)
      }
    },
    nodeClickButton(e,data){
      // console.log('e===>',e);
      // console.log('data===>',data);
      let self = this;
      this.$nextTick(() => {
        if (!e.level||e.level == 2||e.level == 3) {
          if(this.treeId != e.treeId){
            this.treeId = e.treeId;
            //等待后续逻辑-面板展示-实验室信息-视屏信息
            //当前位置展示
            this.checkAddress(e.treeId);
            //查询楼栋/楼层下所有实验室ID
            this.getSubId(e);
          }
        }
        this.$refs.tree.setCurrentKey(this.treeId);
      });
    },
    forTreeId(list){
      let self = this;
      list.forEach((item,index)=>{
        item.treeId = item.id;
        item.deptName = item.name;
        item.level = item.type;
        item.childTreeList = item.buildFloorVoList;
        delete item.id
        delete item.name
        delete item.type
        delete item.buildFloorVoList
        if(item.childTreeList[0]){
          self.forTreeId(item.childTreeList);
        }
      })
      return list
    },
    //手动加载
    loadNode(node, resolve) {
      // console.log('node',node);
      // console.log('resolve',resolve);
      let self = this;
      if (node.data){
        if(node.data.level == 3){
          let obj = {
            deptId:this.queryParams.deptId,
            searchValue:this.queryParams.searchValue,
          }
          obj.floorId = node.data.treeId;
          laboratoryLabScreenRooms(obj).then(response => {
            for(let i=0;i<response.data.length;i++){
              response.data[i].deptName = response.data[i].formatRoomName;
              response.data[i].leaf = true;
            }
            resolve(response.data[0]?response.data:[]);
          })
        }else{
          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([]);
          }
        }
      }

    },
    //实验室ID查询
    getSubId(e){
      let self = this;
      let obj = {
        deptId:this.queryParams.deptId,
        levelIds:[],
      }
      if(!e.level){
        //实验室
        this.$parent.setVideoData([e.treeId]);
      }else if(e.level == 2){
        //楼栋
        obj.buildingId = e.treeId;
        laboratoryLabScreenRooms(obj).then(response => {
          let  list = [];
          for(let i=0;i<response.data.length;i++){
            list.push(response.data[i].treeId)
          }
          this.$parent.setVideoData(list);
        })
      }else if(e.level == 3){
        //楼层
        obj.floorId = e.treeId;
        laboratoryLabScreenRooms(obj).then(response => {
          let  list = [];
          for(let i=0;i<response.data.length;i++){
            list.push(response.data[i].treeId)
          }
          this.$parent.setVideoData(list);
        })
      }
    },
    //选中位置联查
    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
              }
            }
          }
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.building-nav {
  height: 100%;
  display: flex;
  flex-direction: column;

  .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.video-search {
  width: 100%;
  padding: 8px 12px;
  border-radius: 4px;
  background: rgba(72,215,255,0.06);
  border: 1px solid $border-color;
  color: $text-primary;
  font-size: 13px;
  outline: none;
  margin-bottom: 10px;
  flex-shrink: 0;
  transition: all 0.3s ease;

  &::placeholder { color: $text-secondary; }

  &:focus {
    border-color: $accent;
    box-shadow: 0 0 12px rgba(72,215,255,0.2), inset 0 0 8px rgba(72,215,255,0.06);
    background: rgba(72,215,255,0.1);
  }
}
.video-select {
  width: 100%;
  border-radius: 4px;
  // background: rgba(72,215,255,0.06);
  // border: 1px solid $border-color;
  color: $text-primary;
  outline: none;
  margin-bottom: 10px;
  flex-shrink: 0;
  transition: all 0.3s ease;

  &::placeholder { color: $text-secondary; }

  &:focus {
    border-color: $accent;
    box-shadow: 0 0 12px rgba(72,215,255,0.2), inset 0 0 8px rgba(72,215,255,0.06);
    background: rgba(72,215,255,0.1);
  }
  ::v-deep .el-input__inner{
    height: 33px;
    font-size: 13px;
    border: 1px solid $border-color;
    background: rgba(72,215,255,0.06);
    color:#d8f4ff;
  }
}

.tree-container {
  flex: 1;
  overflow-y: auto;
}

.dark-tree {
  background: transparent;
  color: $text-secondary;

  ::v-deep {
    .el-tree-node__content {
      background: transparent;
      height: 34px;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &:hover {
        background: rgba(72,215,255,0.08);
        box-shadow: 0 0 8px rgba(72,215,255,0.08);
      }
    }

    .is-current > .el-tree-node__content {
      background: rgba(72,215,255,0.15);
      color: $accent;
      border-left: 2px solid $accent;
      animation: treeSelectedGlow 2.5s ease-in-out infinite;
    }

    .el-tree-node__expand-icon {
      color: $text-muted;
      transition: all 0.3s ease;

      &.is-leaf { color: transparent; }
      &:not(.is-leaf) { color: $accent-blue; }
      &.expanded {
        color: $accent;
        text-shadow: 0 0 6px rgba(72,215,255,0.4);
      }
    }
  }
}

@keyframes treeSelectedGlow {
  0%, 100% { box-shadow: 0 0 6px rgba(72,215,255,0.1); background: rgba(72,215,255,0.12); }
  50% { box-shadow: 0 0 14px rgba(72,215,255,0.2); background: rgba(72,215,255,0.2); }
}

.tree-node-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;

  i {
    font-size: 14px;
    color: $accent-blue;
  }
}
</style>
