/* 基本柱状图 */
import Echart from '../echart'

class LiquidFill extends Echart {
  constructor(layer, screen) {
    super(layer, screen)
  }
  /**
   * 传入已经处理的表格数据，更新图表视图
   */
  setPaint() {
    let newPaint = this._mergePaint()
    if (this.originalData && this.originalData.length !== 0) {
      if (Number.isNaN(+newPaint.value)) {
        newPaint.value = this.originalData[0][newPaint.value] || 0
      }
      if (Number.isNaN(+newPaint.total)) {
        newPaint.total = this.originalData[0][newPaint.total] || 0
      }
    } else {
      newPaint.value = +newPaint.value || 20
      newPaint.total = +newPaint.total || 100
    }
    if (!newPaint.total > 0) {
      // 总数小于等于0
      console.warn('水球图：总数字段对应的值应为正数。')
    }
    let chartSize =
      this.layer.layout.width < this.layer.layout.height
        ? this.layer.layout.width
        : this.layer.layout.height
    let ratio = newPaint.value / newPaint.total
    let chartOption = {
      series: [
        {
          type: 'liquidFill',
          radius: '90%',
          backgroundStyle: {
            color: 'rgba(0,0,0,0)'
          },
          data: [
            {
              value: ratio,
              itemStyle: {
                color: newPaint.color,
                opacity: 0.4
              },
              emphasis: {
                itemStyle: {
                  color: newPaint.color,
                  opacity: 0.4
                }
              }
            },
            {
              value: ratio - 0.1,
              itemStyle: {
                color: newPaint.color,
                opacity: 0.6
              },
              emphasis: {
                itemStyle: {
                  color: newPaint.color,
                  opacity: 0.6
                }
              }
            }
          ],
          outline: {
            borderDistance: chartSize / 25,
            itemStyle: {
              borderColor: newPaint.color,
              borderWidth: chartSize / 25
            }
          },
          label: {
            show: true,
            color: newPaint.labelColor || newPaint.color,
            fontSize: newPaint.labelSize || chartSize / 4
          }
        }
      ]
    }
    this._render(chartOption)
  }
}

export default LiquidFill
