<template>
  <div class="bim-setting-page app-container2">
    <div id="bimSettingContainer"></div>
    <model-floor-tree ref="modelFloorTree" @change="doChange" @modelAdd="modelAdded" :projectMessage="models" v-if="showTree"></model-floor-tree>
    <div class="footer-box" v-if="showModels.length > 0">
      <a-tooltip placement="top" title="主视图">
        <div class="footer-btn" @click="doMenu(0)" :class="activeMenu == 0 ? 'is-active' : ''">
          <svg-icon icon-class="home" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top" title="第一人称漫游">
        <div class="footer-btn" @click="doMenu(1)" :class="activeMenu == 1 ? 'is-active' : ''">
          <svg-icon icon-class="roam" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top" title="自定义视点漫游">
        <div class="footer-btn" @click="doMenu(2)" :class="activeMenu == 2 ? 'is-active' : ''">
          <svg-icon icon-class="view" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top" title="视点管理">
        <div class="footer-btn" @click="doMenu(3)" :class="activeMenu == 3 ? 'is-active' : ''">
          <svg-icon icon-class="camera" />
        </div>
      </a-tooltip>
      <a-tooltip placement="top" title="构件隐藏">
        <div class="footer-btn" @click="doMenu(4)" :class="activeMenu == 4 ? 'is-active' : ''">
          <svg-icon icon-class="hide" />
        </div>
      </a-tooltip>
    </div>
    <div class="bim-setting-tools" v-show="activeMenu > 0">
      <div class="tools-title">
        <svg-icon icon-class="roam" v-if="activeMenu == 1" />
        <svg-icon icon-class="view" v-if="activeMenu == 2" />
        <svg-icon icon-class="camera" v-if="activeMenu == 3" />
        <svg-icon icon-class="hide" v-if="activeMenu == 4" />
        {{ param.title }}
      </div>
      <el-icon @click="doToolsClose" style="color: #000; font-size: 20px; cursor: pointer" class="tools-close">
        <Close />
      </el-icon>
      <person-roaming v-if="activeMenu == 1" ref="personRoaming" :me="this"></person-roaming>
      <custom-viewpoint v-if="activeMenu == 2" ref="customViewpoint" :me="this"></custom-viewpoint>
      <viewpoint v-if="activeMenu == 3" ref="viewpoint" :me="this"></viewpoint>
    </div>
  </div>
</template>

<script>
import useUserStore from "@/store/modules/user";
import { listBimModel } from "@/api/bim/bimModel";
import ModelFloorTree from "./ModelFloorTree.vue";
import PersonRoaming from "./PersonRoaming.vue";
import CustomViewpoint from "./CustomViewpoint.vue";
import Viewpoint from "./Viewpoint.vue";
export default {
  components: {
    ModelFloorTree,
    PersonRoaming,
    CustomViewpoint,
    Viewpoint,
  },
  data() {
    return {
      userStore: {},
      isAdmin: false,
      projects: [],
      currentPrjId: null,
      currentComId: null,
      subDepts: [],
      models: [],
      isMobile: false,
      showTree: false,
      initSuccess: false,
      activeMenu: 0,
      showModels: [],
      param: {},
      viewPoint:null,
    };
  },
  beforeUnmount() {
    document.body.classList.remove("is-sapi");
  },
  mounted() {
    document.body.classList.add("is-sapi");
    this.userStore = useUserStore();
    this.isAdmin = this.userStore.isAdmin;
    this.currentPrjId = this.userStore.currentPrjId;
    this.currentComId = this.userStore.currentComId;
    this.initLoadModel();
    this.initEngine();
  },
  methods: {
    modelAdded(point){
      this.viewPoint=point;
    },
    doChange() {
      this.showModels = api.m_model.keys().toArray();
      console.log("--change--");
    },
    resetScene() {
      if (this.$refs.personRoaming) {
        this.$refs.personRoaming.isRoaming = false;
      }
      api.Camera.stopImmersiveRoam();
      api.Model.location(api.m_model.keys().toArray()[0]);
      api.Plugin.deleteMiniMap();
      if(this.viewPoint){
        api.Camera.setViewPort(this.viewPoint);
      }
    },
    doMenu(n) {
      if (n == this.activeMenu) {
        if (n == 0) {
          this.resetScene();
        }
        return;
      }
      this.activeMenu = n;
      if (n == 0) {
        this.resetScene();
      }
      if (n == 1) {
        this.param.title = "第一人称漫游";
      }
      if (n == 2) {
        this.param.title = "自定义视点漫游";
      }
      if (n == 3) {
        this.param.title = "视点管理";
      }
    },
    NotificationPopup(parameter) {
      this.param = parameter;
      // const that = this
      // that.$notification.open({
      //     key: 'EngineKey',
      //     message: parameter.title,
      //     description: parameter.description,
      //     class: 'engine-notification ' + (parameter.tips ? parameter.tips : ''),
      //     duration: null,
      //     placement: parameter.placement ? parameter.placement : that.isMobile ? 'bottomLeft' : 'topRight',
      //     style: {
      //         top: parameter.top ? parameter.top : '50px',
      //         width: parameter.width ? parameter.width : '360px',
      //         marginRight: `20px`,
      //         borderRadius: '0px',
      //     },
      //     onClose: this.notifClose,
      // })
    },
    doToolsClose() {
      this.activeMenu = 0;
      this.resetScene();
    },
    notifClose() {
      this.activeMenu = -1;
    },
    initEngine() {
      window.api = new SAPI(
        {
          serverIP: window.config.serverIP, //服务ip地址
          port: window.config.port, //HTTP端口
          useHttps: window.config.useHttps, //使用Https
          container: "bimSettingContainer", //[必须]容器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("初始化成功");
          let mapOptions = {
            imgs: {
              // 六面图片
              top: "./img/top.png",
              bottom: "./img/under.png",
              east: "./img/east.png",
              south: "./img/south.png",
              west: "./img/west.png",
              north: "./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轴线
          };
          api.Plugin.initNavCube(mapOptions);
        }
      );
    },
    initLoadModel() {
      listBimModel({
        pageNum: 1,
        pageSize: 10,
        comId: this.currentComId,
        projectId: this.currentPrjId,
      }).then((d) => {
         this.models = (d.rows || []).map((it) => {
          it.modelId = it.lightweightName;
          it.visible=false;
          it.checked = true;
          it.gis = this.$tryToJson(it.gisJson || "{}", {});
          return it;
        });
        if (this.models.length == 0) {
          this.$modal.msgError("暂无模型，请先关联模型");
        } else {
          this.showTree = true;
        }
      });
    },
  },
};
</script>

<style lang="scss">
.bim-setting-page {
  position: relative;
  height: 100%;
  #bimSettingContainer {
    height: 100%;
  }
  .footer-box {
    position: absolute;
    bottom: 10vh;
    left: 50%;
    margin-left: -75px;
    background: #274754;
    border-radius: 4px;
    .footer-btn {
      display: inline-flex;
      width: 40px;
      height: 40px;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      svg {
        width: 20px;
        height: 20px;
        fill: #fff;
      }
      &:hover {
        background: #408edb97;
      }
      &.is-active {
        svg {
          fill: rgb(0, 255, 174);
        }
      }
    }
  }
  .bim-setting-tools {
    position: absolute;
    top: 80px;
    right: 10px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    min-width: 300px;
    min-height: 400px;
    .tools-title {
      padding: 10px;
      color: #114c5f;
      size: 24px;
    }
    .tools-close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
    }
  }
}
</style>
