<template>
  <div class="model_map">
    <model-map ref="modelMap" map-id="model_map"/>
  </div>
</template>

<script>
import WMap from "../../../components/Standard/mapboxMap.vue";
import ModelMap from "../../../components/Standard/modelMap.vue";

let map
export default {
  components: {ModelMap, WMap},
  computed: {},
  data() {
    return {
      timer: null,
      angle: 0
    };
  },
  mounted() {
    map = this.$refs.modelMap.initMap()
    map.on('load', () => {
      map.setCenter([41.00025957469552, 20.999984837534015])
      map.setZoom(18.4818298651229)
      map.setBearing(93.20000000000005)
      map.setPitch(60)
    })
    map.on('moveend', () => {
      console.log(map.getCenter(), map.getZoom(), map.getBearing(), map.getPitch())
    })
    map.on('style.load', () => {
      map.addLayer({
        id: "vehicle3D",
        type: "custom",
        renderingMode: "3d",
        onAdd: (map, mbxContext) => {
          window.tb1 = new Threebox(map, mbxContext, {
            defaultLights: true,
            enableSelectingObjects: false,
          });
          let options = {
            obj: `gltf/mobile.gltf`,
            type: "gltf",
            units: "meters",
            scale: 10,
            adjustment: {x: 0.5, y: 1, z: -0.6},
            bbox: false,
          };
          window.tb1.loadObj(options, (model) => {
            model.setCoords([41, 21]);
            window.tb1?.add(model)
            this.timer = setInterval(() => {
              model.setRotation({x: 90, y: this.angle, z: 0})
              this.angle > 360 ? this.angle = 0 : this.angle += 1
              if(window.tb1) window.tb1.update()
            }, 10)
          });
        },
        render: function (gl, matrix) {
          window.tb1.update();
        },
      });
    })
  },
  methods: {},

  beforeDestroy() {
    if(this.timer) {clearInterval(this.timer)}
    window.tb1?.dispose()
    window.tb1 = null
    map = null
  },
};
</script>

<style lang='less' scoped>
.model_map {
  position: absolute;
  right: 730px;
  top: 90px;
  height: 300PX;
  width: 200PX;
  background-color: transparent;
  pointer-events: none;
}
</style>