<template>
  <div  class="ol-popup" >
    <div>
      <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: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      if (position) {
        const { lon, lat } = position
        overlay.setPosition([lon, lat])
      }
      this.originInstance = overlay
      $rootComponent.addOverlay(overlay)
    }
  }
}
</script>
<style scoped>
.ol-popup {
  position: absolute;
  -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));
  border-radius: 5px;
  bottom: 12px;
  left: -50px;
}
</style>
