import React, { useState, useEffect } from 'react';
import './index.less';

const WaterLevelAlert = () => {
  const [position, setPosition] = useState(0);
  
  const alerts = [
    {
      reservoir: '浮桥河水库',
      time: '06月08日02时',
      level: '65.01',
      overLimit: '0.12',
    },
    {
      reservoir: '浮桥河水库',
      time: '06月08日02时',
      level: '93.4',
      overLimit: '0.40',
    }
  ];

  useEffect(() => {
    const height = 24; // 每个项目的高度
    const totalHeight = height * alerts.length;
    let currentPosition = 0;

    const animate = () => {
      currentPosition += height;
      if (currentPosition >= totalHeight) {
        currentPosition = 0;
      }
      setPosition(currentPosition);
    };

    const timer = setInterval(animate, 3000);
    return () => clearInterval(timer);
  }, []);

  // 复制一份数据用于无缝滚动
  const displayAlerts = [...alerts, ...alerts];

  return (
    <div className="water-level-alert">
      <div className="alert-container">
        <div 
          className="alert-wrapper" 
          style={{
            transform: `translateY(-${position}px)`,
            transition: position === 0 ? 'none' : 'transform 0.5s ease-in-out'
          }}
        >
          {displayAlerts.map((alert, index) => (
            <div key={index} className="alert-item">
              <span className="alert-text">
                预计{alert.reservoir}于 {alert.time}水位将上涨至
                {alert.level} m (超汛限水位{alert.overLimit}m)，
                请做好防范
              </span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default WaterLevelAlert;