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

function getPieChartOption (option) {
  /**
   * 解析出 echarts option 配置
   * 其中 data 的数据结构为：
   * data: [
   *  {
   *    yAxisIndex: '',
   *    data: [
   *      {
   *        value: '',
   *        data: { head: [], data: [] }
   *      }
   *    ]
   *  }
   * ]
   * 详见 ChartComponent/index.js 的设置
   */
  const { title, data = [], xAxis = [] } = option
  let tempLegend = xAxis[0] ? (xAxis[0].data || []) : []
  let tempSeries = tempLegend.map((item, index) => {
    const presetData = { value: 0, data: { head: [], data: [] } }
    const sourceData = data[0] && data[0].data ? (data[0].data[index] || presetData) : presetData
    // 配置富文本 label: { formatter, rich }
    const {
      head: richLabelHead = [],
      data: richLabelData = []
    } = sourceData.data || presetData.data
    let richLabel = {}
    if (richLabelHead.length) {
      const richHead = richLabelHead.map(rh => (`{head|${rh}}`))
      const richRow = []
      richLabelData.forEach(rd => {
        if (rd && rd.length) {
          const row = rd.map(child => (`{row|${child}}`))
          richRow.push(row.join(''))
        }
      })
      /**
       * formatter: [
       *  '{title|{b}}{abg|}',
       *  '{head|标题1}{head|标题2}{head|标题3}',
       *  '{hr|}'
       *  '{row|文章1}{row|文章2}{row|文章3}'
       *  '{row|文章1}{row|文章2}{row|文章3}'
       * ]
       * {b} 取的是 tooltip.formatter 的值
       * 其余例如：title, hr, head, row 都是 rich 的配置，详见 echarts 富文本标签
       */
      const formatter = [
        '{title|{b}}{abg|}',
        richHead.join(''),
        '{hr|}',
        ...richRow
      ].join('\n')
      richLabel = {
        formatter,
        backgroundColor: '#eee',
        borderColor: '#777',
        borderWidth: 1,
        borderRadius: 4,
        rich: {
          title: {
            color: '#eee',
            align: 'center'
          },
          abg: {
            backgroundColor: '#333',
            width: '100%',
            align: 'right',
            height: 25,
            borderRadius: [4, 4, 0, 0]
          },
          hr: {
            borderColor: '#777',
            width: '100%',
            borderWidth: 0.5,
            height: 0
          },
          head: {
            width: 40,
            padding: [2, 5, 2, 5],
            align: 'center',
            color: '#0c0c0c'
          },
          row: {
            width: 40,
            padding: [2, 5, 2, 5],
            align: 'center',
            color: '#171313'
          }
        }
      }
    }
    return {
      name: item,
      value: sourceData.value,
      label: richLabel
    }
  })

  // echarts 图表配置
  return {
    legend: {
      type: 'scroll',
      top: '8%',
      textStyle: {
        color: '#333333'
      },
      data: tempLegend
    },
    tooltip: {
      trigger: 'item',
      formatter: ['{a}', '{b}', '{c}({d}%)'].join('<br />')
    },
    series: [
      {
        name: title,
        type: 'pie',
        top: '20%',
        radius: [0, '60%'],
        label: {
          formatter: ['{b}'].join('\n')
        },
        data: tempSeries
      }
    ]
  }
}

class PieChart extends Component {
  render () {
    const { config, option, getChartData, loading } = this.props
    const {
      code,
      formCode
    } = config

    const chartOption = getPieChartOption(option)
    return (
      <>
        <Search
          formCode={formCode}
          onSearch={getChartData}
          code={code}
        />
        <TableChart
          type={2}
          option={chartOption}
          loading={loading.models['chartPage']}
          style={{ minHeight: 300 }}
        />
      </>
    )
  }
}

export { getPieChartOption }
export default PieChart
