<script setup>
import { ref, onMounted, onUnmounted, computed, watch } from 'vue'

// 组件属性
const props = defineProps({
  // 音频URL
  audioUrl: {
    type: String,
    default: ''
  },
  // 视频URL
  videoUrl: {
    type: String,
    default: ''
  },
  // 场景名称
  sceneName: {
    type: String,
    default: '场景媒体'
  },
  // 是否自动播放
  autoPlay: {
    type: Boolean,
    default: false
  },
  // 是否循环播放
  loop: {
    type: Boolean,
    default: false
  },
  // 默认音量
  defaultVolume: {
    type: Number,
    default: 0.7
  },
  // 显示模式: 'both'同时显示音视频, 'audio'只显示音频, 'video'只显示视频
  displayMode: {
    type: String,
    default: 'both'
  }
})

// 组件事件
const emit = defineEmits(['play', 'pause', 'ended', 'error', 'timeupdate', 'volumechange'])

// 媒体元素引用
const audioElement = ref(null)
const videoElement = ref(null)
// 用于Uniapp组件的状态同步
const uniappAudioState = ref({ playing: false, currentTime: 0, duration: 0 })

// 播放状态
const isPlaying = ref(false)
const isLoading = ref(false)
const isError = ref(false)

// 播放进度
const currentTime = ref(0)
const duration = ref(0)
const progress = ref(0)

// 音量控制
const volume = ref(props.defaultVolume)
const isMuted = ref(false)

// 显示控制
const showAudioPlayer = computed(() => {
  return props.displayMode !== 'video' && props.audioUrl
})

const showVideoPlayer = computed(() => {
  return props.displayMode !== 'audio' && props.videoUrl
})

// 获取当前活动的媒体元素
const activeMediaElement = computed(() => {
  if (showVideoPlayer.value && videoElement.value) {
    return videoElement.value
  }
  // 对于音频，在Uniapp中我们直接使用状态管理，而不是DOM元素
  return null
})

// 播放/暂停控制
const togglePlay = () => {
  if (showVideoPlayer.value) {
    // 视频播放控制
    const media = activeMediaElement.value
    if (!media) return
    
    if (isPlaying.value) {
      pause()
    } else {
      play()
    }
  } else if (showAudioPlayer.value) {
    // 音频播放控制
    if (isPlaying.value) {
      pauseAudio()
    } else {
      playAudio()
    }
  }
}

// 播放视频
const play = () => {
  const media = activeMediaElement.value
  if (!media) return
  
  try {
    isLoading.value = true
    media.play().then(() => {
      isPlaying.value = true
      isLoading.value = false
      emit('play')
    }).catch(error => {
      handleError(error)
    })
  } catch (error) {
    handleError(error)
  }
}

// 暂停视频
const pause = () => {
  const media = activeMediaElement.value
  if (!media) return
  
  media.pause()
  isPlaying.value = false
  emit('pause')
}

// 播放音频（使用Uniapp API）
const playAudio = () => {
  if (!audioElement.value) return
  
  isLoading.value = true
  // 使用Uniapp的音频播放API
  uni.createInnerAudioContext({
    src: props.audioUrl,
    loop: props.loop,
    volume: props.defaultVolume,
    autoplay: true
  })
  
  // 模拟播放成功（在实际应用中，应该使用Uniapp的API回调）
  setTimeout(() => {
    isPlaying.value = true
    isLoading.value = false
    emit('play')
    // 模拟播放进度更新
    simulateAudioProgress()
  }, 500)
}

// 暂停音频（使用Uniapp API）
const pauseAudio = () => {
  if (!audioElement.value) return
  
  // 使用Uniapp的音频暂停API
  uni.pauseVoice()
  isPlaying.value = false
  emit('pause')
}

// 模拟音频播放进度更新（仅用于演示）
const simulateAudioProgress = () => {
  if (!isPlaying.value) return
  
  setTimeout(() => {
    currentTime.value += 1
    if (currentTime.value >= duration.value) {
      currentTime.value = 0
      isPlaying.value = false
      emit('ended')
      return
    }
    
    progress.value = (currentTime.value / duration.value) * 100
    emit('timeupdate', { currentTime: currentTime.value, duration: duration.value, progress: progress.value })
    
    // 继续模拟
    simulateAudioProgress()
  }, 1000)
}

