
<template>
  <!-- 地图联动弹出层组件 -->
  <div :ref="event" v-if=" disable" class="map-tips" :style="style">
    <slot :properties="properties"></slot>
  </div>
</template>
<script>
const placement = ['top-start', 'top', 'top-end']
export default {
  name: 'mapTips',
  props: {
    // 监听的事件,事件以map-为前缀
    event: {
      type: String,
      default: null
    },
    // 位置偏移
    offset: {
      type: Object,
      default: () => {
        return { x: 0, y: 0 }
      }
    },
    // 暂未开发，自动计算显示的位置
    placement: {
      type: String,
      default: 'top-right'
    },
    // 显示到屏幕指定的精确位置，fixed
    point: {
      type: Object,
      default: () => {
        return { x: 0, y: 0 }
      }
    },
    // 事件前缀
    eventPrefix: {
      type: String,
      default: 'map-'
    },
    // 是否始终显示
    show: {
      type: Boolean,
      default: false
    }
  },
  mounted() {
    const vm = this
    if (vm.event) {
      const event = vm.eventPrefix + vm.event
      vm.$bus.$on(event, ({ point, properties, disable }) => {
        console.log(event, properties)
        if (disable) {
          vm.properties = properties
          vm.point2 = point || vm.point2
        }
        vm.disable = vm.show ? true : disable //disable
      })
    }
  },
  data() {
    return {
      point2: { x: 0, y: 0 },
      style: { top: 0, left: 0 },
      disable: false,
      properties: {}
    }
  },
  methods: {
    getPoint() {
      let point = this.point2
      if (this.offset) {
        point.x += this.offset.x
        point.y += this.offset.y
      }
      return point
    },
    // 根据配置计算弹出位置
    getStyle(n, o) {
      if (n != o) {
        let point = this.point
        if (event) {
          point = this.getPoint()
        }
        this.style = {
          top: point.y + 'px',
          left: point.x + 'px'
        }
      }
    }
  },
  watch: {
    point2: {
      handler(n, o) {
        return this.getStyle(n, o)
      },
      deep: true
    },
    point: {
      handler(n, o) {
        return this.getStyle(n, o)
      },
      deep: true
    }
  }
}
</script>
<style lang="css" scoped>
.map-tips {
  background: transparent;
  position: fixed;
  color: #fff;
  z-index: 100;
}
</style>
