<template>
  <div class="audio-visualizer" ref="containerRef">
    <div class="visualizer-container" ref="visualizerRef">
      <template v-if="isInitialized">
        <div
          v-for="(line, index) in lines"
          :key="index"
          :class="['line', `line-${line.type}`]"
        ></div> </template
      >>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'

// 定义线条类型
interface Line {
  type: 1 | 2 | 3
}

const containerRef = ref<HTMLElement>()
const visualizerRef = ref<HTMLElement>()
const lines = ref<Line[]>([])
const isInitialized = ref<boolean>(false)

// 计算需要的线条数量
const calculateLines = (): Line[] => {
  if (!visualizerRef.value) return []

  const containerWidth = visualizerRef.value.offsetWidth

  // 如果容器宽度为0或很小，说明还没有正确渲染，返回空数组
  if (containerWidth < 50) return []
  const lineWidth = 0.96 // 每条线的宽度 (rem)
  const gap = 0.96 // 线条之间的间距 (rem)

  const remToPx = 10
  const lineWidthPx = lineWidth * remToPx
  const gapPx = gap * remToPx

  // 为了创建无缝滚动效果，我们需要生成两倍的内容
  // 这样当滚动到50%时，内容看起来和开始一样
  const availableWidth = containerWidth
  const lineWithGap = lineWidthPx + gapPx
  const linesNeeded = Math.ceil(availableWidth / lineWithGap)

  const generatedLines: Line[] = []

  // 基础模式：3条1号线 → 1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
  const basePattern: Line[] = [
    { type: 1 },
    { type: 1 },
    { type: 1 }, // 3条1号线
    { type: 2 }, // 1条2号线
    { type: 3 }, // 1条3号线
    { type: 2 }, // 1条2号线
    { type: 1 },
    { type: 1 },
    { type: 1 },
    { type: 1 } // 4条1号线
  ]

  // 重复模式：1条2号线 → 1条3号线 → 1条2号线 → 4条1号线
  const repeatPattern: Line[] = [
    { type: 2 }, // 1条2号线
    { type: 3 }, // 1条3号线
    { type: 2 }, // 1条2号线
    { type: 1 },
    { type: 1 },
    { type: 1 },
    { type: 1 } // 4条1号线
  ]

  // 生成一个完整周期的内容
  const oneCycle: Line[] = []
  oneCycle.push(...basePattern)

  // 添加重复模式直到填满一个周期
  let currentIndex = basePattern.length
  while (currentIndex < linesNeeded) {
    const remainingSpace = linesNeeded - currentIndex
    if (remainingSpace >= repeatPattern.length) {
      oneCycle.push(...repeatPattern)
      currentIndex += repeatPattern.length
    } else {
      // 如果剩余空间不够一个完整模式，就添加部分模式
      for (let i = 0; i < remainingSpace; i++) {
        oneCycle.push(repeatPattern[i % repeatPattern.length])
      }
      break
    }
  }

  // 复制内容，创建两倍的内容用于无缝循环
  generatedLines.push(...oneCycle, ...oneCycle)

  return generatedLines
}

// 更新线条
const updateLines = () => {
  if (isInitialized.value) return
  const newLines = calculateLines()
  if (newLines.length > 0) {
    lines.value = newLines
    isInitialized.value = true
  }
}

// 暴露方法给父组件
defineExpose({
  updateLines
})

onMounted(async () => {
  await nextTick()

  // 立即尝试第一次更新
  updateLines()

  // 如果第一次没有成功，快速重试
  setTimeout(() => {
    if (!isInitialized.value) {
      updateLines()
    }
  }, 50)

  // 最后的备用尝试
  setTimeout(() => {
    if (!isInitialized.value) {
      updateLines()
    }
  }, 150)
})
</script>

<style scoped>
.audio-visualizer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  border-radius: 10px;
}

.visualizer-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.96rem;
  height: 120px;
  flex-wrap: nowrap;
  animation: scrollLeft 3.75s linear infinite;
  overflow: hidden;
  white-space: nowrap;
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.line {
  background: linear-gradient(0deg, #b5b5b5, #b5b5b5),
    linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
  border-radius: 20px;
}

/* 1号线 - 最短 */
.line-1 {
  width: 0.96rem;
  height: 2.42rem;
}

/* 2号线 - 稍长 */
.line-2 {
  width: 0.96rem;
  height: 3.87rem;
}

/* 3号线 - 最长 */
.line-3 {
  width: 0.96rem;
  height: 6.29rem;
}
</style>
