<template>
  <div class="bim-roaming main-page">
    <div id="bimRoaming" :key="elId">
      <div id="bimRoamingContainer" class="bimRoamingContainer"></div>

      <div class="div-left" :class="{ isShow: leftShow, isHide: !leftShow }">
        <transition name="left">
          <div class="data-content" v-show="leftShow">
            <div class="div-row">
              <div class="row-title">
                <svg-icon icon-class="signal"></svg-icon>
                模型结构树
              </div>
              <div class="model-tree">
                <el-tree
                v-if="showTree"
                  ref="tree"
                  :default-expanded-keys="[0, 1]"
                  :props="{
                    children: 'children',
                    label: 'title',
                  }"
                  node-key="key"
                  @check="onCheckTree"
                  :load="loadTreeNode" lazy
                  show-checkbox></el-tree>
              </div>
            </div>
          </div>
        </transition>
        <img :src="leftSrc" class="toSafety-fixed-left-img" @click="arrowRetract" id="arrowLeft" />
      </div>

      <div class="div-right" :class="{ isShow: leftShow, isHide: !leftShow }">
        <transition name="right">
          <div class="data-content" v-show="leftShow">
            <div class="div-row r33">
              <div class="row-title">
                <svg-icon icon-class="signal"></svg-icon>
                漫游方案
              </div>
            </div>

            <div class="div-row r66">
              <div class="row-title">
                <svg-icon icon-class="signal"></svg-icon>
                视点列表
              </div>
            </div>
          </div>
        </transition>
        <img :src="rightSrc" class="toSafety-fixed-right-img" @click="arrowRetract" id="arrowRight" />
      </div>
    </div>

    <div class="div-tools">
      <div class="tool-item" @click="resetScene">
        <div class="icon">
          <svg-icon icon-class="home" />
        </div>
        <span class="sp-text">默认视点</span>
      </div>
    </div>
  </div>
</template>

<script>
import debounce from "lodash.debounce";
export default {
  name: "BIMRoaming",
  data() {
    return {
      dpi: "",
      selProject: null,
      leftSrc: "./bimImages/arrow_left_retract.png",
      rightSrc: "./bimImages/arrow_right_retract.png",
      leftShow: true,
      models: [],
      showTree:false,
      modelTrees: [],
    };
  },
  mounted() {
    this.$store.dispatch("ChangeNav", 702);
    this.dpi = this.$dpi();
    window.addEventListener("resize", () => {
      if (this.dpi != this.$dpi()) {
        this.dpi = this.$dpi();
      }
    });
    this.$bus.$on(
      "projectChange",
      debounce((prj) => {
        this.selProject = prj;
        this.elId++;
        this.initEngine();
      })
    );
    this.selProject = this.$store.getters.selProject;
    this.initEngine();
  },
  methods: {
    onCheckTree() {},
    arrowRetract() {
      if (this.leftShow == true) {
        this.rightSrc = "./images/arrow_right_open.png";
        this.leftSrc = "./images/arrow_left_open.png";
        $("#arrowLeft").animate({ left: 10 + "px" }, 300);
        $("#arrowRight").animate({ right: 10 + "px" }, 300);
      } else {
        this.rightSrc = "./images/arrow_right_retract.png";
        this.leftSrc = "./images/arrow_left_retract.png";

        $("#arrowLeft").animate({ left: 490 + "px" }, 300);
        $("#arrowRight").animate({ right: 490 + "px" }, 300);
      }
      this.leftShow = !this.leftShow;
    },
    initEngine() {
      this.elId++;
      this.activeMenu = 0;
      setTimeout(() => {
        this.loadEngine();
      }, 10);
    },
    loadEngine() {
      window.bimMgrApi = new SAPI(
        {
          serverIP: window.config.serverIP, //服务ip地址
          port: window.config.port, //HTTP端口
          useHttps: window.config.useHttps, //使用Https
          container: "bimRoamingContainer", //[必须]容器id
          secretKey: window.config.secretKey,
          openEarth: window.config.openEarth, //[可选]开启Gis场景
          bgColor: window.config.bgColor, //[可选]bim场景背景色, 传值即为纯色天空盒
          tintColor: window.config.tintColor, //[可选]osgb单体化颜色
          sceneTime: window.config.sceneTime, //[可选]分别为当前时间、日出时间、日落时间
          cadMode: window.config.cadMode, // 是否是Cad图纸预览模式
        },
        () => {
          this.initSuccess = true;
          console.log("初始化成功");
          setTimeout(() => {
            this.initLoadModel();
          }, 10);
          let mapOptions = {
            imgs: {
              // 六面图片
              top: "/cdn/bim/sapi/img/top.png",
              bottom: "/cdn/bim/sapi/img/under.png",
              east: "/cdn/bim/sapi/img/east.png",
              south: "/cdn/bim/sapi/img/south.png",
              west: "/cdn/bim/sapi/img/west.png",
              north: "/cdn/bim/sapi/img/north.png",
            },
            offset: {
              // 屏幕坐标偏移
              corner: GLENavigationCube.RightTop,
              x: 25,
              y: 20,
            },
            cube: {
              hoverColor: "#7193dc", // 立方导航快鼠标移过显示颜色
              size: 32, // 导航立方尺寸
              hotPointSize: 7, // 导航立方棱角热点区域尺寸
              cubeTextColor: "#4c4c4ccc", // cube 各个面文字颜色
              cubeStrokeColor: "#374769cc", // cube 各个面边框颜色
              cubeFillColor: "#374769cc", // cube 各个面填充颜色
            },
            zoomRatios: 1, // 缩放倍率
            show: true, // 是否显示
            showAxes: true, // 是否显示XYZ轴线
          };
          bimMgrApi.Plugin.initNavCube(mapOptions);
        }
      );
    },
    initLoadModel() {
      this.$api.bim
        .listBimModel({
          pageNum: 1,
          pageSize: 100,
          comId: this.currentComId,
          projectId: this.currentPrjId,
        })
        .then((d) => {
          this.models = d.rows || [];
          if (this.models.length == 0) {
            this.$modal.msgError("暂无模型，请先关联模型");
          } else {
            this.models.forEach((item) => {
              this.addModel(item.lightweightName);
            });
            this.loadModelTree();
          }
        });
    },
    loadModelTree() {
      this.modelTrees = [
        {
          title: "项目模型",
          level: 0,
          type: "root",
          key: "root",
          children: [],
          hadLoad: true,
        },
      ];
      this.models
        .map((d) => {
          d.gis = JSON.parse(d.gisJson);
          return d;
        })
        .forEach((d) => {
          this.modelTrees[0].children.push({
            title: d.modelName,
            level: 1,
            type: "model",
            hasLoad: false,
            modelId: d.lightweightName,
            key: d.lightweightName,
            externalId: "0",
            glid: "",
            children: [],
            data: d,
          });
        });
        this.showTree=true;
    },
    loadTreeNode(node, resolve, reject){
        if(node.level==0){
            resolve([this.modelTrees[0]])
            return;
        }
        if(node.level==1){
            let objs=this.modelTrees[0].children;
            resolve(objs)
            return;
        }
       
            resolve([{title:'aaa'}])
            return;
    
        console.log(nd)
        // this.$api.bim.getModelTree(nd.modelId,nd.glid).then(res=>{
        //     console.log(res)
        // })
    },
    addModel(modelId, cb) {
      let url = `${window.config.modelUrl}/Tools/output/model/${modelId}/root.glt`;
      console.log(modelId, url);
      bimMgrApi.Model.add(
        url,
        modelId,
        () => {},
        () => {
          cb && cb();
          console.log("加载模型成功");
          setTimeout(() => {
            bimMgrApi.Camera.getViewPort((p) => {
              this.viewPoint = p;
            });
          }, 1000);
        }
      );
    },
    resetScene() {
      bimMgrApi.Camera.stopImmersiveRoam();
      bimMgrApi.Model.location(bimMgrApi.m_model.keys().toArray()[0]);
      bimMgrApi.Plugin.deleteMiniMap();
      if (this.viewPoint) {
        bimMgrApi.Camera.setViewPort(this.viewPoint);
      }
    },
  },
};
</script>

