import React from 'react';
import ReactECharts from 'echarts-for-react';

const WaterSourceChart = () => {
  const dates = ['2025-06-01', '2025-06-02', '2025-06-03', '2025-06-04', '2025-06-05', '2025-06-06'];
  const waterSources = ['浮桥河水库', '长冲水库', '葡萄冲水库', '二五冲水库'];
  
  // 使用固定的示例数据
  const series = [
    {
      name: '浮桥河水库',
      type: 'bar',
      stack: 'total',
      barWidth: 30,
      emphasis: {
        focus: 'series'
      },
      data: [15, 18, 12, 20, 16, 22]
    },
    {
      name: '长冲水库',
      type: 'bar',
      stack: 'total',
      barWidth: 30,
      emphasis: {
        focus: 'series'
      },
      data: [10, 12, 8, 15, 11, 14]
    },
    {
      name: '葡萄冲水库',
      type: 'bar',
      stack: 'total',
      barWidth: 30,
      emphasis: {
        focus: 'series'
      },
      data: [8, 10, 6, 12, 9, 11]
    },
    {
      name: '二五冲水库',
      type: 'bar',
      stack: 'total',
      barWidth: 30,
      emphasis: {
        focus: 'series'
      },
      data: [5, 7, 4, 8, 6, 9]
    }
  ];

  const option = {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function (params) {
        let total = 0;
        let result = `${params[0].axisValue}<br/>`;
        
        // 按数值从大到小排序并只显示有预警的水源地
        const sortedParams = params
          .filter(param => param.value > 0)
          .sort((a, b) => b.value - a.value);
        
        sortedParams.forEach(param => {
          total += param.value;
          result += `${param.seriesName}: ${param.value}<br/>`;
        });
        
        result += `总计: ${total}`;
        return result;
      }
    },
    legend: {
      data: waterSources,
      top: 10,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: dates,
      axisLabel: {
        color: '#fff',
        rotate: 45
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '预警数量',
      nameTextStyle: {
        color: '#fff'
      },
      axisLabel: {
        color: '#fff'
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(255, 255, 255, 0.2)'
        }
      }
    },
    series: series,
    color: ['#fac858', '#ee6666', '#73c0de', '#3ba272']
  };

  return (
    <div style={{ height: '400px', width: '100%' }}>
      <ReactECharts
        option={option}
        style={{ height: '100%' }}
        opts={{ renderer: 'canvas' }}
      />
    </div>
  );
};

export default WaterSourceChart;