<template>
  <div>
    <div style="min-width:100%;min-height: 400px;" ref="baiduMapDiv" :id="elementId"></div>
  </div>
</template>
<script>
/* global BMap, BMAP_ANCHOR_TOP_LEFT */
export default {
  data () {
    return {
      baiduMap: null
    }
  },
  props: ['elementId', 'pointerData', 'isView'],
  methods: {
    createMap: function () {
      var map = new BMap.Map(this.elementId)
      // 启用滚轮放大缩小，默认禁用
      map.enableScrollWheelZoom()
      // 启用地图惯性拖拽，默认禁用
      map.enableContinuousZoom()
      // 启用地图拖拽
      map.enableDragging()
      // 双指缩放
      map.enablePinchToZoom()

      // 设置中心点
      var point = new BMap.Point(112.948919, 28.236163)
      map.centerAndZoom(point, 12)

      // 添加缩放按钮和比例尺
      const topLeftControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT })
      const topLeftNavigation = new BMap.NavigationControl()

      map.addControl(topLeftControl)
      map.addControl(topLeftNavigation)

      this.baiduMap = map
    },
    setMarker: function(pointerData) {
      this.baiduMap.clearOverlays()
      var myIcon = new BMap.Icon('../../../../static/images/position.png', new BMap.Size(50, 50), {
        // 指定定位位置。
        // 当标注显示在地图上时，其所指向的地理位置距离图标左上
        // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
        // 图标*下端的尖角位置。
        anchor: new BMap.Size(5, 50)
      })
      if (pointerData && pointerData.lng) {
        var tmpPoint = new BMap.Point(pointerData.lng, pointerData.lat)
          // 标点
        var marker = new BMap.Marker(tmpPoint, { icon: myIcon })
          // 加入地图
        this.baiduMap.addOverlay(marker)
      }
    }
  },
  watch: {
    'pointerData': {
      handler: function(newValue, oldValue) {
        this.baiduMap.clearOverlays()
        this.setMarker({
          lng: newValue.lng,
          lat: newValue.lat
        })
      },
      deep: true
    }
  },
  mounted () {
    this.createMap()
    this.setMarker(this.pointerData)
    var self = this
    if (!this.isView) {
      this.baiduMap.addEventListener('click', function(e) {
        self.$emit('update:pointerData', {
          lng: e.point.lng,
          lat: e.point.lat
        })
     // alert(e.point.lng + ',' + e.point.lat)
      })
    }
  }
}
</script>