<template>
  <div class="danmaku-demo">
    <h2>弹幕效果演示</h2>
    <p class="demo-tip">鼠标悬停可暂停弹幕</p>
    
    <div class="danmaku-container">
      <div 
        v-for="(item, index) in activeDanmaku" 
        :key="item.id"
        class="danmaku-item"
        :class="[`track-${item.track}`, `speed-${item.speed}`, item.type]"
        :style="{ animationDelay: `${item.delay}s` }"
      >
        <div class="danmaku-card">
          <div class="danmaku-logo">
            <img v-if="item.logo" :src="item.logo" :alt="item.name" />
            <span v-else class="logo-placeholder">{{ item.name.charAt(0) }}</span>
          </div>
          <div class="danmaku-content">
            <span class="sponsor-name">{{ item.name }}</span>
            <span class="sponsor-action">{{ item.type === 'title' ? '冠名赞助' : '赞助了' }}</span>
            <span class="sponsor-item">{{ item.item }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 模拟赞助数据
const mockSponsors = [
  { id: 1, name: '小米汽车', logo: '', type: 'title', item: '本次活动' },
  { id: 2, name: '泉州欧乐堡', logo: '', type: 'sponsor', item: '游乐园门票' },
  { id: 3, name: '德劲新能源', logo: '', type: 'sponsor', item: '充电服务' },
  { id: 4, name: '泉友米车友会', logo: '', type: 'sponsor', item: '活动组织' },
  { id: 5, name: '本地商家A', logo: '', type: 'sponsor', item: '饮料零食' },
  { id: 6, name: '本地商家B', logo: '', type: 'sponsor', item: '精美礼品' },
  { id: 7, name: '本地商家C', logo: '', type: 'title', item: '特别赞助' },
  { id: 8, name: '本地商家D', logo: '', type: 'sponsor', item: '活动道具' },
];

const activeDanmaku = ref([]);
const speeds = ['slow', 'medium', 'fast'];
const tracks = [0, 1, 2, 3];
let intervalId = null;

const generateDanmaku = () => {
  const sponsor = mockSponsors[Math.floor(Math.random() * mockSponsors.length)];
  const track = tracks[Math.floor(Math.random() * tracks.length)];
  const speed = speeds[Math.floor(Math.random() * speeds.length)];
  
  return {
    ...sponsor,
    id: Date.now() + Math.random(),
    track,
    speed,
    delay: 0
  };
};

const addDanmaku = () => {
  if (activeDanmaku.value.length < 12) {
    activeDanmaku.value.push(generateDanmaku());
  }
  
  // 清理已完成的弹幕
  if (activeDanmaku.value.length > 15) {
    activeDanmaku.value = activeDanmaku.value.slice(-12);
  }
};

onMounted(() => {
  // 初始添加几条弹幕
  for (let i = 0; i < 6; i++) {
    setTimeout(() => addDanmaku(), i * 800);
  }
  
  // 定期添加新弹幕
  intervalId = setInterval(addDanmaku, 2000);
});

onUnmounted(() => {
  if (intervalId) clearInterval(intervalId);
});
</script>

<style scoped>
.danmaku-demo {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

h2 {
  text-align: center;
  color: white;
  font-size: 32px;
  margin: 40px 0 10px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.demo-tip {
  text-align: center;
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  margin-bottom: 40px;
}

.danmaku-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: rgba(0,0,0,0.1);
  border-radius: 16px;
  backdrop-filter: blur(10px);
}

.danmaku-item {
  position: absolute;
  right: -100%;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  will-change: transform;
}

.danmaku-item:hover {
  animation-play-state: paused;
}

/* 轨道位置 */
.track-0 { top: 20px; }
.track-1 { top: 110px; }
.track-2 { top: 200px; }
.track-3 { top: 290px; }

/* 速度变化 */
.speed-slow {
  animation: danmaku-move 20s linear infinite;
}

.speed-medium {
  animation: danmaku-move 15s linear infinite;
}

.speed-fast {
  animation: danmaku-move 10s linear infinite;
}

@keyframes danmaku-move {
  0% {
    right: -100%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    right: 100%;
    opacity: 0;
  }
}

.danmaku-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s, box-shadow 0.3s;
  white-space: nowrap;
}

.danmaku-item:hover .danmaku-card {
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(0,0,0,0.3);
}

/* 冠名赞助样式 */
.danmaku-item.title .danmaku-card {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.9) 0%, rgba(255, 165, 0, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.danmaku-item.title .danmaku-content {
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* 普通赞助样式 */
.danmaku-item.sponsor .danmaku-card {
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.9) 0%, rgba(53, 122, 189, 0.9) 100%);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.danmaku-item.sponsor .danmaku-content {
  color: #fff;
}

.danmaku-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.danmaku-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-placeholder {
  font-size: 20px;
  font-weight: bold;
  color: white;
}

.danmaku-content {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
}

.sponsor-name {
  font-weight: 600;
}

.sponsor-action {
  opacity: 0.9;
  font-size: 13px;
}

.sponsor-item {
  font-weight: 600;
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 12px;
  font-size: 13px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .danmaku-container {
    height: 300px;
  }
  
  .track-0 { top: 15px; }
  .track-1 { top: 85px; }
  .track-2 { top: 155px; }
  .track-3 { top: 225px; }
  
  .danmaku-card {
    padding: 8px 16px;
    gap: 10px;
  }
  
  .danmaku-logo {
    width: 32px;
    height: 32px;
  }
  
  .danmaku-content {
    font-size: 13px;
    gap: 4px;
  }
  
  .sponsor-action {
    font-size: 11px;
  }
  
  .sponsor-item {
    font-size: 11px;
    padding: 2px 6px;
  }
}
</style>
