<template>
  <div class="contextmenu">
    <ul>
      <li> 缩放至 </li>
      <span class="menuLine"></span>
      <li> 设置此位置为中心点 </li>
    </ul>
  </div>
</template>
<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bs-menu',
  render () { },
  mixins: [commonMixin('overlay')],
  methods: {
    load () {
      const { ol, $rootComponent } = this
      const $content = this.$el
      const overlay = new ol.Overlay({
        element: $content,
        autoPan: false,
        positioning: 'bottom-center',
        stopEvent: false,
        autoPanAnimation: {
          duration: 250
        }
      })
      this.originInstance = overlay
      $rootComponent.addOverlay(overlay)
      $rootComponent.getViewport().addEventListener('contextmenu', function (event) {
        event.preventDefault() // 屏蔽自带的右键事件
        // var pixel = [event.x, event.y]
        var coordinate = $rootComponent.getEventCoordinate(event)
        overlay.setPosition(coordinate)
        // const flag = $rootComponent.hasFeatureAtPixel(pixel)
        // if (flag) {
        //   map.forEachFeatureAtPixel(pixel, function (feature) {
        //     if (feature) {
        //       var coordinate = $rootComponent.getEventCoordinate(event)
        //       overlay.setPosition(coordinate)
        //     }
        //   })
        // }
      })
      $rootComponent.getViewport().addEventListener('click', function (event) {
        event.preventDefault()
        overlay.setPosition(undefined)
      })
    }
  }
}
</script>
<style scoped>
.contextmenu {
  position: absolute;
  top: 100%;
  width: 180px;
  height: auto;
  z-index: 9;
  background-color: #ffffff;
}

.contextmenu ul {
  width: 100%;
  padding: 6px 2px 0 2px;
  list-style: none;
}

.contextmenu>ul>li {
  width: 100%;
  text-align: center;
  padding: 5px 0;
}

.contextmenu>ul>li:hover {
  background-color: rgba(255, 0, 0, 0.5);
}
</style>