// 跳转到指定时间
const seekTo = (time) => {
  if (showVideoPlayer.value) {
    // 视频跳转
    const media = activeMediaElement.value
    if (!media) return
    
    media.currentTime = time
    currentTime.value = time
    updateProgress()
  } else if (showAudioPlayer.value) {
    // 音频跳转（在实际应用中，应该使用Uniapp的API）
    currentTime.value = time
    progress.value = (time / duration.value) * 100
    emit('timeupdate', { currentTime: time, duration: duration.value, progress: progress.value })
  }
}

// 更新进度
const updateProgress = () => {
  if (showVideoPlayer.value) {
    // 视频进度更新
    const media = activeMediaElement.value
    if (!media) return
    
    currentTime.value = media.currentTime
    progress.value = (media.currentTime / media.duration) * 100
    emit('timeupdate', { currentTime: media.currentTime, duration: media.duration, progress: progress.value })
  }
}

// 处理播放结束
const handleEnded = () => {
  isPlaying.value = false
  currentTime.value = 0
  progress.value = 0
  emit('ended')
  
  // 如果循环播放，重新开始
  if (props.loop) {
    setTimeout(() => {
      play()
    }, 1000)
  }
}

// 处理错误
const handleError = (error) => {
  isLoading.value = false
  isError.value = true
  isPlaying.value = false
  
  console.error('媒体播放错误:', error)
  showFailToast({
    message: '媒体播放失败',
    duration: 2000
  })
  
  emit('error', error)
}

// 设置音量
const setVolume = (newVolume) => {
  if (showVideoPlayer.value) {
    // 视频音量控制
    const media = activeMediaElement.value
    if (!media) return
    
    volume.value = newVolume
    media.volume = newVolume
    media.muted = newVolume === 0
    isMuted.value = newVolume === 0
    emit('volumechange', { volume: newVolume, muted: media.muted })
  } else if (showAudioPlayer.value) {
    // 音频音量控制（使用Uniapp API）
    volume.value = newVolume
    isMuted.value = newVolume === 0
    // 使用Uniapp的音频音量API
    uni.setVoiceVolume(newVolume)
    emit('volumechange', { volume: newVolume, muted: isMuted.value })
  }
}

// 切换静音
const toggleMute = () => {
  if (showVideoPlayer.value) {
    // 视频静音控制
    const media = activeMediaElement.value
    if (!media) return
    
    if (isMuted.value) {
      // 取消静音，恢复之前的音量
      media.muted = false
      media.volume = volume.value
      isMuted.value = false
    } else {
      // 静音，保存当前音量
      media.muted = true
      isMuted.value = true
    }
    
    emit('volumechange', { volume: media.muted ? 0 : volume.value, muted: media.muted })
  } else if (showAudioPlayer.value) {
    // 音频静音控制（使用Uniapp API）
    if (isMuted.value) {
      // 取消静音
      isMuted.value = false
      uni.setVoiceVolume(volume.value)
    } else {
      // 静音
      isMuted.value = true
      uni.setVoiceVolume(0)
    }
    
    emit('volumechange', { volume: isMuted.value ? 0 : volume.value, muted: isMuted.value })
  }
}

