<template>
  <div :id="mapId" class="mapContainer">
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, shallowRef} from "vue";
import {initMap} from "@/utils/aMapUtil";
import {MapContainerProps, MapPlugins} from "@/types/components/map";

const props = withDefaults(defineProps<MapContainerProps>(), {
  plugins: (): MapPlugins[] => {
    return []
  },
  mapOptions: (): AMap.MapOptions => {
    return {
      // 是否为3D地图模式
      viewMode: "3D",
      // 初始化地图级别
      zoom: 11,
      mapStyle: 'amap://styles/darkblue'
    }
  }
})

const mapId = "mapContainer"
const map = shallowRef<AMap.Map>(null);

defineExpose({
  mapInstance: map
})

onMounted(() => {
  initMap(props.plugins).then(AMap => {
    map.value = new AMap.Map(mapId, props.mapOptions)
    props.initCallback && props.initCallback(map.value)
  })
})

onUnmounted(() => {
  map.value?.destroy()
})

</script>

<style scoped lang="scss">
#mapContainer {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
</style>
