<template>
  <div :id="id" class="tengxun-map"></div>
</template>

<script>
import qq from 'qq'
let num = 88

export default {
  name: 'TengXunMap',
  props: {
    point: {
      type: Object,
      default () {
        return {
          lng: 119.425722,
          lat: 32.188478
        }
      }
    },
    zoom: {
      type: Number,
      default: 15
    }
  },
  watch: {
    point: {
      deep: true,
      handler () {
        // 创建地图实例
        if (this.map) {
          const point = new qq.maps.LatLng(this.point.lat, this.point.lng)
          this.map.setCenter(point)
          if (this.marker) {
            this.marker.setPosition(point)
          } else {
            this.marker = new qq.maps.Marker({ visible: true, map: this.map, position: point })
          }
        }
      }
    }
  },
  data: () => {
    return {
      id: 'baiduMap' + num,
      map: null,
      marker: null
    }
  },
  mounted () {
    const _that = this
    const center = new qq.maps.LatLng(this.point.lat, this.point.lng)
    this.map = new qq.maps.Map(this.$el, {
      center: center,
      zoom: this.zoom || 15,
      mapTypeControl: false
    })
    qq.maps.event.addListener(this.map, 'click', function (evt) {
      var lat = evt.latLng.getLat().toFixed(6)
      var lng = evt.latLng.getLng().toFixed(6)
      // 设置中心
      _that.map.setCenter(evt.latLng)
      _that.$emit('click', { lat, lng, poi: evt.poi, latLng: evt.LatLng })
    })
    this.$emit('mapMounted', this.map)
  },
  beforeCreate () {
    ++num
  }
  // destroyed () {
  //   if (this.map) {
  //     this.map.destroy()
  //   }
  // }
}
</script>
<style scoped>
.tengxun-map {
  width: 100%;
  height: 100%;
}
</style>