<script>
import commonMixin from '@/base/mixins/common.js'
import { GeometryType } from '@/base/GeometryType.js'
import SymbolConfig from '@/base/SymbolConfig.js'
import {getSybmol,
_makeUpIconStyle,
_makeUpTextStyle,
_makeUpStrokeStyle,
_makeUpFillStyle,
_makeUpCircleStyle} from '@/base/SymbolUtil.js'
export default {
  name: 'bs-draw',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    type: {
      type: String,
      default: GeometryType.POINT
    },
    id: { type: String },
    name: { type: String },
    actived: {
      type: Boolean,
      default: false
    },
    layerStyle: {
      type: Object,
      default: function () {
        return SymbolConfig['defaultDrawStyle']
      }
    },
    drawStyle: {
      type: Object,
      default: function () {
        return SymbolConfig['defaultDrawStyle']
      }
    }
  },
  data () {
    return {
      sketch: null
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
    },
    type (value) {
      this.reload()
    },
    drawStyle (value) {
      this.reload()
    },
    layerStyle(value) {
      this.reload()
    }
  },
  methods: {
    load () {
      const { ol, $rootComponent, id, name, type, layerStyle, actived } = this
      if (this.originInstance) {
        $rootComponent.removeInteraction(this.originInstance)
      }
      const wkt = new ol.format.WKT()
      var vectorLayer = $rootComponent.addLayer({ id, name })
      var layerS = getSybmol(type, layerStyle)
      vectorLayer.setStyle(layerS)
      var drawS = (feature) => {
        return this.getDrawSymbol(feature)
      }
      this.originInstance = new ol.interaction.Draw({
        source: vectorLayer.getSource(), // 绘制层数据源
        type: type/** @type {ol.geom.GeometryType} */,
        style: drawS
      })
      // 绑定交互绘制工具开始绘制的事件
      this.originInstance.on('drawstart', (evt) => {
        this.sketch = evt.feature // 绘制的要素
      })
      $rootComponent.addInteraction(this.originInstance, actived)
      this.originInstance.on('drawend', (evt) => {
        this.sketch = null // 置空当前绘制的要素对象
        const feature = evt.feature
        const coods = feature.getGeometry().getCoordinates()
        const type = feature.getGeometry().getType()
        const wktGeom = wkt.writeGeometry(feature.getGeometry())
        this.$emit('drawend', { wkt: wktGeom, coods, type })
        // console.log(wktGeom + ':' + coods)
      })
    },
    getDrawSymbol (feature) {
      const { ol, drawStyle } = this
      var pointSymbol = null
      var drawSymbol = null
      if (!drawStyle) {
        drawSymbol = SymbolConfig.defaultDrawStyle
      } else {
        drawSymbol = drawStyle
      }
      if (drawSymbol.iconStyle && drawSymbol.iconStyle.url) {
        pointSymbol = new ol.style.Style({
          image: _makeUpIconStyle(drawSymbol.iconStyle),
          text: _makeUpTextStyle(drawSymbol.textStyle)
        })
      } else if (drawSymbol.circleStyle) {
        pointSymbol = new ol.style.Style({
          image: _makeUpCircleStyle(drawSymbol.circleStyle)
        })
      } else {
        pointSymbol = new ol.style.Style({
          image: _makeUpCircleStyle(SymbolConfig.defaultDrawStyle.circleStyle)
        })
      }
      if (!drawSymbol.fillColor) {
        drawSymbol.fillColor = SymbolConfig.defaultDrawStyle.fillColor
      }
      var polygonSymbol = new ol.style.Style({
        fill: _makeUpFillStyle(drawSymbol.fillColor)
      })
      if (!drawSymbol.strokeStyle) {
        drawSymbol.strokeStyle = SymbolConfig.defaultDrawStyle.strokeStyle
      }
      var lineSymbol = new ol.style.Style({
        stroke: _makeUpStrokeStyle(drawSymbol.strokeStyle)
      })
      var styles = []
      if (feature.getGeometry().getType() === 'Point') {
        styles.push(pointSymbol)
      } else if (feature.getGeometry().getType() === 'Polygon') {
        styles.push(polygonSymbol)
      } else {
        styles.push(lineSymbol)
      }
      return styles
    }
  }
}
</script>
