<template>
  <div class="audio-player-container">
    <div class="player-bg">
      <div class="wave wave-1"></div>
      <div class="wave wave-2"></div>
      <div class="wave wave-3"></div>
    </div>

    <div class="player-content">
      <div class="player-header">
        <el-button link @click="goBack">
          <el-icon :size="20"><ArrowLeft /></el-icon>
          返回
        </el-button>
      </div>

      <div class="player-main">
        <div class="course-cover">
          <img :src="courseInfo.cover" :alt="courseInfo.title" />
          <div class="cover-overlay">
            <el-icon :size="80" color="white"><Headset /></el-icon>
          </div>
        </div>

        <div class="course-info">
          <h1 class="course-title">{{ courseInfo.title }}</h1>
          <p class="course-instructor">讲师：{{ courseInfo.instructor }}</p>
        </div>

        <div class="audio-controls">
          <div class="progress-bar">
            <div class="time-display">{{ formatTime(currentTime) }}</div>
            <el-slider
              v-model="progress"
              :show-tooltip="false"
              @change="handleProgressChange"
              class="audio-slider"
            />
            <div class="time-display">{{ formatTime(duration) }}</div>
          </div>

          <div class="control-buttons">
            <el-button circle size="large" @click="backward">
              <el-icon :size="24"><DArrowLeft /></el-icon>
            </el-button>
            
            <el-button 
              type="primary" 
              circle 
              size="large"
              class="play-button"
              @click="togglePlay"
            >
              <el-icon :size="32">
                <component :is="isPlaying ? 'VideoPause' : 'VideoPlay'" />
              </el-icon>
            </el-button>
            
            <el-button circle size="large" @click="forward">
              <el-icon :size="24"><DArrowRight /></el-icon>
            </el-button>
          </div>

          <div class="extra-controls">
            <div class="speed-control">
              <span>倍速</span>
              <el-select v-model="playbackRate" @change="handleSpeedChange">
                <el-option label="0.5x" :value="0.5" />
                <el-option label="0.75x" :value="0.75" />
                <el-option label="1.0x" :value="1" />
                <el-option label="1.25x" :value="1.25" />
                <el-option label="1.5x" :value="1.5" />
                <el-option label="2.0x" :value="2" />
              </el-select>
            </div>

            <div class="volume-control">
              <el-icon :size="20" @click="toggleMute">
                <component :is="isMuted ? 'Mute' : 'Microphone'" />
              </el-icon>
              <el-slider
                v-model="volume"
                :show-tooltip="false"
                @change="handleVolumeChange"
                style="width: 100px"
              />
            </div>
          </div>
        </div>

        <div class="playlist">
          <h3 class="playlist-title">播放列表</h3>
          <div class="playlist-items">
            <div 
              class="playlist-item"
              :class="{ active: item.id === currentTrack.id }"
              v-for="item in playlist"
              :key="item.id"
              @click="selectTrack(item)"
            >
              <div class="item-index">{{ item.index }}</div>
              <div class="item-info">
                <div class="item-title">{{ item.title }}</div>
                <div class="item-duration">{{ item.duration }}</div>
              </div>
              <el-icon v-if="item.id === currentTrack.id" class="playing-icon">
                <VideoPlay />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

// 课程信息
const courseInfo = ref({
  title: '销售技巧基础训练',
  instructor: '王老师',
  cover: 'https://via.placeholder.com/400x400/667eea/ffffff?text=音频课程'
})

// 播放状态
const isPlaying = ref(false)
const isMuted = ref(false)
const currentTime = ref(0)
const duration = ref(3600) // 60分钟
const progress = ref(0)
const volume = ref(80)
const playbackRate = ref(1)

// 当前播放的音频
const currentTrack = ref({
  id: 1,
  title: '第一章：销售基础认知',
  url: '/audio/chapter1.mp3'
})

// 播放列表
const playlist = ref([
  {
    id: 1,
    index: '01',
    title: '第一章：销售基础认知',
    duration: '15:32',
    url: '/audio/chapter1.mp3'
  },
  {
    id: 2,
    index: '02',
    title: '第二章：客户沟通技巧',
    duration: '22:18',
    url: '/audio/chapter2.mp3'
  },
  {
    id: 3,
    index: '03',
    title: '第三章：需求挖掘方法',
    duration: '18:45',
    url: '/audio/chapter3.mp3'
  },
  {
    id: 4,
    index: '04',
    title: '第四章：产品介绍技巧',
    duration: '20:12',
    url: '/audio/chapter4.mp3'
  },
  {
    id: 5,
    index: '05',
    title: '第五章：异议处理',
    duration: '16:38',
    url: '/audio/chapter5.mp3'
  }
])

// 音频元素
let audioElement: HTMLAudioElement | null = null

/**
 * 返回
 */
const goBack = () => {
  router.back()
}

/**
 * 格式化时间
 */
const formatTime = (seconds: number) => {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  
  if (h > 0) {
    return `${h}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`
  }
  return `${m}:${s.toString().padStart(2, '0')}`
}

/**
 * 播放/暂停
 */
const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  
  if (isPlaying.value) {
    audioElement?.play()
    ElMessage.success('开始播放')
  } else {
    audioElement?.pause()
  }
}

/**
 * 快退10秒
 */
const backward = () => {
  if (audioElement) {
    audioElement.currentTime = Math.max(0, audioElement.currentTime - 10)
  }
}

/**
 * 快进10秒
 */
const forward = () => {
  if (audioElement) {
    audioElement.currentTime = Math.min(duration.value, audioElement.currentTime + 10)
  }
}

