<!--
 * @Date: 2025-04-07 12:35:35
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-06-11 11:58:22
 * @FilePath: /mlaj/src/components/ui/AudioPlayer.vue
 * @Description: 音频播放器组件，支持播放控制、进度条调节、音量控制、播放列表等功能
-->
<template>
  <!-- 音频播放器主容器 -->
  <div class="audio-player bg-white rounded-lg shadow-xl overflow-hidden max-w-md mx-auto p-2">
    <!-- 封面与歌曲信息 -->
    <div class="flex flex-col items-center mb-4">
      <!-- 歌曲封面 -->
      <div class="w-24 h-24 rounded-lg overflow-hidden mb-2">
        <img :src="currentSong?.cover ? currentSong?.cover : 'https://cdn.ipadbiz.cn/mlaj/images/audio_d_cover.jpg'" alt="封面" class="w-full h-full object-cover">
      </div>

      <!-- 歌曲信息 -->
      <div class="text-center">
        <h3 class="text-base font-medium">{{ currentSong?.title }}</h3>
        <p class="text-xs text-gray-500">{{ currentSong?.artist }}</p>
      </div>

    </div>

      <!-- 进度条与时间：显示当前播放时间、总时长和可拖动的进度条 -->
      <div class="mt-4 mb-6">
        <div class="flex items-center space-x-4">
          <span class="text-xs text-gray-400 w-12 text-right">{{ formatTime(currentTime) }}</span>
          <div class="progress-bar relative h-1 bg-gray-200 rounded-full flex-1">
            <input
              type="range"
              :value="progress"
              @input="handleProgressChange"
              @change="seekTo"
              class="w-full absolute inset-0 appearance-none bg-transparent cursor-pointer"
            >
            <div
              :style="{ width: `${progress}%` }"
              class="progress-track absolute left-0 top-0 h-full rounded-full bg-gradient-to-r from-blue-500 to-purple-500 transition-all"
            ></div>
          </div>
          <span class="text-xs text-gray-400 w-12">{{ formatTime(duration) }}</span>
        </div>
      </div>

      <!-- 播放控制按钮组：上一首、播放/暂停、下一首 -->
      <div class="flex items-center space-x-12 mt-4" style="justify-content: space-evenly;">
        <button
          @click="prevSong"
          class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
        >
          <font-awesome-icon icon="backward-step" class="text-xl text-gray-600" />
        </button>
        <button
          @click="togglePlay"
          :class="{'paused': !isPlaying, 'opacity-50 cursor-not-allowed': isLoading}"
          :disabled="isLoading"
          class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-500 hover:bg-blue-600 transition-colors shadow-lg"
        >
          <font-awesome-icon
            :icon="['fas' , isPlaying ? 'pause' : 'play']"
            :class="{ 'fa-spin': isLoading }"
            class="text-2xl"
          />
        </button>
        <button
          @click="nextSong"
          class="w-10 h-10 flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-colors"
        >
          <font-awesome-icon icon="forward-step" class="text-xl text-gray-600" />
        </button>
      </div>

    <!-- 播放列表按钮 -->
    <div class="flex justify-end mt-4">
      <button @click="togglePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
        <font-awesome-icon icon="list" class="text-lg" />
      </button>
    </div>

    <!-- 播放列表弹出层 -->
    <van-popup
      teleport="body"
      v-model:show="isPlaylistVisible"
      position="bottom"
      :overlay="true"
      round
      class="playlist-popup"
      style="height: 70vh"
    >
      <div class="playlist-header flex justify-between items-center px-4 py-3 border-b sticky top-0 bg-white z-10">
        <h4 class="font-medium">播放列表 ({{ songs.length }})</h4>
        <button @click="closePlaylist" class="text-gray-500 hover:text-gray-700 transition-colors">
          <font-awesome-icon icon="xmark" />
        </button>
      </div>
      <div class="playlist-items overflow-y-auto h-full pb-safe">
        <div
          v-for="(song, index) in songs"
          :key="song.id"
          :class="{'active bg-blue-50': index === currentIndex}"
          @click="selectSong(index)"
          class="flex items-center px-4 py-3 hover:bg-gray-50 transition-colors relative"
        >
          <div class="absolute top-0 left-0 right-0 h-[1px] bg-gray-200"></div>
          <div class="w-16 h-16 rounded-lg overflow-hidden mr-4 flex-shrink-0">
            <img :src="song?.cover ? song?.cover : 'https://cdn.ipadbiz.cn/mlaj/images/audio_d_cover.jpg'" alt="封面" class="w-full h-full object-cover">
          </div>
          <div class="flex-1">
            <div class="font-medium">{{ song?.title }}</div>
            <div class="text-sm text-gray-500">{{ song?.artist }}</div>
          </div>
          <font-awesome-icon
            v-if="index === currentIndex && isPlaying"
            icon="volume-up"
            class="text-blue-500 ml-2"
          />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { formatTime } from '@/utils/time'
