<template>
  <div v-loading="mapLoading" class="map">
    <div id="container" class="map" />
  </div>

</template>

<script>
// 引入高德地图配置
import mapConfig, { geoLocation } from '@/common/map.config'
import { geocode } from '@/common/mapService'
export default {
  name: 'MapUi',
  props: {
    // 城市名称
    address: {
      type: String,
      default: ''
    },
    initPoint: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mapLoading: true,
      AMap: null,
      map: null,
      marker: null,
      position: null
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  beforeDestroy() {
    this.AMap = null
    this.marker = null
    this.position = null
    this.map.destroy()
  },
  methods: {
    // 初始化地图
    async init() {
      this.AMap = await window.AMapLoader.load(mapConfig)
      this.map = new this.AMap.Map('container', {
        zoom: 16, // 设置地图显示的缩放级别
        center: [116.397428, 39.90923], // 设置地图中心点坐标
        viewMode: '2D' // 设置地图模式
      })
      this.map.setDefaultCursor('pointer')
      this.addController()
      // 绑定点击事件
      this.bindEvent()

      // 初始化地图中心点标记
      // 1 根据已有坐标定位
      if (this.initPoint) {
        const [lng, lat] = this.initPoint.split(',')
        console.log(this.initPoint.split(','))
        const position = new this.AMap.LngLat(parseFloat(lng), parseFloat(lat))
        console.log(position)
        this.markerTo(position)
        this.map.setCenter(position)
        return
      }

      // 2 根据城市信息定位
      if (this.address) {
        // const result = await geoCoder('北京市朝阳区阜荣街10号')
        const result = await geocode({
          address: this.address
        })
        if (result.geocodes.length > 0) {
          const [lng, lat] = result.geocodes[0].location.split(',')
          const position = new this.AMap.LngLat(parseFloat(lng, 8), parseFloat(lat, 8))
          this.markerTo(position)
          this.map.setCenter(position)
          return
        }
      }

      // 3 默认浏览器定位
      const { lng, lat } = await geoLocation()
      const position = new this.AMap.LngLat(lng, lat)
      this.markerTo(position)
      this.map.setCenter(position)
    },

    // 添加控件
    addController() {
      this.map.addControl(new this.AMap.ToolBar())
      this.map.addControl(new this.AMap.MapType())
    },

    // 绑定事件
    bindEvent() {
      this.map.on('complete', () => {
        this.mapLoading = false
      })
      this.map.on('click', ev => {
        const { lng, lat } = ev.lnglat
        this.markerTo(new this.AMap.LngLat(lng, lat))
      })
    },

    // 移动点标记
    markerTo(position) {
      if (this.marker) this.map.remove(this.marker)
      // 构造点标记
      this.marker = new this.AMap.Marker({
        icon: '/location.png',
        position: position,
        offset: new this.AMap.Pixel(-24, -44)
      })
      this.map.add(this.marker)
      this.position = position
      this.$emit('change', this.position)
    }
  }
}
</script>

<style scoped lang="scss">
.map{
  width: 100%;
  height: 600px;
}
</style>