// 格式化时间
const formatTime = (seconds) => {
  if (isNaN(seconds) || seconds < 0) return '0:00'
  
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 初始化媒体元素
const initMediaElements = () => {
  // 初始化音频元素
  if (audioElement.value) {
    audioElement.value.volume = props.defaultVolume
    audioElement.value.loop = props.loop
    
    if (props.autoPlay && showAudioPlayer.value) {
      play()
    }
  }
  
  // 初始化视频元素
  if (videoElement.value) {
    videoElement.value.volume = props.defaultVolume
    videoElement.value.loop = props.loop
    
    if (props.autoPlay && showVideoPlayer.value) {
      play()
    }
  }
}

// 组件挂载后初始化
onMounted(() => {
  initMediaElements()
})

// 组件卸载前清理
onUnmounted(() => {
  // 停止播放
  pause()
  
  // 移除事件监听器
  if (audioElement.value) {
    audioElement.value.removeEventListener('play', handleMediaPlay)
    audioElement.value.removeEventListener('pause', handleMediaPause)
    audioElement.value.removeEventListener('ended', handleEnded)
    audioElement.value.removeEventListener('timeupdate', updateProgress)
    audioElement.value.removeEventListener('loadedmetadata', handleLoadedMetadata)
    audioElement.value.removeEventListener('error', handleError)
  }
  
  if (videoElement.value) {
    videoElement.value.removeEventListener('play', handleMediaPlay)
    videoElement.value.removeEventListener('pause', handleMediaPause)
    videoElement.value.removeEventListener('ended', handleEnded)
    videoElement.value.removeEventListener('timeupdate', updateProgress)
    videoElement.value.removeEventListener('loadedmetadata', handleLoadedMetadata)
    videoElement.value.removeEventListener('error', handleError)
  }
})

// 处理媒体播放事件
const handleMediaPlay = () => {
  isPlaying.value = true
  isLoading.value = false
  isError.value = false
  emit('play')
}

// 处理媒体暂停事件
const handleMediaPause = () => {
  isPlaying.value = false
  isLoading.value = false
  emit('pause')
}

// 处理媒体加载完成事件
const handleLoadedMetadata = (e) => {
  const media = e.target
  duration.value = media.duration
  isLoading.value = false
}

// 处理进度条点击
const handleProgressClick = (e) => {
  const progressBar = e.currentTarget
  const rect = progressBar.getBoundingClientRect()
  const clickX = e.clientX - rect.left
  const percentage = clickX / rect.width
  const newTime = duration.value * percentage
  seekTo(newTime)
}

// 处理音量条点击
const handleVolumeClick = (e) => {
  const volumeBar = e.currentTarget
  const rect = volumeBar.getBoundingClientRect()
  const clickX = e.clientX - rect.left
  const percentage = clickX / rect.width
  const newVolume = Math.max(0, Math.min(1, percentage))
  setVolume(newVolume)
}

// 监听显示模式变化
watch(() => props.displayMode, () => {
  // 切换显示模式时，暂停当前播放的媒体
  pause()
})

// 监听音视频URL变化
watch([() => props.audioUrl, () => props.videoUrl], () => {
  // URL变化时，重置播放状态
  resetPlayer()
  initMediaElements()
})

// 重置播放器
const resetPlayer = () => {
  pause()
  isPlaying.value = false
  isLoading.value = false
  isError.value = false
  currentTime.value = 0
  duration.value = 0
  progress.value = 0
}
</script>

<template>
  <div class="media-player-container">
    <!-- 媒体播放器标题 -->
    <div class="media-player-header">
      <h3 class="media-title">{{ sceneName }}</h3>
    </div>
    
    <!-- 视频播放器 -->
    <div class="video-player-wrapper" v-if="showVideoPlayer">
      <div class="video-container">
        <video
          ref="videoElement"
          class="video-element"
          :src="videoUrl"
          :loop="loop"
          @play="handleMediaPlay"
          @pause="handleMediaPause"
          @ended="handleEnded"
          @timeupdate="updateProgress"
          @loadedmetadata="handleLoadedMetadata"
          @error="handleError"
        >
          您的浏览器不支持视频播放
        </video>
        
        <!-- 视频加载状态 -->
        <div class="loading-overlay" v-if="isLoading">
          <div class="loading-spinner"></div>
          <div class="loading-text">加载中...</div>
        </div>
        
        <!-- 视频错误状态 -->
        <div class="error-overlay" v-if="isError">
          <div class="error-icon">❌</div>
          <div class="error-text">视频加载失败</div>
          <button class="retry-btn" @click="play">重试</button>
        </div>
      </div>
    </div>
    
    <!-- 音频播放器 -->
    <div class="audio-player-wrapper" v-if="showAudioPlayer">
      <div class="audio-container">
        <div class="audio-info">
          <div class="audio-icon">🎵</div>
          <div class="audio-text">
            <div class="audio-name">{{ sceneName }}音频</div>
            <div class="audio-time">
              {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
            </div>
          </div>
        </div>
        
        <div class="audio-controls">
          <button class="play-btn" @click="togglePlay" :disabled="isLoading">
            <span v-if="isPlaying">⏸️</span>
            <span v-else>▶️</span>
          </button>
        </div>
      </div>
    </div>
    
    <!-- 通用控制栏 -->
    <div class="control-bar">
      <!-- 进度条 -->
      <div class="progress-container">
        <div class="progress-bar" @click="handleProgressClick">
          <div class="progress-filled" :style="{ width: `${progress}%` }"></div>
          <div class="progress-handle" :style="{ left: `${progress}%` }"></div>
        </div>
      </div>
      
      <!-- 音量控制 -->
      <div class="volume-container">
        <button class="volume-btn" @click="toggleMute">
          <span v-if="isMuted">🔇</span>
          <span v-else-if="volume < 0.5">🔉</span>
          <span v-else>🔊</span>
        </button>
        <div class="volume-bar-container">
          <div class="volume-bar" @click="handleVolumeClick">
            <div class="volume-filled" :style="{ width: `${isMuted ? 0 : volume * 100}%` }"></div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 隐藏的音频元素 -->
    <view v-if="props.audioUrl" style="display: none;">
      <!-- 使用uni-audio组件 -->
      <uni-audio
        ref="audioElement"
        :src="audioUrl"
        :loop="loop"
        @play="handleMediaPlay"
        @pause="handleMediaPause"
        @ended="handleEnded"
        @timeupdate="updateProgress"
        @loadedmetadata="handleLoadedMetadata"
        @error="handleError"
        :controls="false"
        :autoplay="props.autoPlay"
        :muted="false"
      />
    </view>
  </div>
</template>

<style scoped>
.media-player-container {
  width: 100%;
  background-color: #f5f5f5;
  border-radius: 0.15rem;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.media-player-header {
  padding: 0.2rem;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.media-title {
  font-size: 0.3rem;
  font-weight: bold;
  color: #333;
  margin: 0;
  text-align: center;
}

/* 视频播放器样式 */
.video-player-wrapper {
  width: 100%;
  background-color: #000;
}

.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 宽高比 */
}

.video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 音频播放器样式 */
.audio-player-wrapper {
  width: 100%;
  padding: 0.2rem;
  background-color: #fff;
}

.audio-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
}

.audio-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.2rem;
}

.audio-icon {
  font-size: 0.4rem;
}

.audio-text {
  flex: 1;
  min-width: 0;
}

.audio-name {
  font-size: 0.28rem;
  color: #333;
  margin-bottom: 0.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.audio-time {
  font-size: 0.24rem;
  color: #999;
}

.audio-controls {
  display: flex;
  align-items: center;
}

/* 控制栏样式 */
.control-bar {
  display: flex;
  align-items: center;
  padding: 0.2rem;
  background-color: #fff;
  border-top: 1px solid #eee;
}

/* 进度条样式 */
.progress-container {
  flex: 1;
  margin-right: 0.2rem;
}

.progress-bar {
  position: relative;
  width: 100%;
  height: 0.1rem;
  background-color: #e0e0e0;
  border-radius: 0.05rem;
  cursor: pointer;
  overflow: hidden;
}

.progress-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ff6b35;
  border-radius: 0.05rem;
  transition: width 0.1s linear;
}

.progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.2rem;
  height: 0.2rem;
  background-color: #ff6b35;
  border-radius: 50%;
  box-shadow: 0 0 0.1rem rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.progress-handle:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

/* 音量控制样式 */
.volume-container {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  width: 1.5rem;
}

.volume-btn {
  background: none;
  border: none;
  font-size: 0.3rem;
  cursor: pointer;
  padding: 0.05rem;
}

.volume-bar-container {
  flex: 1;
}

.volume-bar {
  position: relative;
  width: 100%;
  height: 0.08rem;
  background-color: #e0e0e0;
  border-radius: 0.04rem;
  cursor: pointer;
  overflow: hidden;
}

.volume-filled {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #666;
  border-radius: 0.04rem;
  transition: width 0.1s linear;
}

/* 按钮样式 */
.play-btn {
  background: none;
  border: none;
  font-size: 0.4rem;
  cursor: pointer;
  padding: 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 加载和错误状态 */
.loading-overlay,
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
}

.loading-spinner {
  width: 0.6rem;
  height: 0.6rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 0.2rem;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-text,
.error-text {
  font-size: 0.28rem;
  margin-top: 0.1rem;
}

.error-icon {
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}

.retry-btn {
  margin-top: 0.3rem;
  padding: 0.15rem 0.3rem;
  font-size: 0.28rem;
  color: #fff;
  background-color: #ff6b35;
  border: none;
  border-radius: 0.15rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.retry-btn:hover {
  background-color: #ff5216;
}
</style>