<template>
  <view class="novel-player-container">
    <!-- 1. 小说封面图区域（适配多端屏幕比例） -->
    <view class="novel-cover-wrapper">
      <!-- 封面图：加载态+失败备用 -->
      <image 
        class="novel-cover"
        :class="{ 'cover-loading': isCoverLoading }"
        :src="showImg('/uploads/20250918/478322390dfe8befd6fb30643e1b5cb1.png')"
        mode="widthFix"  
        @load="isCoverLoading = false"
        @error="handleCoverError"
        lazy-load  
      ></image>
      <!-- 封面加载失败备用视图 -->
      <view class="cover-fallback" v-if="isCoverError">
        <uni-icons type="image" size="40" color="#999"></uni-icons>
        <text class="fallback-text">封面加载失败</text>
      </view>
    </view>

    <!-- 2. 小说信息区域 -->
    <view class="novel-info">
      <text class="novel-title">园界修真传</text>
      <text class="novel-chapter">第1章：考研失败是有原因的</text>
    </view>

    <!-- 3. 音频核心控制区域 -->
    <view class="audio-player">
      <!-- Uniapp 音频组件（替代原生audio，支持多端） -->
      <uni-audio
        ref="audioRef"
        :src="audioUrl"
        :preload="preloadMode"
        :initial-time="0"
        @play="updatePlayStatus(true)"
        @pause="updatePlayStatus(false)"
        @ended="handleAudioEnd"
        @timeupdate="updateProgress"
        @error="handleAudioError"
        hidden 
      ></uni-audio>

      <!-- 播放/暂停按钮 -->
      <button 
        class="play-btn"
        :disabled="isAudioLoading"
        @click="togglePlayPause"
        hover-class="play-btn-hover" 
      >
        <uni-icons 
          :type="isPlaying ? 'pause' : 'play'" 
          size="24" 
          color="#fff"
        ></uni-icons>
      </button>

      <!-- 进度条控制（支持点击+拖动） -->
      <view class="progress-container" @click="handleProgressClick">
        <!-- 已播放进度 -->
        <view 
          class="progress-played"
          :style="{ width: `${progressPercent}%` }"
        ></view>
        <!-- 进度滑块 -->
        <view 
          class="progress-thumb"
          :style="{ left: `${progressPercent}%` }"
          @touchstart="startDragProgress"  
          @touchmove="onDragProgress"    
          @touchend="endDragProgress"    
        ></view>
      </view>

      <!-- 时间显示（已播放/总时长） -->
      <view class="time-display">
        <text>{{ formatTime(currentTime) }}</text>
        <text class="time-split">/</text>
        <text>{{ formatTime(totalTime) }}</text>
      </view>

      <!-- 音量控制 -->
      <view class="volume-control">
        <uni-icons 
          :type="isMuted ? 'volume-off' : 'volume-up'" 
          size="18" 
          color="#666"
          @click="toggleMute"
        ></uni-icons>
        <slider 
          class="volume-slider"
          min="0"
          max="100"
          :value="currentVolume"
          @change="adjustVolume"  
          activeColor="#32c5ff"   
        ></slider>
      </view>

      <!-- 清晰度选择（模拟多音质切换） -->
      <view class="quality-select">
        <text class="quality-label">清晰度：</text>
        <picker 
          class="quality-picker"
          :value="selectedQuality"
          :range="qualityOptions"
          :range-key="'label'"
          @change="switchAudioQuality" 
        >
          <text>{{ qualityOptions.find(item => item.value === selectedQuality).label }}</text>
          <uni-icons type="down" size="14" color="#666" class="picker-icon"></uni-icons>
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PlayNovel',
  data() {
    return {
      // 图片配置
      coverUrl: '/static/image.png',  // 封面图路径（Uniapp 静态资源放static目录）
      isCoverLoading: true,           // 封面加载状态
      isCoverError: false,            // 封面加载失败状态

      // 音频配置
      audioUrl: 'https://des.dayunyuanjian.cn/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3',                   // 音频文件路径（需替换为实际地址，支持本地/CDN）
      preloadMode: 'auto',            // 预加载策略：auto/metadata/none
      isAudioLoading: false,          // 音频加载状态
      isPlaying: false,               // 播放状态
      currentTime: 0,                 // 当前播放时间（秒）
      totalTime: 0,                   // 音频总时长（秒）
      progressPercent: 0,             // 播放进度百分比（0-100）
      currentVolume: 80,              // 当前音量（0-100）
      isMuted: false,                 // 静音状态
      isDragging: false,              // 进度条拖动状态

      // 清晰度配置（需后端提供对应音质的音频地址）
      qualityOptions: [
        { label: '标准', value: 'low' },
        { label: '高清', value: 'medium' },
        { label: '无损', value: 'high' }
      ],
      selectedQuality: 'medium'       // 默认高清
    };
  },
  onReady() {
    // Uniapp 组件就绪后获取音频实例
    this.audioRef = this.$refs.audioRef;
    // 初始化音量
    this.audioRef.setVolume(this.currentVolume / 100);
    // 初始化音频地址（可根据清晰度默认值设置）
    this.switchAudioQuality({ detail: { value: 'medium' } });
  },
  onUnload() {
    // 页面卸载时停止播放，释放资源
    if (this.audioRef) {
      this.audioRef.pause();
    }
  },
  methods: {
    // ---------------------- 图片相关方法 ----------------------
    handleCoverError() {
      this.isCoverLoading = false;
      this.isCoverError = true;
    },

    // ---------------------- 音频核心控制 ----------------------
    // 切换播放/暂停
    togglePlayPause() {
      if (this.isPlaying) {
        this.audioRef.pause();
      } else {
        this.isAudioLoading = true;
        this.audioRef.play().catch(err => {
          console.error('播放失败：', err);
          this.isAudioLoading = false;
          uni.showToast({ title: '音频播放失败', icon: 'none' });
        });
      }
    },

    // 更新播放状态
    updatePlayStatus(isPlaying) {
      this.isPlaying = isPlaying;
      this.isAudioLoading = false;
    },

    // 音频播放完毕（可扩展下一章逻辑）
    handleAudioEnd() {
      this.isPlaying = false;
      this.currentTime = 0;
      this.progressPercent = 0;
      uni.showToast({ title: '本章播放完毕', icon: 'none' });
      // 如需自动下一章，可在此处调用章节切换逻辑
    },

    // 音频加载失败
    handleAudioError() {
      this.isAudioLoading = false;
      uni.showToast({ title: '音频加载失败', icon: 'none' });
    },

    // ---------------------- 进度条控制 ----------------------
    // 实时更新进度
    updateProgress() {
      if (!this.isDragging) {
        this.currentTime = this.audioRef.currentTime;
        this.totalTime = this.audioRef.duration || 0;
        this.progressPercent = (this.currentTime / this.totalTime) * 100 || 0;
      }
    },

    // 点击进度条跳转
    handleProgressClick(e) {
      const containerWidth = e.currentTarget.offsetWidth;
      const clickLeft = e.touches[0].clientX - e.currentTarget.offsetLeft;
      const percent = (clickLeft / containerWidth) * 100;
      this.setProgress(percent);
    },

    // 开始拖动进度条
    startDragProgress() {
      this.isDragging = true;
    },

    // 拖动进度条中
    onDragProgress(e) {
      if (!this.isDragging) return;
      const containerWidth = e.currentTarget.offsetWidth;
      const dragLeft = e.touches[0].clientX - e.currentTarget.offsetLeft;
      let percent = (dragLeft / containerWidth) * 100;
      // 限制进度在0-100之间
      percent = Math.max(0, Math.min(100, percent));
      this.progressPercent = percent;
    },

    // 结束拖动进度条
    endDragProgress() {
      this.isDragging = false;
      this.setProgress(this.progressPercent);
    },

    // 设置进度（通用方法）
    setProgress(percent) {
      const targetTime = (percent / 100) * this.totalTime;
      this.audioRef.seek(targetTime);
      this.currentTime = targetTime;
      this.progressPercent = percent;
    },

    // ---------------------- 音量控制 ----------------------
    // 切换静音
    toggleMute() {
      this.isMuted = !this.isMuted;
      this.audioRef.setMuted(this.isMuted);
    },

    // 调节音量
    adjustVolume(e) {
      this.currentVolume = e.detail.value;
      this.audioRef.setVolume(this.currentVolume / 100);
      // 调节音量时自动取消静音
      if (this.isMuted && this.currentVolume > 0) {
        this.isMuted = false;
        this.audioRef.setMuted(false);
      }
    },

    // ---------------------- 清晰度切换 ----------------------
    switchAudioQuality(e) {
      const quality = e.detail.value;
      this.selectedQuality = quality;
      // 此处需替换为实际音质对应的音频地址（示例格式）
      const audioMap = {
        low: '/static/audio/chapter1-low.mp3',
        medium: '/static/audio/chapter1-medium.mp3',
        high: '/static/audio/chapter1-high.mp3'
      };
      this.audioUrl = audioMap[quality];
      // 切换音频后保持播放状态
      if (this.isPlaying) {
        this.audioRef.play();
      }
    },

    // ---------------------- 工具方法 ----------------------
    // 格式化时间（秒 → 分:秒，如 8:16）
    formatTime(seconds) {
      if (!seconds) return '00:00';
      const min = Math.floor(seconds / 60);
      const sec = Math.floor(seconds % 60);
      // 补零处理（如 1 → 01）
      return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
/* 容器整体样式 */
.novel-player-container {
  padding: 20rpx;
  background: #595959;
  min-height: 100vh;
}

/* 封面图样式 */
.novel-cover-wrapper {
  width: 100%;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  position: relative;
}
.novel-cover {
  width: 100%;
  background-color: #f5f5f5;
}
.cover-loading {
  opacity: 0.5;
}
.cover-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}
.fallback-text {
  margin-top: 20rpx;
  font-size: 24rpx;
  color: #999;
}

/* 小说信息样式 */
.novel-info {
  margin-bottom: 30rpx;
  text-align: center;
}
.novel-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 10rpx;
  display: block;
}
.novel-chapter {
  font-size: 28rpx;
  color: #fff;
  display: block;
}

