@inject('commonStore', 'reportUIStore')

@observer

class LineEcharts extends React.Component<Props> {

  drawChart = () => {

    const { nameArr } = this.props

    const option = {

      tooltip: {

        trigger: 'axis',

        axisPointer: {

          lineStyle: {

            color: 'rgba(24,144,255,0.2)',

          },

        },

        formatter: (params: Params) => {

          let tip = ``

          if (params.length) {

            tip += params[0].axisValue + '<br/>'

          }

          if (params.length && params.length === 1) {

            tip +=

              params[0].marker +

              params[0].seriesName +

              ' ：' +

              params[0].data +

              '<br>'

          }

          if (params.length > 1) {

            let num = params[0].data - params[1].data

            let rate = ((num / params[1].data) * 100).toFixed(2)

            if (num === 0) {

              rate = `0%`

            } else {

              rate = `${rate}%`

            }

            for (let i = 0; i < params.length; i++) {

              if (nameArr && nameArr.length) {

                params[i].seriesName = nameArr[i]

                tip +=

                  params[i].marker +

                  params[i].seriesName +

                  ' ：' +

                  params[i].data +

                  '<br>'

              }

            }

            tip += `变化：${num}（${rate}）`

          }

          return tip

        },

      },

      grid: {

        left: '3%',

        right: '6%',

        bottom: '10%',

        containLabel: true,

      },

      xAxis: {

        axisLabel: {

          textStyle: {

            color: '#999',

          },

        },

        type: 'category',

        boundaryGap: true,

        data: range(24).map(hour => `${hour}:00`),

        axisTick: {

          show: false,

        },

        axisLine: {

          show: true,

          lineStyle: {

            color: '#ccc',

            width: 1,

          },

        },

      },

      yAxis: [

        {

          type: 'value',

          name: '',

          min: 0,

          max: 12000,

          interval: 3000,

          axisLabel: {

            formatter: '{value}',

          },

          axisTick: {

            show: false,

          },

          axisLine: {

            show: true,

            lineStyle: {

              color: '#ccc',

              width: 1,

            },

          },

          splitLine: {

            show: true,

            lineStyle: {

              color: '#eee',

            },

          },

        },

        {

          type: 'value',

          name: '',

          min: 0,

          max: 150,

          interval: 50,

          axisLabel: {

            formatter: '{value}',

          },

          axisTick: {

            show: false,

          },

          axisLine: {

            show: true,

            lineStyle: {

              color: '#ccc',

              width: 1,

            },

          },

          splitLine: {

            show: true,

            lineStyle: {

              color: '#eee',

            },

          },

        },

      ],

    series: this.handlData,

    }

    return option

  }

// 注意这儿： 添加了get 错误消失了

 get handlData() {

    let series: Series[] = []

    let { dataArr, nameArr, colors } = this.props

    dataArr.map((itm, i) => {

      let serie = {

        name: nameArr[i],

        type: 'line',

        symbol: 'circle',

        color: colors[i],

        symbolSize: 4,

        itemStyle: {

          normal: {

            lineStyle: {

              width: 2,

              color: colors[i],

            },

          },

        },

        data: dataArr[i],

      }

      series.push(serie)

    })

    return series

  }

  render() {

    return (

      <div>

        <Loading loading={false}>
　　　　　　　// 如果serie需要自定义，而且是可添加或删减的，可以使用 notMerge  使之不合并，从而及时更新数据

            <ReactEcharts notMerge  option={this.drawChart()} />  

       </Loading>

      </div>

    )

  }

}

export default LineEcharts

export interface Props {

  reportUIStore?: ReportUIStore

  dataArr: number[][]

  nameArr: string[]

  colors: string[]

}

export interface Params {

  param: ParamsSingle[]

  length: number

}

export interface ParamsSingle {

  seriesName: string

  // 数据名，类目名

  name: string

  // 传入的原始数据项

  data: Object

  // 数据图形的颜色

  color: string

  marker: string

}

export interface Series {

    name: string,

    type: string,

    symbol: string,

    color: string,

    symbolSize: number,

    itemStyle: {

        normal: {

        lineStyle: {

            width: number,

            color: string

        }

        }

    },

    data: number[],

}