<template>
  <div class="video-detail-page">
    <!-- 顶部导航栏 -->
    <div class="top-bar">
      <div class="logo">logo</div>
      <div class="top-actions">
        <el-icon class="action-icon"><User /></el-icon>
        <el-icon class="action-icon"><Setting /></el-icon>
        <el-icon class="action-icon"><Bell /></el-icon>
      </div>
    </div>

    <!-- 左侧导航栏 -->
    <aside class="sidebar">
      <div class="nav-item">
        <el-icon><Document /></el-icon>
        <span>文件</span>
      </div>
      <div class="nav-item">
        <el-icon><Picture /></el-icon>
        <span>图片</span>
      </div>
      <div class="nav-item">
        <el-icon><VideoPlay /></el-icon>
        <span>视频</span>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-content">
      <!-- 视频播放器区域 -->
      <div class="video-section">
        <div class="video-player">
          <video 
            ref="videoRef"
            :src="videoData.videoUrl" 
            @click="togglePlay"
            @timeupdate="updateTime"
            @loadedmetadata="onLoadedMetadata"
          >
            您的浏览器不支持视频播放
          </video>
          
          <!-- 视频控制栏 -->
          <div class="video-controls" v-show="showControls">
            <div class="controls-left">
              <el-button circle size="small" @click="togglePlay">
                <el-icon><VideoPlay v-if="!isPlaying" /><VideoPause v-else /></el-icon>
              </el-button>
              <span class="time-display">{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</span>
            </div>
            <div class="controls-right">
              <el-button circle size="small" @click="toggleFullscreen">
                <el-icon><FullScreen /></el-icon>
              </el-button>
            </div>
          </div>

          <!-- 视频操作按钮 -->
          <div class="video-actions">
            <el-tooltip content="分享" placement="bottom">
              <el-button circle size="small" @click="shareVideo">
                <el-icon><Share /></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="下载" placement="bottom">
              <el-button circle size="small" @click="downloadVideo">
                <el-icon><Download /></el-icon>
              </el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="bottom">
              <el-button circle size="small" @click="deleteVideo">
                <el-icon><Delete /></el-icon>
              </el-button>
            </el-tooltip>
          </div>
        </div>
      </div>

      <!-- 右侧详情区域 -->
      <div class="detail-section">
        <div class="detail-header">
          <h3>图片详情</h3>
          <p class="subtitle">参考生图</p>
        </div>

        <div class="detail-content">
          <div class="input-section">
            <el-input 
              v-model="detailInput" 
              placeholder="输入详情"
              type="textarea"
              :rows="3"
            />
          </div>

          <div class="thumbnails">
            <div class="thumbnail" v-for="(thumb, index) in thumbnails" :key="index">
              <img :src="thumb" :alt="`缩略图${index + 1}`" />
            </div>
          </div>

          <div class="description">
            <h4>描述</h4>
            <p>{{ videoData.description }}</p>
          </div>

          <div class="metadata">
            <div class="meta-item">
              <span class="label">创建时间</span>
              <span class="value">{{ videoData.createTime }}</span>
            </div>
            <div class="meta-item">
              <span class="label">视频 ID</span>
              <span class="value">{{ videoData.id }}</span>
            </div>
            <div class="meta-item">
              <span class="label">时长</span>
              <span class="value">{{ videoData.duration }}s</span>
            </div>
            <div class="meta-item">
              <span class="label">清晰度</span>
              <span class="value">{{ videoData.resolution }}</span>
            </div>
            <div class="meta-item">
              <span class="label">宽高比</span>
              <span class="value">{{ videoData.aspectRatio }}</span>
            </div>
          </div>

          <div class="action-button">
            <el-button type="primary" size="large" @click="makeSimilar">
              做同款
            </el-button>
          </div>
        </div>

        <!-- 滚动指示器 -->
        <div class="scroll-indicators">
          <el-icon class="scroll-arrow up"><ArrowUp /></el-icon>
          <el-icon class="scroll-arrow down"><ArrowDown /></el-icon>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  User, Setting, Bell, Document, Picture, VideoPlay, VideoPause,
  FullScreen, Share, Download, Delete, ArrowUp, ArrowDown
} from '@element-plus/icons-vue'

const route = useRoute()
const videoRef = ref(null)

// 视频播放状态
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const showControls = ref(true)

// 详情数据
const detailInput = ref('')
const videoData = ref({
  id: '2995697841305810',
  videoUrl: '/images/backgrounds/welcome.jpg', // 临时使用图片，实际应该是视频URL
  description: '图1在图2中奔跑视频',
  createTime: '2025/10/17 13:41',
  duration: 5,
  resolution: '1080p',
  aspectRatio: '16:9'
})

const thumbnails = ref([
  '/images/backgrounds/welcome.jpg',
  '/images/backgrounds/welcome.jpg'
])

