import { useEffect, useState } from 'react'
import './flash.scss'
import {CmsAd} from "@/api/cms/cmsAd/model";
import {getCmsAd} from "@/api/cms/cmsAd";
import { Swiper } from '@nutui/nutui-react-taro'

interface Firework {
  id: number
  x: number
  y: number
  color: string
}

const MyPage = () => {
  const [item, setItem] = useState<CmsAd>()
  const reload = () => {
    getCmsAd(366).then(data => {
      setItem(data)
    })
  }
  const [fireworks, setFireworks] = useState<Firework[]>([])

  // 生成随机颜色
  const getRandomColor = () => {
    const colors = [
      '#ff0000', '#00ff00', '#0000ff', '#ffff00',
      '#ff00ff', '#00ffff', '#ff9900', '#ff0099'
    ]
    return colors[Math.floor(Math.random() * colors.length)]
  }

  // 创建新烟花
  const createFirework = () => {
    const firework: Firework = {
      id: Date.now(),
      x: Math.random() * 100, // 随机横向位置 (0-100%)
      y: Math.random() * 40,  // 修改为随机纵向位置 (0-40%)
      color: getRandomColor()
    }
    setFireworks(prev => [...prev, firework])

    // 1.5秒后移除烟花
    setTimeout(() => {
      setFireworks(prev => prev.filter(f => f.id !== firework.id))
    }, 1500)
  }

  useEffect(() => {
    reload();
    // 初始创建更多烟花
    for (let i = 0; i < 6; i++) { // 修改初始烟花数量为6个
      createFirework()
    }

    // 缩短创建间隔，增加密度
    const interval = setInterval(() => {
      createFirework()
    }, 500) // 修改为500ms创建一次

    return () => clearInterval(interval)
  }, [])

  return (
    <>
      <Swiper defaultValue={0} height={279} indicator style={{ height: '280px' }}>
        {item?.imageList?.map((item) => (
          <Swiper.Item key={item}>
            <img width="100%" height="100%" src={item.url} alt="" style={{ height: '280px' }} />
          </Swiper.Item>
        ))}
      </Swiper>
      <div className="fireworks-container">
        {fireworks.map(firework => (
          <div
            key={firework.id}
            className="firework"
            style={{
              '--x': `${firework.x}%`,
              '--y': `${firework.y}%`,
              '--color': firework.color
            } as React.CSSProperties}
          >
            {/* 生成30个粒子 */}
            {Array.from({ length: 30 }).map((_, i) => (
              <div
                key={i}
                className="particle"
                style={{
                  '--angle': `${(i * 12)}deg`,
                  '--delay': `${Math.random() * 0.2}s`
                } as React.CSSProperties}
              />
            ))}
          </div>
        ))}
      </div>
    </>
  )
}

export default MyPage