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

function initChart(options, callback) {
  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;
  }
}

function createLineOptions(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: '12%',
      top: '15%',
    },
    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,
      show: true,
    }],
    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,
        }
      },
    }],
  }
}

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

  // this.ecComponent
  chart = null;
  ecComponent = null

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

  componentDidShow() {
    this.setState({ isDisposed: false })
  }

  componentDidHide() {
    this.setState({ isDisposed: true })
  }

  componentDidMount() {
    this.ecComponent = this.$scope.selectComponent(`#${this.props.lid}`)
    this.init(this.props)
  }

  componentWillReceiveProps(nextProps) {
    // 简单优化, 不显示的组件不更新
    // 但是有个 bug 。如果此时有 props 更新, 会导致页面绘制的数据错误
    if (this.state.isDisposed) return

    // 简单的性能优化, 只有数据改变了才重新绘图
    if (JSON.stringify(nextProps.source) != JSON.stringify(this.props.source)) {
      this.init(nextProps)
    }
  }

  init = (props) => {
    const tk = setTimeout(() => {
      if (this.ecComponent && props.source && props.source.length) {
        const options = createLineOptions(props.source)
        this.ecComponent.init(initChart(options, chart => (this.chart = chart)))
      }

      clearTimeout(tk)
    }, 500)
  }

  render() {
    return (
      <View style="width:100vw;height:480rpx;position: relative;">
        <View className="map-container">
          <ec-canvas id={this.props.lid} ec={this.state.ec}></ec-canvas>
        </View>
      </View>
    )
  }
}