import { wxInfo } from '@/utils/tools'

// 组件属性定义
const props = defineProps({
  id: { type: String }, // 组件ID
  songs: { type: Array, required: true }, // 音频列表数据
  initialIndex: { type: Number, default: 0 } // 初始播放索引
})

// 音频播放器状态管理
const audio = ref(null) // 音频实例
const isPlaying = ref(false) // 播放状态
const isLoading = ref(false) // 加载状态
const currentIndex = ref(props.initialIndex) // 当前播放索引
const currentTime = ref(0) // 当前播放时间
const duration = ref(0) // 音频总时长
const progress = ref(0) // 播放进度
const volume = ref(100) // 音量值
const isPlaylistVisible = ref(false) // 播放列表显示状态
const speed = ref(1.0) // 播放速度

// 计算属性
const currentSong = computed(() => props.songs[currentIndex.value]) // 当前播放的歌曲

// 生命周期钩子
onMounted(() => {
  loadAudio()
  audio.value?.addEventListener('timeupdate', updateProgress)
  audio.value?.addEventListener('ended', handleEnded)
})

// 核心方法：音频加载
const loadAudio = async () => {
  // 如果没有当前歌曲，直接返回
  if (!currentSong.value) {
    console.warn('没有可播放的歌曲')
    return false
  }

  // 设置加载状态
  isLoading.value = true

  try {
    // 清理旧的音频实例
    if (audio.value) {
      audio.value.removeEventListener('timeupdate', updateProgress)
      audio.value.removeEventListener('ended', handleEnded)
    }

    // 检查歌曲URL是否存在
    if (!currentSong.value.url) {
      console.error('歌曲URL不存在:', currentSong.value)
      audio.value = null
      return false
    }

    // 创建新的音频实例
    audio.value = new Audio(currentSong.value.url)
    audio.value.volume = volume.value / 100
    audio.value.playbackRate = speed.value

    // 添加事件监听
    audio.value.addEventListener('timeupdate', updateProgress)
    audio.value.addEventListener('ended', handleEnded)

    // 加载音频并等待可以流畅播放
    await audio.value?.load()
    return new Promise((resolve) => {
      audio.value.addEventListener('canplaythrough', () => {
        resolve(true)
      }, { once: true })
      audio.value.addEventListener('error', () => {
        console.error('音频加载失败')
        resolve(false)
      }, { once: true })
    })
  } catch (error) {
    console.error('加载音频失败:', error)
    audio.value = null
    return false
  } finally {
    isLoading.value = false
  }
}

// 定义组件事件
const emit = defineEmits(['play', 'pause'])

