<script>
export default {
  name: 'UiMapCoordMarker',
  inject: ['UiMap'],
  props: {
    /**
     * 经纬度值
     * {
     *    lng: null,
     *    lat: null
     * }
    */
    value: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      markers: []
    }
  },
  watch: {
    value() {
      this.handleValueChange()
    }
  },
  render() {
    return null
  },
  methods: {
    handleValueChange() {
      for (let i = this.markers.length - 1; i >= 0; i--) {
        this.markers[i].remove()
        this.markers.splice(i, 1)
      }
      if (!this.value) {
        return
      }
      const marker = new this.UiMap.AMap.Marker({
        icon: require('./icons/mark_b.png'),
        position: [this.value.lng, this.value.lat],
        anchor: 'bottom-center'
      })
      this.markers.push(marker)
      this.UiMap.map.add(marker)
    }
  }
}
</script>
