import React, { useMemo } from 'react';
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';


const pallete = [
  ['#177ab3', '#51c3e7'],
  ['#9976dc', '#c792ee'],
  ['#94a1eb', '#a7caf8'],
  ['#7ae5c3', '#c9f4ea'],
  ['#c7dca5', '#f5fcd5'],
  ['#7988d9', '#9dc6f1'],
  ['#d9ed8f', '#d3f89b'],
];

const palleteLen = pallete.length;


const AreaDrpChart = ({ data }) => {
  const { max, sdata } = useMemo(() => {
    let max = 0;
    data.forEach(o => {
      max = Math.max(max, o.av)
    });
    max = [10, 20, 50, 100, 200, 300, 400].find(i => i >= max);

    return {
      max,
      sdata: data.map(o => ({ ...o, name: o.NAME.split('').join('\n') })),
    }
  }, [data]);

  var option = {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        var res = `${params.name.substr('2020-10-14 '.length, 2)}时降雨：${params.data}mm`;
        return res;
      }
    },
    grid: {
      x: 18,
      y: 24,
      x2: 28,
      y2: 36,
      bottom: 65,
      borderWidth: 0
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: sdata.map(o => o.name),
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#bbb',
          fontSize: 10,
          textShadowBlur: 4,
          textShadowColor: '#6ab',
        },
        axisLine: {
          lineStyle: {
            color: '#07a6ff',
            width: 0.5,
          }
        },
        axisTick: {
          show: false,
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        position: 'right',
        splitLine: {
          show: true,
          lineStyle: {
            color: '#07a6ff',
            width: 0.25,
            type: 'dashed'
          }
        },
        axisLabel: {
          color: '#bbb',
          fontSize: 10,
          textShadowBlur: 4,
          textShadowColor: '#6ab',
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false,
        },
        min: 0,
        max,
      }
    ],
    series: [
      {
        name: '降雨',
        type: 'bar',
        barWidth: '10px',
        data: sdata.map(o => o.av),
        itemStyle: {
          normal: {
            color: (params) => {
              return new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                  { offset: 0, color: pallete[params.dataIndex % palleteLen][0] },
                  { offset: 1, color: pallete[params.dataIndex % palleteLen][1] }
                ]
              )
            },
          },
        },
        label: {
          show: true,
          position: 'top',
          color: '#bbb',
          fontSize: 12,
          textShadowBlur: 4,
          textShadowColor: '#6ab',
        },
      }
    ]
  };

  return (
    <ReactEcharts
      option={option}
      style={{ height: '11rem', width: '100%' }}
    />
  )
}

export default React.memo(AreaDrpChart);