import Taro, { Component } from '@tarojs/taro'
import echarts from '../ec-canvas/echarts'
import './style.scss'

function initChart(callback, options) {
  return function (canvas, width, height) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(chart);
    chart.setOption(options);
    callback && callback(chart);
    return chart;
  }
}

/**
 * 传入 source 的格式为 [{ name: xxx, value: xxx }, {}]
 */
export default class LineChart extends Component {
  config = {
    usingComponents: {
      "ec-canvas": "../ec-canvas/ec-canvas"
    }
  }

  // this.echart
  echart = null
  ecComponent = null

  state = {
    ec: { lazyLoad: true },
  }

  // 禁止 props 变更时渲染
  shouldComponentUpdate(nextProps) {
    console.log('------------>', this.props, nextProps)
    if (nextProps.source && nextProps.source.length) {
      this.refreshChart(this.props.source)
    }

    return false
  }

  handleEcComponent(ref) {
    this.ecComponent = ref
  }

  handleChart(chart) {
    this.echart = chart
  }

  createOptions(source = []) {
    const colorWithOpacity = op => `rgba(187,156,121, ${op})`

    const defaultOpt = {
      color: [colorWithOpacity(1)],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: '#666'
          }
        }

      },
      yAxis: {
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#666'
          }
        }
      },
      grid: {
        left: '10%',
        right: '8%',
        bottom: '10%',
        top: '6%',
      },
      series: [],
    }

    // 数据展示只展示 5 个
    const endValue = source.length - 1 > 0 ? source.length - 1 : 0
    const startValue = endValue - 5 > 0 ? endValue - 5 : 0

    return {
      ...defaultOpt,
      dataset: { source },
      dataZoom: [{ type: 'inside', startValue, endValue }],
      series: [{
        type: 'line',
        dimensions: ['name', 'value'],
        symbolSize: 6,
        smooth: true,
        label: {
          show: true,
          formatter: '{@value}人'
        },
        lineStyle: {
          shadowColor: colorWithOpacity(0.5),
          shadowBlur: 5,
          shadowOffsetY: 7
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: colorWithOpacity(0.2) // 0% 处的颜色
            }, {
              offset: 1, color: colorWithOpacity(0) // 100% 处的颜色
            }],
            global: false,
          }
        },
      }],
    }
  }

  refreshChart(source) {
    const options = this.createOptions(source)
    console.log(source,"source")
    if (!this.echart) {
      if (this.ecComponent) {
        const initFunc = initChart(this.handleChart.bind(this), options)
        this.ecComponent.init(initFunc)
      } else {
        console.warn('echart componet not ready')
      }
    } else {
      this.echart.setOption(options)
    }
  }

  render() {
    return (
      <View className="map-container">
        <ec-canvas ref={this.handleEcComponent} ec={this.state.ec}></ec-canvas>
      </View>
    )
  }
}
