<script>
import commonMixin from '../base/mixins/common.js'
import { GeometryType } from '../base/GeometryType.js'
import SymbolConfig from '../base/SymbolConfig.js'
import Draw, {createRegularPolygon, createBox} from 'ol/interaction/Draw'
import WKT from 'ol/format/WKT'
import { convertObjToStyle } from '../base/SymbolUtil.js'
import { fromCircle } from 'ol/geom/Polygon'
import turf_buffer from '@turf/buffer'
import turf_linestring from 'turf-linestring'
import turf_point from 'turf-point'
export default {
  name: 'sl-draw',
  render () { },
  mixins: [commonMixin('interaction')],
  props: {
    type: {
      type: String,
      default: GeometryType.POINT
    },
    id: { type: String },
    name: { type: String },
    actived: {
      type: Boolean,
      default: false
    },
    drawStyle: {
      type: Object,
      default: function () {
        return SymbolConfig['defaultDrawStyle']
      }
    }
  },
  data () {
    return {
    }
  },
  watch: {
    actived (flag) {
      this.originInstance.setActive(flag)
    },
    type (value) {
      this.reload()
    },
    drawStyle (value) {
      this.reload()
    }
  },
  methods: {
    load () {
      const { id, name, type, actived, map, $rootComponent, drawStyle } = this
      const wkt = new WKT()
      let geometryFunction
      let drawType = type
      if(drawType === GeometryType.SQUARE) {
        geometryFunction = createRegularPolygon(4)
        drawType = GeometryType.CIRCLE
      }
      if(drawType === GeometryType.BOX) {
        geometryFunction = createBox()
        drawType = GeometryType.CIRCLE
      }
      // 调用父组件方法添加图层=====
      // 添加无法拾取的标志----
      var drawLayer = $rootComponent.addLayer({ id, name })
      drawLayer.getSource().on('addfeature', function(event) {
             event.feature.set('drawMark', true)
      })
      // 实例化绘制组件======
      this.originInstance = new Draw({
        source: drawLayer.getSource(), // 绘制层数据源
        type: drawType/** @type {ol.geom.GeometryType} */,
        style: convertObjToStyle(drawStyle),
        geometryFunction
      })
      // 添加绘制交互组件----------------
      $rootComponent.addInteraction(this.originInstance, actived)
      // 添加绘制组件绘制完成后的回调函数----
      this.originInstance.on('drawend', (evt) => {
        // 清除上一次绘制的要素------
        drawLayer.getSource().clear()
        const feature = evt.feature
        let geometry = feature.getGeometry()
        const type = geometry.getType()
        let result = {}
        if (type === GeometryType.CIRCLE) {
          //  result.center = geometry.getCenter()
          //  result.radius = geometry.getRadius()
           geometry = fromCircle(geometry)
        } 
        if (type === GeometryType.POINT) {
           let point = turf_point(geometry.getCoordinates())
           result.buffer = turf_buffer(point, 0.03, {units: 'miles'}).geometry.coordinates.join(",")
        } 
        if (type === GeometryType.POLYLINE) {
           let line = turf_linestring(geometry.getCoordinates())
           result.buffer = turf_buffer(line, 0.03, {units: 'miles'}).geometry.coordinates.join(",")
        } 
        // else {
        //   result.wkt = wkt.writeGeometry(geometry)
        //   result.coods = geometry.getCoordinates()
        // }
        result.wkt = wkt.writeGeometry(geometry)
        result.coods = geometry.getCoordinates()
        result.type = type
        result.feature = feature
        result.extent = geometry.getExtent()
        this.$emit('drawend', result)
      })
    },
    finishDrawing() {
      this.originInstance.finishDrawing()
    },
    getOverlay () {
      return this.originInstance.getOverlay()
    },
    removeLastPoint () {
      his.originInstance.removeLastPoint()
    },
    clearDrawingFeatures () {
      this.originInstance.getOverlay().getSource().clear()
    }
  }
}
</script>
