import Widget from './widget'
import Dom from '../libs/dom'
import theme from '../constants/theme'

class Echart extends Widget {
  constructor(layer, screen) {
    super(layer, screen)
    if (typeof echarts !== 'object') {
      throw new Error(
        `Error in component "${this.name}(${this.id})": "echarts" is undefined, make sure you have the echarts library`
      )
    }
    this.container = Dom.createElement('div', 'chart-container comp', this.el)
    Dom.css(this.container, {
      width: this.el.style.width,
      height: this.el.style.height
    })
    var myChart = echarts.init(this.container, theme)
    this.instance = myChart
    this.on('resize', () => {
      this.resize()
    })
  }

  resize() {
    Dom.css(this.el.getElementsByClassName('chart-container')[0], {
      width: this.el.style.width,
      height: this.el.style.height
    })
    this.instance.resize()
  }

  _initPaint() {
    // 重构
    this.setListener()
    let paint = this.processPlaceholder(this.layer.paint) // 处理paint选项中的占位符
    this.reduceData(paint) // 将表格数据处理成图表组件可用的数据
    return paint
  }

  _render(option) {
    this.instance.setOption(option, true)
    this.fire('render', this)
  }
}

export default Echart
