<script>
import commonMixin from '@/base/mixins/common.js'
export default {
  name: 'bm-draw',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    type: {
      type: String
    },
    id: { type: String },
    name: { type: String },
    actived: {
      type: Boolean,
      default: false
    },
    layerSymbol: {
      type: Object,
      default: function () {
        return {
          fill: { color: 'rgba(255, 255, 255, 0.2)' },
          stroke: { color: '#ffcc33', width: 2 },
          image: { radius: 7, fill: '#ffcc33', stroke: '#ffcc33' }
        }
      }
    },
    drawSymbol: {
      type: Object,
      default: function () {
        return {
          fill: { color: 'rgba(255, 255, 255, 0.2)' },
          stroke: { color: '#ffcc33', width: 2, lineDash: [10, 10] },
          image: { radius: 7, fill: '#ffcc33', stroke: '#ffcc33' }
        }
      }
    },
    tip: {
      type: String,
      default: '单击绘制网格'
    }
  },
  data () {
    return {
      sketch: null,
      helpTooltipElement: null,
      helpTooltip: null
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
      this.helpTooltip.setPosition(null)
    }
  },
  methods: {
    createHelpTooltip () {
      const { ol, $rootComponent } = this
      if (this.helpTooltipElement) {
        this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement)
      }
      this.helpTooltipElement = document.createElement('div')
      this.helpTooltipElement.className = 'tooltip hidden'
      this.helpTooltip = new ol.Overlay({
        element: this.helpTooltipElement,
        offset: [15, 0],
        positioning: 'center-left'
      })
      $rootComponent.addOverlay(this.helpTooltip)
    },
    load () {
      const { ol, $rootComponent, id, name, tip, type, layerSymbol, drawSymbol, actived } = this
      var vector = $rootComponent.addLayer({ id, name })
      vector.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
          color: layerSymbol.fill.color
        }),
        stroke: new ol.style.Stroke({
          color: layerSymbol.stroke.color,
          width: layerSymbol.stroke.width
        }),
        image: new ol.style.Circle({
          radius: layerSymbol.image.radius,
          fill: new ol.style.Fill({
            color: layerSymbol.image.fill
          })
        })
      }))
      $rootComponent.$on('mousemove', (evt) => {
        if (evt.dragging) {
          return
        }
        if (this.actived) {
          /** @type {string} */
          var helpMsg = '单击开始绘制'
          // 判断绘制几何类型设置相应的帮助提示信息
          if (this.sketch) {
            helpMsg = tip
          }
          this.helpTooltipElement.innerHTML = helpMsg // 将提示信息设置到对话框中显示
          this.helpTooltip.setPosition([evt.lon, evt.lat]) // 设置帮助提示框的位置
        }
      })
      this.originInstance = new ol.interaction.Draw({
        source: vector.getSource(), // 绘制层数据源
        type: type/** @type {ol.geom.GeometryType} */,
        style: new ol.style.Style({ // 绘制几何图形的样式
          fill: new ol.style.Fill({
            color: drawSymbol.fill.color
          }),
          stroke: new ol.style.Stroke({
            color: drawSymbol.stroke.color,
            lineDash: drawSymbol.stroke.lineDash,
            width: drawSymbol.stroke.width
          }),
          image: new ol.style.Circle({
            radius: drawSymbol.image.radius,
            stroke: new ol.style.Stroke({
              color: drawSymbol.image.stroke
            }),
            fill: new ol.style.Fill({
              color: drawSymbol.image.fill
            })
          })
        })
      })
      // 绑定交互绘制工具开始绘制的事件
      this.originInstance.on('drawstart', (evt) => {
        // set sketch
        this.sketch = evt.feature // 绘制的要素
      })
      $rootComponent.addInteraction(this.originInstance, actived)
      this.createHelpTooltip()
      this.originInstance.on('drawend', (evt) => {
        this.sketch = null // 置空当前绘制的要素对象
        const feature = evt.feature
        const coods = feature.getGeometry().getCoordinates()
        this.$emit('drawend', coods)
      })
    }
  }
}
</script>
