<template>
  <div class="mapPage">
    <div id="mapboxContainer"></div>
  </div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
import bus from '@/bus';
import axios from 'axios';
export default {
  components: {},
  props: {
    initJson: {
      type: String,
      default: () => '/static/libs/mapbox/style/floodOneMap.json',
    },
    loadCallback: {
      type: Function,
      default: () => function () {},
    },
  },
  setup(props, event) {
    const allData = reactive({
      layerIds: [],
    });
    let map = null;
    let config = null;
    const initeMap = async () => {
      config = (await axios.get(props.initJson)).data;
      const { basemap } = config.params;
      const { style, localStyle } = config.params.init;
      let styleJson = (
        await axios.get(
          localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
        )
      ).data;
      styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
      styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;

      window.newfiberMapbox_table = new mapboxL7.Scene({
        id: 'mapboxContainer',
        map: new mapboxL7.Mapbox({
          style: styleJson,
          // style:  localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
          center: config.params.init.center,
          zoom: config.params.init.zoom,
        }),
      });
      map = newfiberMapbox_table.map;
      map.ogcLayers = [];
      newfiberMapbox_table.unLoadLayers = [];
    };
    onMounted(() => {
      initeMap();
    });

    onBeforeUnmount(() => {
      if (newfiberMapbox_table) {
        newfiberMapbox_table.destroy();
        newfiberMapbox_table = null;
      }
    });

    return {
      ...toRefs(allData),
    };
  },
};
</script>
<style>
.mapPage {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  background: lavender;
}

#mapboxContainer {
  width: 100%;
  height: 100%;
  position: absolute;
}

.l7-control-mouse-location {
  background: none;
}

.l7-control-mouse-location {
  color: #ffffff;
}
</style>