<template>
  <view class="player-container">
    <!-- 小说封面和标题区域 -->
    <view class="novel-info">
      <image 
        class="novel-cover" 
        src="https://picsum.photos/300/400" 
        mode="widthFix"
        alt="小说封面图"
      ></image>
      <view class="novel-title">{{ currentNovel.title }}</view>
      <view class="chapter-title">{{ currentChapter.title }}</view>
    </view>
    
    <!-- 进度条区域 -->
    <view class="progress-container">
      <text class="time">{{ formatTime(currentTime) }}</text>
      <view class="progress-bar">
        <view 
          class="progress-track"
          @click="changeProgress"
        >
          <view 
            class="progress-played" 
            :style="{ width: progress + '%' }"
          ></view>
          <view 
            class="progress-thumb"
            :style="{ left: progress + '%' }"
            @touchstart="startDrag"
            @touchmove="dragProgress"
            @touchend="endDrag"
          ></view>
        </view>
      </view>
      <text class="time">{{ formatTime(duration) }}</text>
    </view>
    
    <!-- 控制按钮区域 -->
    <view class="controls">
      <button 
        class="control-btn prev-btn"
        @click="prevChapter"
        :disabled="currentChapterIndex <= 0"
      >
        <i class="iconfont icon-prev"></i>
        <text>上一章</text>
      </button>
      
      <button 
        class="control-btn play-btn"
        @click="togglePlay"
      >
        <i class="iconfont" :class="isPlaying ? 'icon-pause' : 'icon-play'"></i>
      </button>
      
      <button 
        class="control-btn next-btn"
        @click="nextChapter"
        :disabled="currentChapterIndex >= novelData.chapters.length - 1"
      >
        <text>下一章</text>
        <i class="iconfont icon-next"></i>
      </button>
    </view>
    
    <!-- 章节列表弹窗 -->
    <view class="chapter-modal" v-if="showChapterList">
      <view class="modal-content">
        <view class="modal-header">
          <text>章节列表</text>
          <button class="close-btn" @click="showChapterList = false">
            <i class="iconfont icon-close"></i>
          </button>
        </view>
        <scroll-view class="chapter-list" scroll-y>
          <view 
            class="chapter-item"
            v-for="(chapter, index) in novelData.chapters" 
            :key="index"
            @click="switchChapter(index)"
            :class="{ active: index === currentChapterIndex }"
          >
            <text>{{ chapter.title }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 章节列表按钮 -->
    <button class="chapter-list-btn" @click="showChapterList = true">
      <i class="iconfont icon-list"></i>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 小说数据
      novelData: {
        title: "三体",
        chapters: [
         { id: 1, title: "第1章 科学边界", audioUrl: "https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" },
          { id: 2, title: "第2章 射手和农场主", audioUrl: "https://des.dayunyuanjian.cn/data/2025/09/05/286e6a8d-4433-4d69-b705-74b3f4237667.MP3" },
          { id: 3, title: "第3章 疯狂年代", audioUrl: "https://des.dayunyuanjian.cn/data/2025/09/05/5d7caee5-ce7f-4e55-bf71-e574b486473c.MP3" },
          { id: 4, title: "第4章 叶文洁", audioUrl: "https://des.dayunyuanjian.cn/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3" },
          { id: 5, title: "第5章 宇宙闪烁", audioUrl: "https://des.dayunyuanjian.cn/data/2025/09/05/fac61c02-6cfd-41bf-9270-0ecd69881da2.MP3" }
        ]
      },
      currentChapterIndex: 0,
      isPlaying: false,
      currentTime: 0,
      duration: 0,
      progress: 0,
      audioContext: null,
      isDragging: false,
      showChapterList: false
    };
  },
  computed: {
    currentNovel() {
      return this.novelData;
    },
    currentChapter() {
      return this.novelData.chapters[this.currentChapterIndex];
    }
  },
  onLoad() {
    // 创建音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.autoplay = false;
    
    // 设置初始音频源
    this.setAudioSource();
    
    // 监听音频播放事件
    this.audioContext.onPlay(() => {
      this.isPlaying = true;
    });
    
    this.audioContext.onPause(() => {
      this.isPlaying = false;
    });
    
    this.audioContext.onTimeUpdate(() => {
      if (!this.isDragging) {
        this.currentTime = this.audioContext.currentTime;
        this.duration = this.audioContext.duration;
        this.progress = (this.currentTime / this.duration) * 100;
      }
    });
    
    // 监听音频结束事件，自动播放下一章
    this.audioContext.onEnded(() => {
      this.nextChapter();
    });
    
    // 监听音频加载事件
    this.audioContext.onCanplay(() => {
      this.duration = this.audioContext.duration;
    });
  },
  onUnload() {
    // 页面卸载时销毁音频上下文
    this.audioContext.destroy();
  },
  methods: {
    // 设置音频源
    setAudioSource() {
      const wasPlaying = this.isPlaying;
      this.audioContext.src = this.currentChapter.audioUrl;
      
      // 如果之前是播放状态，设置完源后继续播放
      if (wasPlaying) {
        this.audioContext.play();
      }
    },
    
    // 切换播放/暂停状态
    togglePlay() {
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
    },
    
    // 上一章
    prevChapter() {
      if (this.currentChapterIndex > 0) {
        this.currentChapterIndex--;
        this.setAudioSource();
        this.audioContext.play();
      }
    },
    
    // 下一章
    nextChapter() {
      if (this.currentChapterIndex < this.novelData.chapters.length - 1) {
        this.currentChapterIndex++;
        this.setAudioSource();
        this.audioContext.play();
      }
    },
    
    // 切换到指定章节
    switchChapter(index) {
      this.currentChapterIndex = index;
      this.setAudioSource();
      this.audioContext.play();
      this.showChapterList = false;
    },
    
    // 格式化时间（秒 -> mm:ss）
    formatTime(seconds) {
      if (isNaN(seconds)) return "00:00";
      const mins = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    },
    
    // 开始拖动进度条
    startDrag() {
      this.isDragging = true;
    },
    
    // 拖动进度条
    dragProgress(e) {
      if (!this.isDragging) return;
      
      // 获取进度条宽度和点击位置
      const progressBarWidth = e.currentTarget.offsetWidth;
      const touchX = e.touches[0].clientX - e.currentTarget.offsetLeft;
      
      // 计算进度百分比
      let percent = (touchX / progressBarWidth) * 100;
      percent = Math.max(0, Math.min(100, percent)); // 限制在0-100之间
      
      this.progress = percent;
      this.currentTime = (percent / 100) * this.duration;
    },
    
    // 结束拖动进度条
    endDrag() {
      if (!this.isDragging) return;
      
      this.isDragging = false;
      // 设置音频进度
      this.audioContext.seek(this.currentTime);
      
      // 如果之前是播放状态，继续播放
      if (this.isPlaying) {
        this.audioContext.play();
      }
    },
    
    // 点击进度条改变进度
    changeProgress(e) {
      if (this.isDragging) return;
      
      // 获取进度条宽度和点击位置
      const progressBarWidth = e.currentTarget.offsetWidth;
      const touchX = e.touches ? e.touches[0].clientX : e.clientX;
      const clickX = touchX - e.currentTarget.offsetLeft;
      
      // 计算进度百分比
      let percent = (clickX / progressBarWidth) * 100;
      percent = Math.max(0, Math.min(100, percent)); // 限制在0-100之间
      
      this.progress = percent;
      this.currentTime = (percent / 100) * this.duration;
      this.audioContext.seek(this.currentTime);
    }
  }
};
</script>

