import echarts from 'echarts/lib/echarts';

export default function drpOption({ data, grid, title }) {
  let totalDrp = 0;
  const data2 = data.reduce((pre, cur) => {
    totalDrp += cur.drp;
    pre.push({
      ...cur,
      totalDrp,
    });
    return pre;
  }, []);

  const DRPLEVEL = [10, 25, 50, 100, 250];
  const maxVal = DRPLEVEL.find(o => o > totalDrp);

  return {
    title: title ? {
      text: title,
      textStyle: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'normal'
      },
      left: 8,
      top: 16,
    } : null,
    tooltip: {
      trigger: 'axis',
      formatter: function (params) {
        var res = `${params[0].name.substr('2020-10-14 '.length, 2)}时降雨: ${params[0].data}mm<br />累计降雨: ${params[1].data}mm`;
        return res;
      }
    },
    grid: grid || {
      x: 18,
      y: 24,
      x2: 28,
      y2: 28,
      borderWidth: 0
    },
    calculable: true,
    xAxis: [
      {
        type: 'category',
        data: data2.map(o => o.tm),
        splitLine: {
          show: false
        },
        axisLabel: {
          color: '#bbb',
          fontSize: 9,
          textShadowBlur: 4,
          textShadowColor: '#6ab',
          formatter: val => val.substr('2020-'.length, 10)
        },
        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: maxVal
      }
    ],
    series: [
      {
        name: '降雨',
        type: 'bar',
        barWidth: '60%',
        data: data2.map(o => o.drp),
        itemStyle: {
          normal: {
            barBorderRadius: [3, 3, 0, 0],
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: '#3876cd' },
                { offset: 0.5, color: '#45b4e7' },
                { offset: 1, color: '#54ffff' }
              ]
            ),
          },
        },
        label: {
          show: false,
        },
        markPoint: {
          data: [
            { type: 'max', name: '最大值', symbol: 'circle', symbolSize: 1, symbolOffset: [0, -12] },
          ]
        },
      },
      {
        name: '累计降雨',
        type: 'line',
        showSymbol: false,
        label: {
          show: false,
        },
        data: data2.map(o => o.totalDrp),
        lineStyle: {
          normal: {
            width: 1,
          }
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: 'rgba(3, 194, 236, 0.3)'
            }, {
              offset: 0.8,
              color: 'rgba(3, 194, 236, 0)'
            }
            ], false),
            shadowColor: 'rgba(0, 0, 0, 0.1)',
            shadowBlur: 10
          }
        },
        itemStyle: {
          normal: {
            color: '#03C2EC'
          }
        },
      }
    ]
  };
}