<!-- Barrage.vue 优化版 -->
<template>
  <div
    style="position: relative; width: 100%; height: 32vw; overflow: hidden; pointer-events: none"
  >
    <!-- 双行弹幕轨道 -->
    <div
      v-for="(track, index) in visibleTracks"
      :key="index"
      style="position: absolute; width: 100%; height: 50px"
      :style="{ top: `calc(${index} * 16vw)` }"
    >
      <div
        v-for="item in track"
        :key="item.id"
        class="barrage-item"
        style="
          position: absolute;
          border-radius: 26px;
          padding: 4px;
          display: flex;
          align-items: center;
          gap: 4px;
          backdrop-filter: blur(1px);
        "
        :style="getBarrageStyle(item)"
        @animationend="handleAnimationEnd(item.id)"
      >
        <img
          :src="item.avatar || ''"
          alt=""
          style="
            width: 10vw;
            border-radius: 50%;
            display: block;
            aspect-ratio: 1/1;
            object-fit: cover;
          "
          @error="handleAvatarImageError"
        />
        <div
          style="
            font-weight: 700;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          "
          :style="{
            backgroundImage:
              item.prizeType == 'MONEY'
                ? 'linear-gradient(180deg, #FFF9A9 26.92%, #ED7D0A 52.08%, #FFFAB5 73.08%)'
                : 'linear-gradient(180deg, #A9FFE2 26.92%, #0AEDA1 52.08%, #B5FFE8 73.08%)',
          }"
        >
          {{ barrageText(item) }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { handleAvatarImageError } from '@/utils/image/imageHandler.js'

const { locale, t } = useI18n()

const props = defineProps({
  barrageList: {
    type: Array,
    required: true,
    default: () => [],
  },

  speed: {
    type: Number,
    default: 80, // 基础速度系数
  },

  maxItems: {
    type: Number,
    default: 4, // 每行最大弹幕数
  },

  loopInterval: {
    type: Number,
    default: 2000, // 弹幕生成间隔(ms)
  },
})

const tracks = ref([[], []]) // 弹幕轨道数据
const idCounter = ref(0) // 弹幕ID计数器
const currentIndex = ref(0) // 用于取下一项弹幕的索引

// 计算实际显示的轨道（过滤空轨道）
const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))

// 显示的文本
const barrageText = (item) => {
  const params = { nickname: item.nickname, prizeName: item.prizeName }
  return item.prizeType == 'GOLD' || item.prizeType == 'MONEY'
    ? t('barrage_won_prize', params)
    : t('barrage_won_the_prize', params)
}

// 获取弹幕样式
const getBarrageStyle = (item) => {
  const isRTL = locale.value === 'ar'

  return {
    animationDuration: `${item.duration}s`,
    animationDelay: `${item.delay}s`,
    '--start-pos': `${item.startPos}px`,
    border: item.prizeType == 'MONEY' ? '0.667px solid #77FFCF' : '0.667px solid #FFF677',
    background:
      item.prizeType == 'MONEY'
        ? 'linear-gradient(270deg, rgba(218, 103, 2, 0.60) -16.85%, rgba(124, 41, 0, 0.60) 82.7%)'
        : 'linear-gradient(270deg, rgba(2, 218, 164, 0.60) -16.85%, rgba(0, 124, 83, 0.60) 82.7%)',
    // RTL布局支持
    ...(isRTL
      ? {
          right: '0',
          left: 'auto',
          transform: 'translateX(-100vw)',
        }
      : {
          left: '0',
          right: 'auto',
          transform: 'translateX(100vw)',
        }),
  }
}

// 生成随机弹幕属性
const generateBarrageProps = (item) => {
  const textLength = barrageText(item).length
  return {
    duration: Math.max(8 - textLength * 0.2, 5) * (100 / props.speed), // 弹幕项持续时间（每字符减少0.2秒，持续时间不低于5秒）
    startPos: Math.floor(Math.random() * 21) - 10, // 弹幕项起始位置（得到-10到10之间的随机整数，避免所有弹幕都从完全相同的起点开始移动）
  }
}

// 添加弹幕到轨道
const addToTrack = (item) => {
  // 寻找最短的轨道的下标值
  const trackIndex = tracks.value.reduce(
    (minIndex, track, index) => (track.length < tracks.value[minIndex].length ? index : minIndex),
    0,
  )

  if (tracks.value[trackIndex].length < props.maxItems) {
    tracks.value[trackIndex].push({
      ...item,
      id: idCounter.value++, //寻找完成动画的弹幕项唯一标识
      delay: Math.random() * 4, // 随机延迟（0-4秒）
      ...generateBarrageProps(item),
    })
  }
}

// 清理完成动画的弹幕（根据动画结束状态遍历）
const cleanCompleted = () => {
  tracks.value.forEach((track) => {
    for (let i = track.length - 1; i >= 0; i--) {
      if (track[i].completed) {
        track.splice(i, 1)
      }
    }
  })
}

// 设置弹幕动画结束状态
const handleAnimationEnd = (id) => {
  tracks.value.forEach((track) => {
    const item = track.find((item) => item.id === id)
    if (item) item.completed = true
  })
}

// 获取下一项弹幕（循环逻辑）
const getNextBarrage = () => {
  if (props.barrageList.length === 0) return null

  const item = props.barrageList[currentIndex.value] // 取得下一项弹幕项
  currentIndex.value = (currentIndex.value + 1) % props.barrageList.length //索引达到最大时则重置为0

  return { ...item } // 返回副本避免污染原始数据
}

// 弹幕循环逻辑
let barrageInterval = null

// 根据设置的时间间隔自动获取下一项弹幕
const startBarrage = () => {
  barrageInterval = setInterval(() => {
    cleanCompleted() // 清理完成动画的弹幕

    const nextBarrage = getNextBarrage() // 获取下一项弹幕
    if (nextBarrage) {
      addToTrack(nextBarrage) // 添加弹幕到轨道
    }
  }, props.loopInterval)
}

onMounted(() => {
  startBarrage() // 开启弹幕循环
})

onUnmounted(() => {
  clearInterval(barrageInterval) // 清空弹幕
})

// 监听数据源变化
watch(
  () => props.barrageList,
  (newList) => {
    currentIndex.value = 0 // 重置索引，确保重新开始循环
    clearInterval(barrageInterval) // 清空弹幕

    // 如果列表为空，停止生成新弹幕
    if (newList.length !== 0) {
      startBarrage() // 重启弹幕循环
    }
  },
  { deep: true },
)
</script>

<style scoped>
/* 样式保持不变（同之前版本） */
.barrage-item {
  will-change: transform;
  animation: moveLeft linear forwards;
}

@keyframes moveLeft {
  0% {
    transform: translateX(100vw);
  }

  100% {
    transform: translateX(-100%);
  }
}

/* RTL支持 - 镜像弹幕动画 */
[dir='rtl'] .barrage-item {
  animation: moveRight linear forwards;
}

@keyframes moveRight {
  0% {
    transform: translateX(-100vw);
  }

  100% {
    transform: translateX(100%);
  }
}

@media screen and (max-width: 360px) {
  * {
    font-size: 10px;
  }
}

@media screen and (min-width: 360px) {
  * {
    font-size: 14px;
  }
}

@media screen and (min-width: 768px) {
  * {
    font-size: 24px;
  }
}

@media screen and (min-width: 1024px) {
  * {
    font-size: 32px;
  }
}
</style>
