<template>
  <div v-show="visible" @click.native="clickicon">
    <slot/>
  </div>
</template>

<script>
import commonMixin from 'vue-baidu-map/components/base/mixins/common.js'
import bindEvents from 'vue-baidu-map/components/base/bindEvent.js'
import { createLabel, createPoint } from 'vue-baidu-map/components/base/factory.js'

export default {
  name: 'BaiduMapMarker',
  mixins: [commonMixin('overlay')],
  props: {
    position: {
      type: Object,
      required: true
    },
    size: {
      type: Object,
      default: () => {
        return {
          width: 20,
          height: 20
        }
      }
    },
    anchor: {
      type: Object,
      default: () => {
        return {
          width: 10,
          height: 10
        }
      }
    },
    offset: {
      type: Object,
      default: () => {
        return {
          width: 0,
          height: 0
        }
      }
    },
    icon: {
      type: String,
      default: null
    },
    massClear: {
      type: Boolean,
      default: true
    },
    dragging: {
      type: Boolean,
      default: false
    },
    clicking: {
      type: Boolean,
      default: true
    },
    raiseOnDrag: {
      type: Boolean,
      default: false
    },
    draggingCursor: {
      type: String,
      default: null
    },
    rotation: {
      type: Number,
      default: 0
    },
    shadow: {
      type: Object,
      default: () => {
        return null
      }
    },
    title: {
      type: String,
      default: ''
    },
    label: {
      type: Object,
      default: () => {
        return null
      }
    },
    animation: {
      type: String,
      default: null
    },
    top: {
      type: Boolean,
      default: false
    },
    zIndex: {
      type: Number,
      default: 300
    },
    visible: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    'position.lng'(val, oldVal) {
      const { BMap, originInstance, position, renderByParent, $parent } = this
      if (val !== oldVal && val >= -180 && val <= 180) {
        originInstance.setPosition(createPoint(BMap, { lng: val, lat: position.lat }))
      }
      renderByParent && $parent.reload()
    },
    'position.lat'(val, oldVal) {
      const { BMap, originInstance, position, renderByParent, $parent } = this
      if (val !== oldVal && val >= -74 && val <= 74) {
        originInstance.setPosition(createPoint(BMap, { lng: position.lng, lat: val }))
      }
      renderByParent && $parent.reload()
    },
    'offset.width'(val, oldVal) {
      const { BMap, originInstance } = this
      if (val !== oldVal) {
        originInstance.setOffset(new BMap.Size(val, this.offset.height))
      }
    },
    'offset.height'(val, oldVal) {
      const { BMap, originInstance } = this
      if (val !== oldVal) {
        originInstance.setOffset(new BMap.Size(this.offset.width, val))
      }
    },
    icon: {
      deep: true,
      handler(val) {
        const { BMap, originInstance, rotation, size, anchor } = this
        if (val) {
          const myIcon = new BMap.Icon(val, new BMap.Size(size.width, size.height), {
            anchor: new BMap.Size(anchor.width, anchor.height)
          })
          myIcon.setImageSize(new BMap.Size(size.width, size.height))
          originInstance.setIcon(myIcon)
        }
        // originInstance && originInstance.setIcon(createIcon(BMap, val))
        rotation && originInstance && originInstance.setRotation(rotation)
      }
    },
    massClear(val) {
      val ? this.originInstance.enableMassClear() : this.originInstance.disableMassClear()
    },
    dragging(val) {
      val ? this.originInstance.enableDragging() : this.originInstance.disableDragging()
    },
    clicking() {
      this.reload()
    },
    raiseOnDrag() {
      this.reload()
    },
    draggingCursor(val) {
      this.originInstance.setDraggingCursor(val)
    },
    rotation(val) {
      this.originInstance.setRotation(val)
    },
    shadow(val) {
      this.originInstance.setShadow(val)
    },
    title(val) {
      this.originInstance.setTitle(val)
    },
    label(val) {
      this.reload()
    },
    animation(val) {
      this.originInstance.setAnimation(global[val])
    },
    top(val) {
      this.originInstance.setTop(val)
    },
    zIndex(val) {
      this.originInstance.setZIndex(val)
    },
    visible(val) {
      if (!val) {
        // 当visible为false时移除overlay
        this.removeOverlay()
      } else {
        // 为true时显示overlay
        this.load()
      }
    }
  },
  methods: {
    load() {
      const { BMap, map, position, size, anchor, offset, icon, massClear, dragging, clicking, raiseOnDrag, draggingCursor, rotation, shadow, title, label, animation, top, renderByParent, $parent, zIndex } = this
      let myIcon = null
      if (icon) {
        myIcon = new BMap.Icon(icon, new BMap.Size(size.width, size.height), {
          anchor: new BMap.Size(anchor.width, anchor.height)
        })
        myIcon.setImageSize(new BMap.Size(size.width, size.height))
      }
      let myOffset = null
      if (offset) {
        myOffset = new BMap.Size(offset.width, offset.height)
      }
      const overlay = new BMap.Marker(new BMap.Point(position.lng, position.lat), {
        offset: myOffset,
        // icon: icon && createIcon(BMap, icon),
        icon: myIcon,
        enableMassClear: massClear,
        enableDragging: dragging,
        enableClicking: clicking,
        raiseOnDrag,
        draggingCursor,
        rotation,
        shadow,
        title
      })
      this.originInstance = overlay
      label && overlay && overlay.setLabel(createLabel(BMap, label))
      overlay.setTop(top)
      overlay.setZIndex(zIndex)
      const thisvue = this
      overlay.addEventListener('click', function() {
        console.log('event click listener')
        thisvue.$emit('click')
      })
      bindEvents.call(this, overlay)
      if (renderByParent) {
        $parent.reload()
      } else {
        map.addOverlay(overlay)
      }
      overlay.setAnimation(global[animation])
    },
    addOverlay() {
    },
    removeOverlay() {
      const { map } = this
      map.removeOverlay(this.originInstance)
    },
    clickicon() {
      console.log('clickicon')
    }
  }
}
</script>