/**
 * 经纬度坐标拾取控件
 */
class GeolocateInfoControl {
  toText(lngLat) {
    return '经度：' + lngLat.lng.toFixed(6) + ', 纬度：' + lngLat.lat.toFixed(6)
  }

  onAdd(map) {
    this.map = map
    this.container = document.createElement('div')
    this.container.className = 'mapboxgl-ctrl mapboxgl-ctrl-lnglat'
    this.container.textContent = this.toText(map.getCenter())

    // 鼠标移动，显示经纬度信息
    map.on('mousemove', e => {
      const element = this.container
      element.textContent = this.toText(e.lngLat)
    })

    // 创建一个 Marker 实例
    const popup = new mapboxgl.Popup({ offset: 25, closeOnClick: false, closeButton: false })
      .setLngLat(map.getCenter())
      .setText(this.toText(map.getCenter()))
      .addTo(map)
    const marker = new mapboxgl.Marker().setLngLat(map.getCenter()).addTo(map)

    // 创建一个存储经纬度的容器，用于复制功能
    const textarea = document.createElement('textarea')
    textarea.id = 'geolocate-info'
    document.body.appendChild(textarea)

    // 监听地图点击事件，复制经纬度
    map.on('click', e => {
      const lonlat = this.toText(e.lngLat)

      // 更新 marker 的位置
      popup.setLngLat(e.lngLat).setText(lonlat)
      marker.setLngLat(e.lngLat)

      // 更新 textarea 的内容
      textarea.textContent = lonlat.replace('经度：', '').replace('纬度：', '')
      textarea.select()
      // 执行复制命令
      document.execCommand('Copy')
    })

    return this.container
  }

  onRemove() {
    this.container.parentNode.removeChild(this.container)
    this.map = undefined
  }
}
