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

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 = {}

  componentDidMount() {
    this.ecComponent = this.$scope.selectComponent('#mychart-dom-bar')
    this.init(this.props)
  }

  componentWillReceiveProps(nextProps) {
    this.resetData(nextProps)
  }

  init = (props) => {
    if (!this.ecComponent) {
      console.log('-==-------no ecComponent---------')
      return
    }

    let options;
    if (props.source && props.source.length) {
      options = createLineOptions(props.source)
    }
    
    this.ecComponent.init((canvas, width, height) => {
      const chart = echarts.init(canvas, null, { width, height });
      canvas.setChart(chart);

      if (options) {
        chart.setOption(options);
      }

      this.chart = chart  
      return chart;
    })
  }
 
  resetData(props) {
    // console.log('----------------->', props)
    if (this.chart) {
      const options = createLineOptions(props.source)
      this.chart.setOption(options);
    }
  }

  render() {
    const ec = { lazyLoad: true }

    return (
      <View style="width:100vw;height:480rpx;position: relative;">
        <View className="map-container">
          <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"  ec={ec}></ec-canvas>
        </View>
      </View>
    )
  }
}