<style scoped>
.player-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
  box-sizing: border-box;
}

.novel-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 60rpx;
  width: 100%;
}

.novel-cover {
  width: 240rpx;
  height: 320rpx;
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
  margin-bottom: 30rpx;
}

.novel-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  text-align: center;
}

.chapter-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 60rpx;
  text-align: center;
  max-width: 80%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  box-sizing: border-box;
  margin-bottom: 80rpx;
}

.time {
  font-size: 24rpx;
  color: #999;
  width: 80rpx;
}

.progress-bar {
  flex: 1;
  padding: 0 20rpx;
}

.progress-track {
  height: 8rpx;
  background-color: #e0e0e0;
  border-radius: 4rpx;
  position: relative;
}

.progress-played {
  height: 100%;
  background-color: #007aff;
  border-radius: 4rpx;
  position: absolute;
  left: 0;
  top: 0;
}

.progress-thumb {
  width: 24rpx;
  height: 24rpx;
  background-color: #007aff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.5);
}

.controls {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 120rpx;
}

.control-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0 20rpx;
}

.control-btn::after {
  border: none;
}

.prev-btn, .next-btn {
  color: #666;
  font-size: 24rpx;
}

.play-btn {
  width: 120rpx;
  height: 120rpx;
  background-color: #007aff;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.iconfont {
  font-size: 48rpx;
}

.play-btn .iconfont {
  font-size: 56rpx;
}

.prev-btn .iconfont, .next-btn .iconfont {
  margin: 8rpx 0;
}

.chapter-list-btn {
  position: fixed;
  bottom: 40rpx;
  right: 40rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #007aff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
  border: none;
}

.chapter-list-btn::after {
  border: none;
}

.chapter-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: flex-end;
  z-index: 999;
}

.modal-content {
  width: 70%;
  max-width: 500rpx;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
}

.modal-header {
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 30rpx;
  font-weight: bold;
}

.close-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 36rpx;
}

.close-btn::after {
  border: none;
}

.chapter-list {
  flex: 1;
  padding: 20rpx 0;
}

.chapter-item {
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}

.chapter-item.active {
  background-color: #f0f7ff;
  color: #007aff;
}

/* 图标字体样式 */
@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/font_2493751_2x4w6q4k59l.ttf') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\e61c";
}

.icon-pause:before {
  content: "\e61d";
}

.icon-prev:before {
  content: "\e61e";
}

.icon-next:before {
  content: "\e61f";
}

.icon-list:before {
  content: "\e620";
}

.icon-close:before {
  content: "\e621";
}
</style>