// 播放控制：切换播放/暂停状态
const togglePlay = async () => {
  // 如果正在加载中，不执行任何操作
  if (isLoading.value) return

  try {
    // 如果音频实例不存在，尝试加载
    if (!audio.value) {
      const loadSuccess = await loadAudio()
      // 如果加载失败，直接返回
      if (!loadSuccess || !audio.value) {
        console.warn('无法加载音频实例')
        return
      }
    }

    // 根据当前播放状态执行相应操作
    if (isPlaying.value) {
      // 暂停播放
      if (audio.value) {
        await audio.value.pause()
        emit('pause', audio.value)
      }
    } else {
      // 开始播放
      if (audio.value) {
        try {
          await audio.value.play()
          emit('play', audio.value)
        } catch (playError) {
          console.error('播放失败:', playError)
          return
        }
      }
    }

    // 切换播放状态
    isPlaying.value = !isPlaying.value
  } catch (error) {
    console.error('播放控制失败:', error)
  }
}


// 进度更新
const updateProgress = () => {
  if (!audio.value) return
  currentTime.value = audio.value.currentTime
  duration.value = audio.value.duration
  progress.value = (currentTime.value / duration.value) * 100 || 0
}

// 播放结束处理
const handleEnded = () => {
  nextSong()
}

// 控制方法：切换到上一首
const prevSong = async () => {
  try {
    // 如果音频实例存在，先暂停并清除
    if (audio.value) {
      isPlaying.value = false
      await audio.value.pause()
      audio.value = null
    }

    // 计算上一首歌曲的索引
    currentIndex.value = (currentIndex.value - 1 + props.songs.length) % props.songs.length

    // 加载新的音频
    const loadSuccess = await loadAudio()

    // 确保音频实例加载成功后再播放
    if (loadSuccess && audio.value) {
      try {
        await audio.value.play()
        // 使用非线性映射来调整音量变化的灵敏度
        const normalizedVolume = Math.pow(volume.value / 100, 2)
        audio.value.volume = normalizedVolume
        isPlaying.value = true
        // 发射播放事件
        emit('play', audio.value)
      } catch (playError) {
        console.error('播放上一首歌曲失败:', playError)
        isPlaying.value = false
      }
    } else {
      console.warn('无法加载上一首歌曲')
      isPlaying.value = false
    }
  } catch (error) {
    console.error('切换到上一首歌曲失败:', error)
    isPlaying.value = false
  }
}

// 控制方法：切换到下一首
const nextSong = async () => {
  try {
    // 如果音频实例存在，先暂停并清除
    if (audio.value) {
      isPlaying.value = false
      await audio.value.pause()
      audio.value = null
    }

    // 计算下一首歌曲的索引
    currentIndex.value = (currentIndex.value + 1) % props.songs.length

    // 加载新的音频
    const loadSuccess = await loadAudio()

    // 确保音频实例加载成功后再播放
    if (loadSuccess && audio.value) {
      try {
        await audio.value.play()
        // 使用非线性映射来调整音量变化的灵敏度
        const normalizedVolume = Math.pow(volume.value / 100, 2)
        audio.value.volume = normalizedVolume
        isPlaying.value = true
        // 发射播放事件
        emit('play', audio.value)
      } catch (playError) {
        console.error('播放下一首歌曲失败:', playError)
        isPlaying.value = false
      }
    } else {
      console.warn('无法加载下一首歌曲')
      isPlaying.value = false
    }
  } catch (error) {
    console.error('切换到下一首歌曲失败:', error)
    isPlaying.value = false
  }
}

// 重新播放当前歌曲
const replaySong = () => {
  audio.value?.seek(0)
  togglePlay()
}

// 进度条交互处理
const handleProgressChange = (e) => {
  const target = e.target
  progress.value = parseFloat(target.value)
}

// 跳转到指定进度
const seekTo = () => {
  if (!audio.value || !duration.value) return
  audio.value.currentTime = (progress.value / 100) * duration.value
}

// 音量控制处理
const handleVolumeChange = (e) => {
  const target = e.target
  volume.value = parseFloat(target.value)
  // 使用非线性映射来调整音量变化的灵敏度
  const normalizedVolume = Math.pow(volume.value / 100, 2)
  if (audio.value) {
    audio.value.volume = normalizedVolume
  }
}