/**
 * 进度改变
 */
const handleProgressChange = (val: number) => {
  if (audioElement) {
    audioElement.currentTime = (val / 100) * duration.value
  }
}

/**
 * 速度改变
 */
const handleSpeedChange = (val: number) => {
  if (audioElement) {
    audioElement.playbackRate = val
  }
}

/**
 * 静音切换
 */
const toggleMute = () => {
  isMuted.value = !isMuted.value
  if (audioElement) {
    audioElement.muted = isMuted.value
  }
}

/**
 * 音量改变
 */
const handleVolumeChange = (val: number) => {
  if (audioElement) {
    audioElement.volume = val / 100
  }
}

/**
 * 选择音轨
 */
const selectTrack = (track: any) => {
  currentTrack.value = track
  ElMessage.info(`切换到：${track.title}`)
  
  // 重置播放状态
  isPlaying.value = false
  currentTime.value = 0
  progress.value = 0
}

// 初始化音频
onMounted(() => {
  audioElement = new Audio(currentTrack.value.url)
  
  // 监听播放进度
  audioElement.addEventListener('timeupdate', () => {
    if (audioElement) {
      currentTime.value = audioElement.currentTime
      progress.value = (audioElement.currentTime / duration.value) * 100
    }
  })
  
  // 监听播放结束
  audioElement.addEventListener('ended', () => {
    isPlaying.value = false
    // 自动播放下一首
    const currentIndex = playlist.value.findIndex(item => item.id === currentTrack.value.id)
    if (currentIndex < playlist.value.length - 1) {
      selectTrack(playlist.value[currentIndex + 1])
      setTimeout(() => togglePlay(), 500)
    }
  })
})

// 清理
onUnmounted(() => {
  if (audioElement) {
    audioElement.pause()
    audioElement = null
  }
})
</script>

<style lang="scss" scoped>
.audio-player-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
  position: relative;
  overflow: hidden;

  .player-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.1;

    .wave {
      position: absolute;
      width: 200%;
      height: 200%;
      border-radius: 50%;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

      &-1 {
        top: -50%;
        left: -50%;
        animation: wave 20s linear infinite;
      }

      &-2 {
        bottom: -50%;
        right: -50%;
        animation: wave 15s linear infinite reverse;
      }

      &-3 {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        animation: wave 25s linear infinite;
      }
    }
  }

  .player-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px;

    .player-header {
      margin-bottom: 32px;

      .el-button {
        color: white;

        &:hover {
          color: #667eea;
        }
      }
    }

    .player-main {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

      .course-cover {
        width: 240px;
        height: 240px;
        margin: 0 auto 32px;
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);

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

        .cover-overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.4);
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .course-info {
        text-align: center;
        margin-bottom: 40px;

        .course-title {
          font-size: 28px;
          font-weight: 600;
          color: white;
          margin-bottom: 8px;
        }

        .course-instructor {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.7);
        }
      }

      .audio-controls {
        .progress-bar {
          display: flex;
          align-items: center;
          gap: 16px;
          margin-bottom: 32px;

          .time-display {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
            min-width: 50px;
          }

          .audio-slider {
            flex: 1;

            :deep(.el-slider__runway) {
              background-color: rgba(255, 255, 255, 0.2);
            }

            :deep(.el-slider__bar) {
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            }

            :deep(.el-slider__button) {
              border: 2px solid #667eea;
            }
          }
        }

        .control-buttons {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 24px;
          margin-bottom: 32px;

          .el-button {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;

            &:hover {
              background: rgba(255, 255, 255, 0.2);
              border-color: rgba(255, 255, 255, 0.3);
            }

            &.play-button {
              width: 80px;
              height: 80px;
              background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
              border: none;

              &:hover {
                transform: scale(1.05);
              }
            }
          }
        }

        .extra-controls {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .speed-control,
          .volume-control {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255, 255, 255, 0.8);

            span {
              font-size: 14px;
            }

            .el-select {
              width: 100px;

              :deep(.el-input__inner) {
                background: rgba(255, 255, 255, 0.1);
                border-color: rgba(255, 255, 255, 0.2);
                color: white;
              }
            }

            .el-icon {
              cursor: pointer;

              &:hover {
                color: #667eea;
              }
            }

            .el-slider {
              :deep(.el-slider__runway) {
                background-color: rgba(255, 255, 255, 0.2);
              }

              :deep(.el-slider__bar) {
                background: #667eea;
              }
            }
          }
        }
      }

      .playlist {
        margin-top: 40px;
        padding-top: 32px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);

        .playlist-title {
          font-size: 18px;
          font-weight: 600;
          color: white;
          margin-bottom: 20px;
        }

        .playlist-items {
          .playlist-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background: rgba(255, 255, 255, 0.1);
            }

            &.active {
              background: rgba(102, 126, 234, 0.2);

              .item-title {
                color: #667eea;
              }
            }

            .item-index {
              width: 30px;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.5);
            }

            .item-info {
              flex: 1;
              margin-left: 12px;

              .item-title {
                font-size: 14px;
                color: white;
                margin-bottom: 4px;
              }

              .item-duration {
                font-size: 12px;
                color: rgba(255, 255, 255, 0.5);
              }
            }

            .playing-icon {
              color: #667eea;
            }
          }
        }
      }
    }
  }
}

@keyframes wave {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 响应式
@media (max-width: 768px) {
  .audio-player-container {
    .player-main {
      padding: 24px !important;

      .course-cover {
        width: 180px;
        height: 180px;
      }

      .extra-controls {
        flex-direction: column;
        gap: 16px;
      }
    }
  }
}
</style>