/* 音频播放器样式 */
.audio-player {
  display: flex;
  flex-direction: column;
  gap: 25rpx;
}

/* 播放按钮样式 */
.play-btn {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #32c5ff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}
.play-btn-hover {
  background-color: #28a4e0;
}

/* 进度条样式 */
.progress-container {
  width: 100%;
  height: 12rpx;
  background-color: #eee;
  border-radius: 6rpx;
  position: relative;
  touch-action: none;  /* 防止移动端默认触摸行为 */
}
.progress-played {
  height: 100%;
  background-color: #32c5ff;
  border-radius: 6rpx;
}
.progress-thumb {
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #32c5ff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: -12rpx;
  box-shadow: 0 0 10rpx rgba(50, 197, 255, 0.5);
}

/* 时间显示样式 */
.time-display {
  font-size: 24rpx;
  color: #999;
  display: flex;
  justify-content: space-between;
}
.time-split {
  margin: 0 10rpx;
}

/* 音量控制样式 */
.volume-control {
  display: flex;
  align-items: center;
  gap: 15rpx;
}
.volume-slider {
  flex: 1;
  height: 8rpx;
}

/* 清晰度选择样式 */
.quality-select {
  display: flex;
  align-items: center;
  gap: 15rpx;
  font-size: 26rpx;
  color: #666;
}
.quality-picker {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #32c5ff;
}
.picker-icon {
  margin-top: 4rpx;
}
</style>