// 核心库
import React, { Component } from 'react'
// 组件库
import { Search } from '@woowalker/feui'
import TableChart from './TableChart'

class LineBarChart extends Component {
  getLineBarChartOption = (option, chartType) => {
    // 解析出 echarts option 配置
    const { data = [], xAxis = [], yAxis = [] } = option || {}
    let tempXAxis = xAxis.map(item => ({ type: 'category', data: item.data }))
    let tempYAxis = yAxis.map(({ name, max, min, inverse }) => ({
      type: 'value',
      name,
      nameTextStyle: { align: 'left' },
      max,
      min,
      inverse
    }))
    let tempLegend = []
    let tempSeries = data.map(item => {
      const { name, type, stack, yAxisIndex, data: itemData = [] } = item
      tempLegend.push(name)
      return {
        name,
        type: type || (chartType === 0 ? 'line' : 'bar'),
        stack,
        data: itemData.map(seriesData => {
          return {
            value: seriesData.value || 0,
            TooltipValue: seriesData.TooltipValue
          }
        }),
        yAxisIndex
      }
    })

    // echarts 图表配置
    const chartOption = {
      legend: {
        top: '5%',
        textStyle: {
          color: '#333333'
        },
        data: tempLegend
      },
      grid: {
        left: '2%',
        right: '4%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: tempXAxis,
      yAxis: tempYAxis,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: (params) => {
          const title = params[0].axisValueLabel
          const body = params.map(item => {
            return `<div>${item.marker}${item.seriesName}：<span>${item.data.TooltipValue || item.data.value}</span></div>`
          }).join('')
          return `<div><div>${title}</div>${body}</div>`
        }
      },
      toolbox: {
        show: true,
        orient: 'vertical',
        right: 0,
        top: 'center',
        feature: {
          magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: tempSeries
    }

    // 单独提出 dataZoom，因为如果 xAxis 为空数组，dataZoom 的 xAxisIndex[0] 取值会报错
    if (chartOption.xAxis.length) {
      chartOption.dataZoom = [
        {
          type: 'inside',
          xAxisIndex: [0]
        }
      ]
    }
    return chartOption
  }

  render () {
    const { config, option, type, getChartData, loading } = this.props
    const {
      id,
      code,
      formCode
    } = config

    const chartOption = this.getLineBarChartOption(option, type)
    return (
      <>
        <Search
          formCode={formCode}
          onSearch={getChartData}
          code={code}
        />
        <TableChart
          chartId={id || formCode}
          option={chartOption}
          loading={loading.models['chartPage']}
          style={{ minHeight: 300 }}
        />
      </>
    )
  }
}

export default LineBarChart