const SVG_NS = 'http://www.w3.org/2000/svg'


// 自定义环状饼图 - 继承DOMOverlay
class Donut extends TMap.DOMOverlay {
  constructor(options) {
    super(options)
  }

  // 初始化：获取配置参数
  onInit({
           position,
           data,
           minRadius = 0,
           maxRadius = 50,
         } = {}) {
    Object.assign(this, {
      position,
      data,
      minRadius,
      maxRadius,
    })
  }

  // 创建DOM元素，返回一个Element，使用this.dom可以获取到这个元素
  createDOM() {
    let svg = document.createElementNS(SVG_NS, 'svg')
    svg.setAttribute('version', '1.1')
    svg.setAttribute('baseProfile', 'full')

    let r = this.maxRadius
    svg.setAttribute('viewBox', [-r, -r, r * 2, r * 2].join(' '))
    svg.setAttribute('width', r * 2)
    svg.setAttribute('height', r * 2)
    svg.style.cssText = 'post:absolute;top:0px;left:0px;'

    let donut = createDonut(this.data, this.minRadius, this.maxRadius)
    svg.appendChild(donut)

    return svg
  }

  // 更新DOM元素，在地图移动/缩放后执行
  updateDOM() {
    if (!this.map) {
      return
    }

    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position)

    // 使饼图中心点对齐经纬度坐标点
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px'
    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px'
    this.dom.style.transform = `translate(${left}, ${top})`
  }

  // 销毁时
  onDestroy() {}
}
