import L from 'leaflet'
import eventBus from '@/eventBus'

class DrawLine {
  constructor (map) {
    this.points = []
    this.color = 'red'
    this.layers = L.layerGroup()
    this.polyline = null
    this.marker = null
    this.points = []
    this.polyline = null
    this.marker = null
    this.map = map
  }

    init = () => {
      this.map.on('click', this.click)
      this.map.on('mousemove', this.mousemove)
      this.map.on('dblclick', this.dbClick)
    }

    click = (e) => {
      this.map.doubleClickZoom.disable()
      this.points.push(e.latlng)
      if (this.points.length > 1) {
        this.dbClick()
      }
    }

    mousemove = (e) => {
      this.points.push(e.latlng)
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      this.polyline = L.polyline(this.points, { showMeasurements: true, color: 'red' })
      this.polyline.addTo(this.layers)
      this.layers.addTo(this.map)
      this.points.pop()
    }

    dbClick = (e) => {
      console.log('双击结束', e)
      this.polyline.addTo(this.layers)
      // this.close(e.latlng);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      console.log(this.points)
      eventBus.$emit('draw-hdm-line', this.points)
    }

    destory () {
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      if (this.marker) { this.marker.remove() }
      this.points = []
      this.layers.clearLayers()
    }
}

export default DrawLine