<template>
 <div class="ol-popup" id="popup">
    <div class="ol-popup-title"> 
        <div class="ol-popup-h1">{{title}}</div>
        <div class="ol-popup-title-content">
           <slot name='title'>标题内容</slot>
        </div>
        <slot name='close'> 
          <div id="popup-closer" class="ol-popup-closer" @click="close"></div> 
        </slot>
    </div>
    <div class="ol-popup-content" id="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 () {//初始化的时候直接进入load方法
      const { position, id, $rootComponent } = this
      const $content = this.$el//ol-popup
      const overlay = new Overlay({
        id,
        element: $content,
        autoPan: true,
        positioning: 'bottom-center',
        stopEvent: true,
        autoPanAnimation: {
          duration: 500
        }
      })
      if (position) {
        const { lon, lat } = position
        if(lon && lat){
            overlay.setPosition([lon, lat])//重新设置位置
        }
      } 
      this.originInstance = overlay
      $rootComponent.addOverlay(overlay)//地图添加overlay
    },
    close() {
      this.originInstance.setPosition(undefined)
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
    .ol-popup
    {
      position:absolute;
      background-color:#fff;
      border-top-left-radius:5px;
      border-top-right-radius:5px;
      border:0px solid #ccc;
      bottom:12px;
      left:-50px;
      min-width:320px;
			min-height: 100px;
			box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }
  .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: #fff;
      border-width: 10px;
      left: 45px;
      margin-left: -10px;
    }
  .ol-popup:before {
      border-top-color: #fff;
      border-width: 11px;
      left: 45px;
      margin-left: -11px;
		}
  .ol-popup-title{
    position: relative;
    width:100%;
    height: 40px;
    line-height:40px;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
    border-bottom:1px solid #ccc;
    background-color:  #fff;
    box-sizing: border-box;
    text-align: left;
  }
  .ol-popup-h1 {
    float:left;
    font-size: 15px;
    font-weight: 600;
		margin-right: 20px;
		white-space: nowrap;
		overflow: hidden;
		width:auto;
		padding-left: 15px;
		text-overflow:ellipsis;
}
 .ol-popup-title-content{
    float:left;
  }
  .ol-popup-closer
  {
      text-decoration:none;
      float:right;
		  color: #000!important;
		  width: 40px;
		  height: 40px;
		  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABvUlEQVRYR+3Wv2sVQRTF8U9U0EIQyzQp7QyihWkMaURBBFsD2ohYCqKl+AdoIGWw8AdiY6OFgiCItoIWopWdTTpFsDBFSBjZhc2yM3c2IaR52757zvnuvTN735Q9fqb2ON8EYNKBmg5M4xLe4GfloZ3BBbzCakkTAZzERxzGGs7jQwCRalLwQfzFAj7nNCWAFP4eRzriCKIb3sr+YB5fhyByAMfwqRfe6nMQQ+Gt5hfm8KMPkQNYwq1Cq/sQpfDWJnnergW4gZVg1i3Eoc7MS5Lk+bAWIHXmCa4GEP/4/zVNB670PMY1bNQCpLpaiOhmZsPbkOia1nQi51EMrwHYSSfC8FqA7UBUhY8BSLWz+IL9wdDXcQLfosMxBuB480k+WmOK3ziD71F9tAuSfmx4m1kFEQFsN7waogSw0/AqiBzAKbxDNPO7OIB7wazTOE6PWUbLuBmY3sGDpub+0KLp6Ucto7N4i30ZiG54W1KCSDvgXNPVLZalM3AFT5ud0BUNhZcgUnjyej70MtEtuN5boaXwHETago9y44wAku4iFvESL6IPS/P75eaP7DO8jrZdpefulNV0YHeSG9cJwCaKVlgh8+KwBwAAAABJRU5ErkJggg==');
		  background-size: 50% 50%;
		  background-repeat: no-repeat;
		  background-position: 50% 50%;
		  cursor: pointer;
		}
	.ol-popup-closer:hover{
		background-size: 60% 60%;
	}
  .ol-popup-content
    {
      font-size:14px;
		  font-family:"微软雅黑";
		}
</style>