<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";

const props = withDefaults(defineProps<{
  plugins?: string[],
  initCallback?: () => void,
  mapOptions?: AMap.MapOptions
}>(), {
  plugins: () => {
    return []
  },
  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 => {
    props.initCallback && props.initCallback()
    map.value = new AMap.Map(mapId, props.mapOptions)
  })
})

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

</script>

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