/**
 * 环境风险统计图
 */
// 请求接口数据
const mapApi = require('../../../api/mapApi').default
// 使用封装方法
const AnimalService = require('../service/AnimalService').default
// 引入echarts基本组件
const echarts = require('echarts/lib/echarts')

module.exports = function () {
  // 环形统计图数组
  let riskLayerGroup = null

  /**
   * 初始化图层数组
   * @param L leaflet对象
   */
  this.init = async (layer, L) => {
    this.animalService = new AnimalService({
      L: L,
      layer: layer
    })
  }

  /**
   * 加载图层
   * @returns {Promise<void>}
   */
  this.start = async () => {
    if (riskLayerGroup) { // 图层全选时，清理图层数组并重新加载
      riskLayerGroup.remove()
      riskLayerGroup = null
    }
    riskLayerGroup = this.animalService.L.featureGroup().addTo(this.animalService.layer)
    const result = await mapApi.getEnvironmentRisk()
    const features = result.features
    for (let i = 0; i < features.length; i++) {
      const feature = features[i]
      const geometry = feature.geometry
      const properties = feature.properties
      const qyId = properties.QY_ID
      const distract = properties.DISTRACT
      const coordinates = geometry.coordinates
      if (distract !== '长江沿线') {
        continue
      }
      this.animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: this.animalService.L.divIcon({
          className: '',
          iconAnchor: [15, 45],
          iconSize: [40, 40],
          html: '<div style="width: 40px; height: 40px; background-color: rgba(255,255,255,1); position: relative; border-radius: 50%;"></div>'
        })
      }).addTo(riskLayerGroup)
      this.animalService.L.marker([coordinates[1], coordinates[0]], {
        icon: this.animalService.L.divIcon({
          className: '',
          iconAnchor: [30, 60],
          iconSize: [70, 70],
          html: '<div id="qy_id_' + qyId + '" style="width: 70px; height: 70px; background-color: transparent; position: relative; border-radius: 50%;"></div>'
        })
      }).addTo(riskLayerGroup)
      chartRender(properties)
    }
  }

  /**
   * 清除图层
   */
  this.destory = () => {
    if (riskLayerGroup) {
      riskLayerGroup.remove()
      riskLayerGroup = null
    }
  }

  /**
   * Echarts环形饼图
   * @param properties
   */
  function chartRender (properties) {
    const qyId = properties.QY_ID
    const qyjc = properties.QY_JC
    const num = properties.QY_NUM
    const oneLevel = properties.QY_ONELEVEL
    const twoLevel = properties.QY_TWOLEVEL
    const threeLevel = properties.QY_THREELEVEL
    const o = echarts.init(document.getElementById('qy_id_' + qyId))
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: function (e) {
          return '<div style="background-color: #0c5460; padding: 5px;">' +
              '<div style="color: #63EEF5; font-size: 18px; font-weight: 500; text-align: center">' + qyjc + '</div>' +
              '<div>一级风险：<span style="color: red">' + oneLevel + '个</span></div>' +
              '<div>二级风险：<span style="color: yellow">' + twoLevel + '个</span></div>' +
              '<div>三级风险：<span style="color: lawngreen">' + threeLevel + '个</span></div>' +
              '</div>'
        }
      },
      color: ['red', 'yellow', 'lawngreen'], // 设置饼图各块颜色
      graphic: [ // 为环形图中间添加文字
        {
          type: 'text',
          left: 'center',
          top: '43%', // 设置环形文字的top位置
          style: {
            text: num,
            textAlign: 'center',
            fill: '#000',
            fontSize: 12
          }
        }],
      series: [{
        name: qyjc,
        type: 'pie',
        radius: ['35%', '65%'],
        label: {
          normal: {
            show: false,
            position: 'center',
            formatter: function (t) {
              return num
            },
            textStyle: {
              fontSize: 12,
              color: '#000000'
            }
          }
        },
        data: [{
          value: oneLevel,
          name: '一级风险'
        }, {
          value: twoLevel,
          name: '二级风险'
        }, {
          value: threeLevel,
          name: '三级风险'
        }]
      }]
    }
    o.setOption(option)
  }
}