<style lang="less">
.bim-roaming {
  height: 100%;
  position: relative;
  #bimRoaming {
    height: 100%;
    #bimRoamingContainer {
      height: 100%;
    }
  }

  .div-left {
    top: 10vh;
    left: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;
    &.isHide {
      left: 0%;
      wdith: 0%;
      #arrowLeft {
        left: 0px !important;
      }
    }
    #arrowLeft {
      top: calc(50% - 50px);
      right: -21px;
      left: unset !important;
    }
    .div-row {
      height: 100%;
    }
  }
  .div-right {
    top: 10vh;
    right: 5%;
    position: absolute;
    height: 70vh;
    width: 14%;
    &.isHide {
      right: 0%;
      width: 0%;
    }
    #arrowRight {
      top: calc(50% - 50px);
      left: -21px;
    }
    .div-row {
      &.r33 {
        height: 33.33%;
      }
      &.r66 {
        height: 66.66%;
      }
    }
  }

  .data-content {
    height: 100%;
    .div-row {
      border: solid 1px #75fbfdaa;
      background-color: #06445b81;
      .row-title {
        background: linear-gradient(0deg, #105696, #c0dafb00, #1765ae);
        padding-left: 10px;
        height: 36px;
        line-height: 36px;
        .svg-icon {
          fill: #75fbfd;
        }
      }
    }
  }

  .div-tools {
    position: absolute;
    bottom: 25vh;
    left: 50%;
    margin-left: -34px;
    display: flex;
    background: #00000080;
    border-radius: 10px;
    .tool-item {
      display: flex;
      flex-flow: column;
      padding: 10px;
      align-items: center;
      cursor: pointer;
      &.is-active {
        .icon {
          background: #097fca94;
          .svg-icon {
            fill: #75fbfd;
          }
        }
        .sp-text {
          color: #75fbfd;
        }
      }
      .icon {
        width: 30px;
        height: 30px;
        background: #c0c4cca1;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 15px;
        .svg-icon {
          width: 20px;
          height: 20px;
        }
      }
      .sp-text {
        margin-top: 4px;
        font-size: 12px;
      }
    }
  }
}
</style>
