<!-- 告白墙弹幕 -->
<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;
          padding: 8px;

          display: flex;
          align-items: center;
          gap: 2vw;

          border-radius: 999px;
          border: 2px solid transparent;
          box-sizing: border-box;
          background:
            linear-gradient(180deg, #7c7c82 0%, #6c6c72 100%) padding-box,
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.9) 0%,
                rgba(255, 255, 255, 0.7) 35%,
                rgba(255, 255, 255, 0.35) 100%
              )
              border-box;
        "
        :style="getBarrageStyle(item)"
        @animationend="handleAnimationEnd(item.id)"
      >
        <!-- 情侣头像 -->
        <div
          style="
            position: relative;

            display: flex;
            align-items: center;
            gap: 2vw;
          "
        >
          <!-- 爱心图形 -->
          <div
            style="
              position: absolute;
              inset: 0;

              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <img
              v-smart-img
              :src="imageUrl('TaurusCoupleSign')"
              alt=""
              style="width: 5vw; display: block; object-fit: cover"
            />
          </div>

          <!-- 发送人 -->
          <img
            :src="item.senderAvatar || ''"
            alt=""
            style="
              width: 8vw;
              border-radius: 50%;
              display: block;
              aspect-ratio: 1/1;
              object-fit: cover;
            "
            @error="handleAvatarImageError"
          />
          <!-- 接收人 -->
          <img
            :src="item.receiverAvatar || ''"
            alt=""
            style="
              width: 8vw;
              border-radius: 50%;
              display: block;
              aspect-ratio: 1/1;
              object-fit: cover;
            "
            @error="handleAvatarImageError"
          />
        </div>

        <div style="white-space: nowrap; font-weight: 700; color: #ff69ad">
          {{ item.content }}
        </div>
      </div>
    </div>
  </div>
</template>

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

const { locale, t } = useI18n()

// 获取OSS图片URL的函数
const imageUrl = (filename) => getPngUrl('Ranking/Couple/', filename)

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

  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 getBarrageStyle = (item) => {
  const isRTL = locale.value === 'ar'

  return {
    animationDuration: `${item.duration}s`,
    animationDelay: `${item.delay}s`,
    '--start-pos': `${item.startPos}px`,
    // RTL布局支持
    ...(isRTL
      ? {
          right: '0',
          left: 'auto',
          transform: 'translateX(-100vw)',
        }
      : {
          left: '0',
          right: 'auto',
          transform: 'translateX(100vw)',
        }),
  }
}

// 生成随机弹幕属性
const generateBarrageProps = (item) => {
  const textLength = item.content.length
  return {
    duration: Math.min(5 + textLength * 0.1, 10), // 弹幕项持续时间（每字符增加0.2秒，持续时间不低于8秒）
    startPos: 0, // 弹幕项起始位置
  }
}

// 添加弹幕到轨道
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: 0, // 随机延迟（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>
