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

const WaterLevelChart = () => {
  const generateData = () => {
    const data = [];
    const startTime = new Date('2023-06-08T00:00:00');
    const endTime = new Date('2023-06-08T14:00:00');
    let currentTime = new Date(startTime);

    while (currentTime <= endTime) {
      const timeString = currentTime.toLocaleString('zh-CN', { 
        hour12: false,
        hour: '2-digit',
        minute: '2-digit'
      });
      // 生成一个接近500的固定值
      data.push({
        time: timeString,
        value: 495
      });

      currentTime.setHours(currentTime.getHours() + 1);
    }
    return data;
  };

  const data = generateData();

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map(item => item.time),
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '水位(m)',
      nameTextStyle: {
        color: '#fff'
      },
      min: 0,
      max: 500,
      interval: 100,
      axisLine: {
        show: true,
        lineStyle: {
          color: '#999'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#DDD'
        }
      }
    },
    series: [
      {
        name: '水位',
        type: 'line',
        data: data.map(item => item.value),
        smooth: true,
        symbol: 'none',
        lineStyle: {
          color: '#409EFF',
          width: 2
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(64,158,255,0.2)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0)'
            }]
          }
        }
      }
    ]
  };

  return <ReactECharts option={option} style={{ height: '550px' }} />;
};

export default WaterLevelChart;