<template>
  <div class="video-test-page">
    <div class="container">
      <h1>视频播放器测试</h1>
      
      <div class="test-controls">
        <div class="url-input">
          <label>视频URL:</label>
          <input 
            v-model="testVideoUrl" 
            type="text" 
            placeholder="输入视频URL"
            class="url-field"
          />
          <button @click="loadTestVideo" class="load-btn">加载视频</button>
        </div>
        
        <div class="preset-videos">
          <h3>预设视频:</h3>
          <button @click="loadPresetVideo('hls')" class="preset-btn">HLS测试视频</button>
          <button @click="loadPresetVideo('mp4')" class="preset-btn">MP4测试视频</button>
        </div>
      </div>

      <div class="video-section">
        <VideoPlayer
          :video-url="currentVideoUrl"
          :title="videoTitle"
          :description="videoDescription"
          :autoplay="false"
          :show-controls="true"
          @play="onPlay"
          @pause="onPause"
          @ended="onEnded"
          @timeupdate="onTimeUpdate"
          @error="onError"
        />
      </div>

      <div class="debug-info">
        <h3>调试信息:</h3>
        <div class="debug-item">
          <strong>当前URL:</strong> {{ currentVideoUrl }}
        </div>
        <div class="debug-item">
          <strong>播放状态:</strong> {{ isPlaying ? '播放中' : '已暂停' }}
        </div>
        <div class="debug-item">
          <strong>当前时间:</strong> {{ formatTime(currentTime) }}
        </div>
        <div class="debug-item">
          <strong>错误信息:</strong> {{ errorMessage || '无' }}
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VideoPlayer from '@/components/VideoPlayer.vue'

// 测试数据
const testVideoUrl = ref('http://110.42.96.65:55513/learn/hotgo/attachment/2025-07-26/30137510-ce75-433a-971c-52aae015c1b7.m3u8')
const currentVideoUrl = ref('')
const videoTitle = ref('测试视频')
const videoDescription = ref('这是一个测试视频，用于验证视频播放器功能')

// 播放状态
const isPlaying = ref(false)
const currentTime = ref(0)
const errorMessage = ref('')

// 预设视频
const presetVideos = {
  hls: 'http://110.42.96.65:55513/learn/hotgo/attachment/2025-07-26/30137510-ce75-433a-971c-52aae015c1b7.m3u8',
  mp4: 'https://vjs.zencdn.net/v/oceans.mp4'
}

// 方法
const loadTestVideo = () => {
  if (testVideoUrl.value.trim()) {
    currentVideoUrl.value = testVideoUrl.value.trim()
    errorMessage.value = ''
    console.log('加载测试视频:', currentVideoUrl.value)
  }
}

const loadPresetVideo = (type: 'hls' | 'mp4') => {
  currentVideoUrl.value = presetVideos[type]
  testVideoUrl.value = presetVideos[type]
  errorMessage.value = ''
  videoTitle.value = type === 'hls' ? 'HLS测试视频' : 'MP4测试视频'
  console.log('加载预设视频:', type, currentVideoUrl.value)
}

// 视频事件处理
const onPlay = () => {
  isPlaying.value = true
  console.log('视频开始播放')
}

const onPause = () => {
  isPlaying.value = false
  console.log('视频暂停')
}

const onEnded = () => {
  isPlaying.value = false
  console.log('视频播放结束')
}

const onTimeUpdate = (time: number) => {
  currentTime.value = time
}

const onError = (error: Event) => {
  console.error('视频播放错误:', error)
  errorMessage.value = '视频播放失败，请检查URL或网络连接'
  isPlaying.value = false
}

// 工具方法
const formatTime = (seconds: number): string => {
  const hours = Math.floor(seconds / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  const secs = Math.floor(seconds % 60)
  
  if (hours > 0) {
    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
  }
  return `${minutes}:${secs.toString().padStart(2, '0')}`
}

// 初始化
loadPresetVideo('hls')
</script>

<style scoped>
.video-test-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.test-controls {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.url-input {
  margin-bottom: 20px;
}

.url-input label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #333;
}

.url-field {
  width: 70%;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  margin-right: 10px;
}

.load-btn, .preset-btn {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s;
}

.load-btn:hover, .preset-btn:hover {
  background: #40a9ff;
}

.preset-videos h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 16px;
}

.preset-btn {
  margin-right: 10px;
  margin-bottom: 10px;
}

.video-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.debug-info {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.debug-info h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.debug-item {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.debug-item strong {
  color: #333;
  margin-right: 8px;
}
</style>
