<template>
  <div class="map-container">
    <div id="domId" class="scene-container" ref="gradeRef"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue'
import type { Ref } from 'vue'
import { getSingleModelViewTokenList, getMultiModelViewTokenList } from '@/utils/model'

// 声明Viewer及App
let viewer3D: any;
let app: any;
let viewTokenArray:Array<string|null> = []
let viewListArray:Array<string|null> = []
const gradeRef:Ref<any> = ref(null)
let observer: ResizeObserver | null = null;

const batchInit = async () => {
  if(window.sessionStorage.getItem('electModelViewTokenList')){
    let result = window.sessionStorage.getItem('electModelViewTokenList')
    if(result){
      viewTokenArray = result.split(',')
    }
    initBimface(viewTokenArray[0])
  } else {
    await getSingleModelViewTokenList('WaterWarmElect')
    let result = window.sessionStorage.getItem('electModelViewTokenList')
    if(result){
      viewTokenArray = result.split(',')
    }
    initBimface(viewTokenArray[0])
  }
  if(window.sessionStorage.getItem('multiModelViewTokenList')){
    let result1 = window.sessionStorage.getItem('multiModelViewTokenList')
    if(result1){
      viewListArray = result1.split(',')
    }
  } else {
    await getMultiModelViewTokenList()
    let result1 = window.sessionStorage.getItem('multiModelViewTokenList')
    if(result1){
      viewListArray = result1.split(',')
    }
  }
}
function initBimface(token: any) {
  let loaderConfig = new BimfaceSDKLoaderConfig();
  loaderConfig.viewToken = token;
  BimfaceSDKLoader.load(loaderConfig, successCallback, failureCallback);
}
onMounted(() => {
  batchInit()
});
onUnmounted(() => {
  if(viewer3D){
    viewer3D.destroy()
    viewer3D = null
  }
})
// 加载成功回调函数
function successCallback(viewMetaData: any) {
  let dom4Show = document.getElementById('domId');
  // 设置WebApplication3D的配置项
  let webAppConfig = new window.Glodon.Bimface.Application.WebApplication3DConfig();
    // 配置移动端工具条的参数对象
  webAppConfig.MobileToolbars = ["ModelTree", "MainToolbar"];
  webAppConfig.domElement = dom4Show;
  webAppConfig.Buttons = [];
    // 设置全局单位
  // webAppConfig.globalUnit =window.Glodon.Bimface.Common.Units.LengthUnits.Millimeter;
  // 创建WebApplication3D，用以显示模型
  app = new window.Glodon.Bimface.Application.WebApplication3D(webAppConfig);
  viewer3D = app.getViewer();
  viewTokenArray.forEach((viewToken) => {
    viewer3D.loadModel({ viewToken: viewToken });
  })
  viewListArray.forEach((viewToken) => {
    app.addView(viewToken)
  })
  viewer3D = app.getViewer()
  // 监听添加view完成的事件
  viewer3D.addEventListener(window.Glodon.Bimface.Viewer.Viewer3DEvent.ViewAdded, function () {
    //自适应屏幕大小
    const mapResizer = () =>{
      if(dom4Show){
        viewer3D.resize(
          dom4Show.clientWidth,
          dom4Show.clientHeight - 5
        )
      }
    }
    observer = new ResizeObserver(mapResizer)
    observer.observe(gradeRef.value)
    // viewAdded = true;
    // 渲染3D模型
    viewer3D.render();
  });
}
// 加载失败回调函数
const failureCallback = async() => {
  sessionStorage.removeItem('electModelViewTokenList')
  await getSingleModelViewTokenList('WaterWarmElect')
}
onUnmounted(() => {
  if(observer){
    observer.disconnect()
    observer = null
  }
})
</script>

<style scoped lang="scss">
.map-container {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 75px);
  width: 100%;
  .scene-container {
    height: 100%;
    overflow: hidden;
  }
  :deep(.bf-toolbar-bottom) {
    display: none;
  }
}
</style>