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

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import registerMixin from './mixins/register-component'
export default {
  name: 'AMapContainer',
  mixins: [registerMixin],
  props: {
    vid: {
      type: String,
      required: true
    }, // 地图容器的id
    viewMode: {
      type: String,
      default: '3D'
    }, // 地图模式：2D,3D
    mapStyle: {
      type: String,
      default: ''
    }, // 高德地图样式id
    zoom: {
      type: Number,
      default: 13
    }, // 初始化地图级别
    zooms: {
      type: Array,
      default: () => [2, 18]
    }, // 地图范围 [2-18]
    center: {
      type: Array,
      required: true
    }, // 初始化地图中心点位置 [lng,lat]
    baseLayer: {
      type: String,
      default: 'gaode_vec'
    },
    plugins: {
      type: Array,
      default: () => []
    }, // 地图默认加载插件
    uis: {
      type: Array,
      default: () => []
    } // 地图默认加载的AMapUI
  },
  data() {
    return {
      map: null,
      satelliteLayer: null // 影像图层
    }
  },
  watch: {
    center(val) {
      this.setCenter()
    },
    baseLayer(val) {
      this.changeBaseLayer()
    }
  },
  mounted() {
    this.initMap()
  },
  beforeDestroy() {
    this.map && this.map.destroy()
    this.map = null
  },
  methods: {
    initMap() {
      const { vid, zoom, zooms, center, viewMode, mapStyle } = this
      if (!window._AMapSecurityConfig) {
        // 安全码
        window._AMapSecurityConfig = {
          securityJsCode: this.$store.getters.amapSecurityCode
        }
      }
      console.log(this.$store.getters.amapSecurityCode, 'heiheihei')
      console.log(this.$store.getters.amapKey, 'heiheihei')
      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) => {
        if (!window.AMap) {
          window.AMap = AMap
        }
        /* eslint-disable */
        const options = {
          viewMode: viewMode,
          zoom: zoom,
          layers: [new AMap.createDefaultLayer()]
        }
        if (zooms) options.zooms = zooms
        if (center) options.center = center
        if (mapStyle) options.mapStyle = `amap://styles/${mapStyle}`
        this.map = this.$amapComponent = new AMap.Map(vid, options)
        // 通知父组件，已完成加载
        this.$emit('ready', this.map)
        this.$children.forEach(component => {
          component.$emit('ready', this.map)
        })
      }).catch(e => {
        this.$message.error('地图加载失败:'+e)
      })
    },
    setCenter(){
      if(this.map){
        let center = this.center
        if(typeof this.center[0]==='string'){
          center = [parseFloat(this.center[0]), parseFloat(this.center[1])]
        }
        console.log('setCenter:', center)
        this.map.setCenter(this.center)
      }
    },
    changeBaseLayer() {
      const layers = this.map.getLayers()
      const type = this.baseLayer
      if (type === 'gaode_sat') {
        this.satelliteLayer = new window.AMap.TileLayer.Satellite();
        // const roadNet = new window.AMap.TileLayer.RoadNet();
        this.map.addLayer(this.satelliteLayer)
      } else if (type === 'gaode_vec') {
        // 找到satellite图层移除
        this.map.removeLayer(this.satelliteLayer)
        /* eslint-disable */
        // this.map.setLayers([new window.AMap.createDefaultLayer()])
      }
    }
  }
}
</script>

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