<template>
  <div id="popup" class="ol-popup" ref="popup">
    <a href="#" id="popup-closer" class="ol-popup-closer" @click="close" ref="closer"></a>
    <div id="popup-content" ref="content">
      <slot>
        只有在没有要分发的内容时才会显示。
      </slot>
    </div>
  </div>
</template>
<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bs-info-window',
  render () { },
  mixins: [commonMixin('overlay')],
  props: {
    position: {
      type: Object
    },
    id: {
      type: String,
      require: true
    }
  },
  watch: {
    position (val) {
      const { lon, lat } = val
      this.originInstance.setPosition([lon, lat])
    }
  },
  methods: {
    load () {
      const { ol, position, id, $rootComponent } = this
      const $content = this.$el
      const overlay = new ol.Overlay({
        id,
        element: $content,
        autoPan: false,
        positioning: 'bottom-center',
        stopEvent: false,
        autoPanAnimation: {
          duration: 250
        }
      })
      if (position) {
        const { lon, lat } = position
        overlay.setPosition([lon, lat])
      }
      this.originInstance = overlay
      $rootComponent.addOverlay(overlay)
    },
    close () {
      this.originInstance.setPosition(undefined)
      var closer = this.$refs.closer
      closer.blur()
      return false
    }
  }
}
</script>
<style scoped>
.ol-popup {
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 12px;
  left: -50px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: "✖";
}

#popup-content {
  font-size: 14px;
  font-family: "微软雅黑";
}

#popup-content .markerInfo {
  font-weight: bold;
}
</style>