// 监听歌曲列表变化
watch(() => props.songs, () => {
  console.warn('歌曲列表变化', props.songs);
  currentIndex.value = 0
  loadAudio()
}, { deep: true })

// 组件卸载时清理事件监听
onUnmounted(() => {
  if (audio.value) {
    audio.value.pause();
    audio.value.removeEventListener('timeupdate', updateProgress);
    audio.value.removeEventListener('ended', handleEnded);
    audio.value = null;
  }
  isPlaying.value = false;
})

// 播放列表相关方法
const togglePlaylist = () => {
  isPlaylistVisible.value = !isPlaylistVisible.value
}

const closePlaylist = () => {
  isPlaylistVisible.value = false
}

// 选择并播放指定歌曲
const selectSong = async (index) => {
  try {
    // 如果音频实例存在，先暂停并清除
    if (audio.value) {
      isPlaying.value = false
      await audio.value.pause()
      audio.value = null
    }

    // 设置当前索引
    currentIndex.value = index

    // 加载新的音频
    const loadSuccess = await loadAudio()

    // 确保音频实例加载成功后再播放
    if (loadSuccess && audio.value) {
      console.warn('正在播放选择的歌曲', audio.value);
      try {
        await audio.value.play()
        isPlaying.value = true
        // 发射播放事件
        emit('play', audio.value)
        // 关闭播放列表
        isPlaylistVisible.value = false
        // 滚动到当前播放的音频
        const playlistItems = document.querySelector('.playlist-items')
        const activeItem = playlistItems?.querySelector('.active')
        if (playlistItems && activeItem) {
          activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
        }
      } catch (playError) {
        console.error('播放选择的歌曲失败:', playError)
        isPlaying.value = false
      }
    } else {
      console.warn('无法加载选择的歌曲')
      isPlaying.value = false
    }
  } catch (error) {
    console.error('选择歌曲失败:', error)
    isPlaying.value = false
  }
}

// 监听播放状态变化，确保当前播放项在可视区域内
watch([isPlaying, currentIndex], () => {
  if (isPlaying.value) {
    const playlistItems = document.querySelector('.playlist-items')
    const activeItem = playlistItems?.querySelector('.active')
    if (playlistItems && activeItem) {
      activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
    }
  }
})


// 暴露给父组件的方法
defineExpose({
  togglePlay,
  pause: () => {
    // 只有在播放状态且音频实例存在时才执行暂停
    if (isPlaying.value && audio.value) {
      audio.value.pause();
      isPlaying.value = false;
      emit('pause', audio.value);
    } else {
      // 如果音频实例不存在或已经暂停，只更新状态
      isPlaying.value = false;
    }
  },
  isPlaying: () => isPlaying.value,
  id: props.id,
  getPlayer: () => audio.value,
  getId() {
    return currentSong.value.meta_id || 'meta_id'
  }
})
</script>

<style scoped>
/* 音频播放器样式变量 */
.audio-player {
  --progress-height: 4px;
}

/* 进度条样式 */
.progress-bar {
  height: var(--progress-height);
  border-radius: var(--progress-height);
}

.progress-track {
  height: var(--progress-height);
  border-radius: var(--progress-height);
  background: linear-gradient(90deg, #1a1a1a 0%, #4a4a4a 100%);
  transition: width 0.3s ease-in-out;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
}

input[type='range']::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
}

/* 按钮交互动画 */
button:not(:disabled) {
  transition: all 0.3s ease;
}

@media (hover: hover) {
  button:not(:disabled):hover {
    transform: scale(1.1);
  }
}

button.paused .fa-pause {
  animation: pulse 1.5s infinite;
}

button:disabled {
  cursor: not-allowed;
}

/* 暂停按钮动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* 播放列表样式 */


.active {
  background-color: #f3f4f6;
  font-weight: 500;
  color: #1a1a1a;
}

/* 移动端样式优化 */
@media (max-width: 640px) {
  .audio-player {
    --progress-height: 6px;
  }

  input[type="range"] {
    height: var(--progress-height);
  }
}
</style>