// 视频控制方法
const togglePlay = () => {
  if (!videoRef.value) return
  
  if (isPlaying.value) {
    videoRef.value.pause()
  } else {
    videoRef.value.play()
  }
  isPlaying.value = !isPlaying.value
}

const updateTime = () => {
  if (videoRef.value) {
    currentTime.value = videoRef.value.currentTime
  }
}

const onLoadedMetadata = () => {
  if (videoRef.value) {
    duration.value = videoRef.value.duration
  }
}

const formatTime = (time) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
}

const toggleFullscreen = () => {
  if (!videoRef.value) return
  
  if (document.fullscreenElement) {
    document.exitFullscreen()
  } else {
    videoRef.value.requestFullscreen()
  }
}

// 操作按钮方法
const shareVideo = () => {
  ElMessage.info('分享功能开发中')
}

const downloadVideo = () => {
  ElMessage.success('开始下载视频')
}

const deleteVideo = async () => {
  try {
    await ElMessageBox.confirm('确定要删除这个视频吗？', '删除确认', {
      type: 'warning',
      confirmButtonText: '删除',
      cancelButtonText: '取消'
    })
    ElMessage.success('视频已删除')
  } catch (_) {}
}

const makeSimilar = () => {
  ElMessage.info('做同款功能开发中')
}

// 自动隐藏控制栏
let controlsTimer = null
const resetControlsTimer = () => {
  clearTimeout(controlsTimer)
  showControls.value = true
  controlsTimer = setTimeout(() => {
    showControls.value = false
  }, 3000)
}

onMounted(() => {
  // 监听鼠标移动来显示/隐藏控制栏
  document.addEventListener('mousemove', resetControlsTimer)
  resetControlsTimer()
})

onUnmounted(() => {
  clearTimeout(controlsTimer)
  document.removeEventListener('mousemove', resetControlsTimer)
})
</script>

<style scoped>
.video-detail-page {
  height: 100vh;
  background: #0a0a0a;
  color: white;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 顶部导航栏 */
.top-bar {
  height: 60px;
  background: #1a1a1a;
  border-bottom: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
}

.logo {
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.top-actions {
  display: flex;
  gap: 16px;
}

.action-icon {
  font-size: 20px;
  color: #cbd5e1;
  cursor: pointer;
  transition: color 0.3s;
}

.action-icon:hover {
  color: white;
}

/* 左侧导航栏 */
.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  width: 200px;
  height: calc(100vh - 60px);
  background: #1a1a1a;
  border-right: 1px solid #333;
  padding: 20px 0;
  z-index: 90;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  color: #cbd5e1;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-item:hover {
  background: #2a2a2a;
  color: white;
}

.nav-item .el-icon {
  margin-right: 12px;
  font-size: 18px;
}

/* 主内容区域 */
.main-content {
  margin-left: 200px;
  margin-top: 60px;
  height: calc(100vh - 60px);
  display: flex;
}

/* 视频播放器区域 */
.video-section {
  flex: 2;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-player {
  position: relative;
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.video-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.controls-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.time-display {
  color: white;
  font-size: 14px;
  font-family: monospace;
}

.video-actions {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 8px;
}

.video-actions .el-button {
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
}

.video-actions .el-button:hover {
  background: rgba(0,0,0,0.8);
  border-color: rgba(255,255,255,0.4);
}

/* 右侧详情区域 */
.detail-section {
  flex: 1;
  background: #1a1a1a;
  border-left: 1px solid #333;
  padding: 20px;
  overflow-y: auto;
  position: relative;
}

.detail-header h3 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: white;
}

.subtitle {
  color: #9ca3af;
  font-size: 14px;
  margin-bottom: 20px;
}

.detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.input-section {
  margin-bottom: 10px;
}

.thumbnails {
  display: flex;
  gap: 8px;
}

.thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #2a2a2a;
}

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

.description h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: white;
}

.description p {
  color: #cbd5e1;
  font-size: 14px;
  line-height: 1.5;
}

.metadata {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.meta-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #2a2a2a;
}

.meta-item:last-child {
  border-bottom: none;
}

.label {
  color: #9ca3af;
  font-size: 14px;
}

.value {
  color: white;
  font-size: 14px;
  font-weight: 500;
}

.action-button {
  margin-top: 20px;
}

.action-button .el-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
}

.scroll-indicators {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scroll-arrow {
  font-size: 16px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.3s;
}

.scroll-arrow:hover {
  color: #9ca3af;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .sidebar {
    width: 160px;
  }
  
  .main-content {
    margin-left: 160px;
  }
  
  .video-section {
    padding: 10px;
  }
  
  .detail-section {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
  
  .main-content {
    margin-left: 0;
    flex-direction: column;
  }
  
  .video-section {
    flex: none;
    height: 50vh;
  }
  
  .detail-section {
    flex: none;
    height: 50vh;
  }
}
</style>
