<!--
 * @Description: 高德地图容器
 * @Author: 王晓颖
 * @Date: 2022-05-12 16:04:00
 -->
<template>
  <div :id="vid" ref="mapContainer" class="amap-container" >
    <slot/>
  </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
  name: 'AMapContainer',
  props: {
    vid: {
      type: String,
      required: true
    }, // 地图容器的id
    viewMode: {
      type: String,
      default: '3D'
    }, // 地图模式：2D,3D
    styleId:{
      type: String,
      default: ''
    }, // 高德地图样式id
    zoom: {
      type: Number,
      default: 13
    }, // 初始化地图级别
    zooms: {
      type: Array,
      default: () => [2, 18]
    }, // 地图范围 [2-18]
    center: {
      type: Array,
      required: true
    }, // 初始化地图中心点位置 [lng,lat]
    plugins:{
      type: Array,
      default: ()=>[]
    }, // 地图默认加载插件
    uis:{
      type: Array,
      default: ()=>[]
    } // 地图默认加载的AMapUI
  },
  data() {
    return {
      map: null
    }
  },
  mounted() {
    this.initMap()
  },
  beforeDestroy(){
    this.map&& this.map.destroy()
    this.map = null
  },
  methods: {
    initMap() {
      const { vid, zoom, zooms, center, viewMode, styleId } = this
      window._AMapSecurityConfig = {
        securityJsCode: this.$store.getters.amapSecurityCode
      }
      AMapLoader.load({
        key: this.$store.getters.amapKey, // 秘钥，从store中取
        version: '2.0', // api版本，2.0
        plugins: this.plugins, // 使用插件
        AMapUI: {
          version: '1.1',
          plugins: this.uis
        },
        Loca: {
          version: '2.0'
        }
      }).then((AMap) => {
        window.AMap = AMap
        const options = {
          viewMode: viewMode,
          zoom: zoom
        }
        if(zooms) options.zooms = zooms
        if(center) options.center = center
        if(styleId) options.mapStyle = `amap://styles/${styleId}`
        this.map = new AMap.Map(vid, options)
        // 通知父组件，已完成加载
        this.$emit('ready', this.map)
      }).catch(e => {
        this.$message.error('地图加载失败')
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.amap-container{
  width: 100%;
  height: 100%;
  padding: 0px;
  margin:0px;
}
</style>