<template>
  <div class="markerDiv">
    <slot/>
  </div>
</template>

<script>
import commonMixin from '../base/mixins/common.js'
import { createIcon } from '../base/factory.js'
export default {
  name: 'CmapMarker',
  mixins: [commonMixin('overlay')],
  props: {
    position: { // marker位置
      type: Object,
      required: true
    },
    title: { // 标签
      type: String,
      default: ''
    },
    size: { // marker大小
      type: Array,
      default: function() {
        return [16, 28]
      }
    },
    anchor: { // 位移
      type: Array,
      default: function() {
        return [8, 28]
      }
    },
    popupTemplate: {
      type: String,
      default: '<div>hello test</div>'
    },
    popupAnchor: { // 弹窗位移
      type: Array,
      default: function() {
        return [0, -14]
      }
    },
    visible: {
      type: Boolean,
      default: true
    },
    icon: { // 图标
      type: String,
      default: 'http://satellite.casm.ac.cn:8020/geowinmap/pages/labsl/module/base/images/marker.png'
    },
    massClear: { // 全部清除
      type: Boolean,
      default: false
    },
    top: { // 是否置顶
      type: Boolean,
      default: false
    },
    zIndex: { // zindex
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      showInfoWindow: false
    }
  },
  watch: {
    visible(val, oldVal) {
      if (!val === oldVal) {
        if (val) { // 需要显示
          // this.load()
        } else { // 需要隐藏

        }
      }
    },
    showInfoWindow(val) {
      if (val) {
        this.showInfoWindow()
      } else {
        this.closeInfoWindow()
      }
    }
  },
  methods: {
    load() {
      console.log('cmap Marker load function')
      const { mapLayers, position, size, icon, anchor, popupAnchor } = this
      if (this.marker) {
        mapLayers.removeOverlay(this.marker)
      }
      const options = {
        url: icon,
        size: size,
        anchor: anchor,
        popupAnchor: popupAnchor
      }
      const cmapIcon = createIcon(options)
      const opts = {
        icon: cmapIcon,
        title: this.title,
        draggable: false
      }
      // const overlay = new CMarker(new CLatLng(position.lat, position.lng), opts)
      const overlay = mapLayers.drawMarker(new CLatLng(position.lat, position.lng), opts)
      this.overlay = overlay
      CEvent.addListener(overlay, 'click', function() {
        console.log('click overlay')
        mapLayers.openInfoWindow()
        overlay.bindPopup("<div style='width:200px;height:100px;'>你好 ,Welcome to CASM </div>")
        overlay.openPopup()
        // overlay.bindPopup(popup)
        // overlay.openPopup()
      })
      // mapLayers.addOverlay(overlay)
    },
    changeInfoWindow() {
      console.log('changeInfoWindow')
      this.showInfoWindow = !this.showInfoWindow
    },
    openInfoWindow() {
      console.log('openInfoWindow')
      const { overlay, popupTemplate } = this
      overlay.bindPopup(popupTemplate)
      overlay.openPopup()
    },
    closeInfoWindow() {
      console.log('closeInfoWindow')
      const { overlay } = this
      overlay.closePopup()
    }
  }
}
</script>

<style scoped>

</style>