<template>
 <div class="ol-popup">
    <div class="ol-popup-title"> <h1 class="ol-popup-h1">{{title}}</h1> <a class="ol-popup-closer" @click="close">✖</a></div>
    <div class="ol-popup-content">
       <slot>显示对话框内容</slot>
    </div>
  </div>
</template>
<script>
import commonMixin from '../base/mixins/common.js'
import Overlay from 'ol/Overlay'
export default {
  name: 'sl-info-window',
  render () { },
  mixins: [commonMixin('overlay')],
  props: {
    position: {
      type: Object 
    },
    title: {
      type: String,
      default: '属性'
    },
    id: {
      type: String,
      require: true
    }
  },
  watch: {
    position (val) {
      const { lon, lat } = val
      if(lon && lat) {
         this.originInstance.setPosition([lon, lat])
      } else {
         this.originInstance.setPosition(undefined)
      } 
    }
  },
  methods: {
    load () {
      const { position, id, $rootComponent } = this
      const $content = this.$el
      const overlay = new Overlay({
        id,
        element: $content,
        autoPan: true,
        positioning: 'bottom-center',
        stopEvent: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      if (position) {
        const { lon, lat } = position
        if(lon && lat){
            overlay.setPosition([lon, lat])
        }
      } 
      this.originInstance = overlay
      $rootComponent.addOverlay(overlay)
    },
    close() {
      this.originInstance.setPosition(undefined)
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
    .ol-popup
        {
            position:absolute;
            background-color:#E0E0E0;
            border-top-left-radius:10px;
            border-top-right-radius:10px;
            border:1px solid #ACD6FF;
            bottom:12px;
            left:-50px;
            min-width:270px;
            min-height: 100px;
         }
    .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: #84C1FF;
            border-width: 10px;
            left: 45px;
            margin-left: -10px;
        }
    .ol-popup:before {
            border-top-color: #84C1FF;
            border-width: 11px;
            left: 45px;
            margin-left: -11px;
        }
    .ol-popup-title{
           width:100%;
           height: 30px;
           border-top-left-radius:10px;
           border-top-right-radius:10px;
           border-bottom:1px solid #ACD6FF;
           background-color:	#84C1FF;
         }
     .ol-popup-h1 {
        font-size: 13px;
        display: inline-block;
        margin: 0;
        line-height: 20px;
        margin-left: 5px;
        }
    .ol-popup-closer
        {
          text-decoration:none;
          float:right;
          margin-right: 6px;
          margin-top: 3px;
          color: #000!important;
        }
    .ol-popup-content
        {
          font-size:14px;
          font-family:"微软雅黑";
        }
</style>