<template>
  <div class="course-detail page-content">
    <div class="course-container breadcrumb-container">
      <!-- 面包屑导航 -->
      <div class="breadcrumb">
        <span @click="goBack" class="back-link">← 返回</span>
        <span class="separator">/</span>
        <span class="current-page">{{ courseData.title || '课程详情' }}</span>
      </div>
    </div>

    <!-- 深色视频模块（整块背景全为深色，无边距全宽） -->
    <section class="video-module">
      <div class="video-inner">
        <!-- 视频播放区域 -->
        <div class="video-section">
          <div class="video-container">
            <!-- 视频播放器 -->
            <div class="video-player">
              <!-- 阿里云播放器 -->
              <AliyunPlayer
                v-if="currentVideoData && showPlayer"
                ref="playerRef"
                :video-id="currentVideoData.vodVideoId"
                :course-id="courseData.id || route.params.id"
                :chapter-id="currentVideoData.chapterId"
                width="100%"
                height="100%"
                :autoplay="false"
                :controls="true"
                @play="handleVideoPlay"
                @pause="handleVideoPause"
                @ended="handleVideoEnded"
                @error="handleVideoError"
                @timeupdate="handleTimeUpdate"
                @ready="handlePlayerReady"
                @next-video="handleNextVideo"
              />
              
              <!-- 课程封面显示（未开始播放时） -->
              <div v-else class="course-cover-display" @click="startVideoPlay">
                <img 
                  :src="courseData.coverUrl || 'https://picsum.photos/980/666'" 
                  :alt="courseData.title || '课程封面'" 
                  class="course-main-cover"
                  @error="handleCourseImageError"
                />
                <div class="cover-overlay-content">
                  <div v-if="currentVideoData && currentVideoData.canPlay" class="play-icon">▶</div>
                  <div v-else-if="currentVideoData && !currentVideoData.canPlay" class="lock-icon-large">🔒</div>
                  <div v-else class="play-icon">▶</div>
                  
                  <p class="course-title">{{ courseData.title || '课程详情' }}</p>
                  <p class="course-subtitle">
                    {{ 
                      currentVideoData 
                        ? (currentVideoData.canPlay ? '点击开始播放' : (currentVideoData.lockReason || '需要权限才能播放'))
                        : '选择视频开始学习' 
                    }}
                  </p>
                </div>
              </div>
            </div>
            
            <!-- 课程信息面板 -->
            <div class="course-info-panel hidden-mobile">
              <!-- 课程创建者信息区域 -->
              <div class="creator-info-section">
                <div class="creator-info-left">
                  <div class="creator-avatar">
                    <img :src="courseData.creator?.avatarUrl" :alt="courseData.creator?.username" />
                  </div>
                  <div class="creator-info-text">
                    <div class="creator-name" style="color: #fff;">作者：{{ courseData.creator?.username }}</div>
                    <div class="course-views">播放量：{{ formatViewCount(courseData.viewCount || 0) }}</div>
                  </div>
                </div>
                <div class="creator-info-right">
                  <button class="playlist-favorite-btn" :class="{ favorited: isFavorited }" @click="toggleFavorite">
                    <svg v-if="!isFavorited" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 2L14.09 8.26L22 9.27L17 14.14L18.18 22.02L12 18.77L5.82 22.02L7 14.14L2 9.27L9.91 8.26L12 2Z" stroke="currentColor" stroke-width="2" fill="none"/>
                    </svg>
                    <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                      <path d="M12 2L14.09 8.26L22 9.27L17 14.14L18.18 22.02L12 18.77L5.82 22.02L7 14.14L2 9.27L9.91 8.26L12 2Z"/>
                    </svg>
                    <span>{{ isFavorited ? '已收藏' : '收藏' }}</span>
                  </button>
                </div>
              </div>
              
              <!-- 章节列表 -->
              <div class="chapters-container">
                <!-- 章节控制按钮 -->
                <div class="chapters-control">
                  <button class="control-btn" @click="toggleAllChapters">
                    <svg 
                      :class="{ 'rotated': !allChaptersExpanded }" 
                      width="14" 
                      height="14" 
                      viewBox="0 0 24 24" 
                      fill="none" 
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                    {{ allChaptersExpanded ? '全部收起' : '全部展开' }}
                  </button>
                </div>
                
                <div 
                  v-for="(chapter, chapterIndex) in organizedChapters" 
                  :key="chapter.id || chapterIndex"
                  class="chapter-item"
                >
                  <!-- 章节标题栏 -->
                  <div 
                    class="chapter-header"
                    @click="toggleChapter(chapterIndex)"
                  >
                    <div class="chapter-title">
                      <span class="chapter-name">{{ chapter.title || `第${chapterIndex + 1}章` }}</span>
                      <span class="video-count">({{ chapter.videos?.length || 0 }}个视频)</span>
                    </div>
                    <div class="chapter-toggle">
                      <svg 
                        :class="{ 'rotated': !chapter.isCollapsed }" 
                        width="16" 
                        height="16" 
                        viewBox="0 0 24 24" 
                        fill="none" 
                        xmlns="http://www.w3.org/2000/svg"
                      >
                        <path d="M7 10L12 15L17 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                  
                  <!-- 章节视频列表 -->
                  <div 
                    class="chapter-videos"
                    :class="{ expanded: !chapter.isCollapsed }"
                  >
                    <div 
                      v-for="(video, videoIndex) in chapter.videos" 
                      :key="video.id || videoIndex"
                      class="playlist-item"
                      :class="{ 
                        active: currentVideoIndex === getGlobalVideoIndex(chapterIndex, videoIndex),
                        locked: !video.canPlay 
                      }"
                      @click="selectVideo(getGlobalVideoIndex(chapterIndex, videoIndex))"
                    >
                      <div class="item-cover">
                        <img 
                          :src="video.coverUrl || 'https://picsum.photos/120/68'" 
                          :alt="video.title"
                          @error="handleImageError"
                          class="video-cover-img"
                        />
                        <div class="item-duration">{{ video.duration }}</div>
                        <div v-if="!video.canPlay" class="lock-icon">🔒</div>
                      </div>
                      <div class="item-info">
                        <h4 class="item-title" :title="video.title">{{ truncateText(video.title, 6) }}</h4>
                        <p class="item-desc" :title="video.lockReason || video.description || '暂无描述'">{{ truncateDescription(video.lockReason || video.description || '暂无描述', 20) }}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>



    <!-- 页面下方白色模块（介绍/相关推荐/评论等） -->
    <div class="course-container">
      <div class="below-module">
        <!-- 课程简介 -->
        <div class="course-description">
          <h3>课程简介</h3>
          <div 
            v-if="isRichText(courseData.description)"
            class="rich-text-content"
            v-html="addRichTextStyles(courseData.description)"
          ></div>
          <p v-else>{{ courseData.description }}</p>
        </div>
        
        <!-- 详情图集 -->
        <div v-if="detailGallery.length > 0" class="detail-gallery-section">
          <!-- 图集网格内容 -->
          <div class="gallery-grid">
            <div 
              v-for="(imageUrl, index) in detailGallery" 
              :key="index"
              class="gallery-item"
              @click="openImageViewer(index)"
            >
              <!-- 图片骨架屏占位 -->
              <div v-if="galleryLoading" class="skeleton-image-placeholder">
                <div class="skeleton-image"></div>
              </div>
              
              <!-- 实际图片 -->
              <img 
                :src="imageUrl" 
                :alt="`课程详情 ${index + 1}`"
                @load="handleGalleryImageLoad"
                @error="handleGalleryImageError"
                class="gallery-image"
                :class="{ 'image-loaded': !galleryLoading }"
              />
              
              <div class="gallery-overlay" :class="{ 'overlay-visible': !galleryLoading }">
                <div class="gallery-zoom-icon">
                  <el-icon :size="24">
                    <ZoomIn />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </div>
        
     
        
        <!-- 会员开通弹窗 -->
        <div v-if="showMembershipDialog" class="dialog-overlay" @click="closeMembershipDialog">
          <div class="dialog" @click.stop>
            <header class="dialog-header">
              <h3>🌟 开通会员</h3>
              <button class="dialog-close" @click="closeMembershipDialog">×</button>
            </header>
            
            <main class="dialog-body">
              <p class="dialog-text">
                {{ courseData.userPermission?.accessDeniedReason || '该课程需要会员权限，开通后可观看所有优质内容' }}
              </p>
              
              <ul class="benefits-list" style="text-align: center;"> 
                <li>开通会员享受无限学习体验</li>
               
              </ul>
            </main>
            
            <footer class="dialog-footer">
              <button class="btn btn-secondary" @click="closeMembershipDialog">稍后再说</button>
              <button class="btn btn-primary" @click="goToMembership">立即开通</button>
            </footer>
          </div>
        </div>
        
        <!-- 视频封面展示 -->
        <div v-if="playlist.length > 0" class="video-covers-section">
          <h3>课程视频</h3>
          <div class="video-covers-grid">
            <div 
              v-for="(video, index) in playlist" 
              :key="video.id"
              class="video-cover-item"
              :class="{ 
                active: currentVideoIndex === index,
                locked: !video.canPlay 
              }"
              @click="selectVideo(index)"
            >
              <div class="cover-image">
                <img 
                  :src="video.coverUrl || 'https://picsum.photos/200/120'" 
                  :alt="video.title"
                  @error="handleImageError"
                  class="video-cover-img"
                />
                <div class="cover-overlay">
                  <div v-if="!video.canPlay" class="lock-overlay">
                    <div class="lock-icon">🔒</div>
                    <span>{{ video.lockReason || `需要${courseData.levelName || '更高'}权限` }}</span>
                  </div>
                  <div v-else class="play-overlay">
                    <div class="play-button">▶</div>
                  </div>
                </div>
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <div class="video-chapter-info">
                  <span class="chapter-badge">第{{ video.chapterIndex }}章</span>
                  <span class="video-number">{{ video.videoIndex }}</span>
                </div>
                <h4 class="video-title" :title="video.title">{{ truncateText(video.title, 6) }}</h4>
                <p class="video-desc" :title="video.chapterTitle || '暂无描述'">{{ truncateDescription(video.chapterTitle || '暂无描述', 20) }}</p>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 无视频时的提示 -->
      
      </div>
    </div>
    <Footer />
    
    <!-- 登录弹窗 -->
    <LoginModal
      :visible="showLoginModal"
      mode="login"
      @close="closeLoginModal"
      @login="handleLoginSuccess"
    />
    
    <!-- 图片查看器 -->
    <div v-if="showImageViewer" class="image-viewer-overlay" @click="closeImageViewer">
      <div class="image-viewer" @click.stop>
        <div class="image-viewer-header">
          <span class="image-counter">{{ currentImageIndex + 1 }} / {{ detailGallery.length }}</span>
          <button class="image-viewer-close" @click="closeImageViewer">
            <el-icon :size="20">
              <Close />
            </el-icon>
          </button>
        </div>
        
        <div 
          class="image-viewer-content"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
        >
          <button 
            v-if="detailGallery.length > 1" 
            class="image-nav-btn prev-btn" 
            @click="prevImage"
          >
            <el-icon :size="24">
              <ArrowLeft />
            </el-icon>
          </button>
          
          <img 
            :src="detailGallery[currentImageIndex]" 
            :alt="`第 ${currentImageIndex + 1} 张详情`"
            class="viewer-image"
            @click.stop
          />
          
          <button 
            v-if="detailGallery.length > 1" 
            class="image-nav-btn next-btn" 
            @click="nextImage"
          >
            <el-icon :size="24">
              <ArrowRight />
            </el-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, onUnmounted, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import Footer from '@/components/Footer.vue'
import LoginModal from '@/components/LoginModal.vue'
import AliyunPlayer from '@/components/AliyunPlayer.vue'
import { getCourseVideoDetail, toggleCourseFavorite, getCourseFavoriteStatus, getCourseStatus } from '@/api/course.js'
import { getPlayAuthWithViewCount } from '@/api/vod.js'
import { isLoggedIn } from '@/utils/auth.js'
import { useUserStore } from '@/store/user.js'
import { getCurrentUser } from '@/api/user.js'
import { isRichText, addRichTextStyles } from '@/utils/richText.js'

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()

// 课程数据
const courseData = ref({
  course: {},
  chapters: [],
  userPermission: {},
  creator: {}
})

// 播放列表数据 (从API数据转换而来)
const playlist = ref([])

// 组织后的章节数据（支持折叠）
const organizedChapters = ref([])

// 当前播放的视频索引
const currentVideoIndex = ref(0)

// 当前视频数据
const currentVideoData = ref(null)

// 播放器相关状态
const showPlayer = ref(false)
const playerRef = ref(null)
const isVideoPlaying = ref(false)
const videoProgress = ref(0)

// 收藏状态
const isFavorited = ref(false)

// 课程状态信息（扩展性支持）
const courseStatus = ref({
  isLiked: false,
  isFavorited: false,
  likeCount: 0,
  favoriteCount: 0
})

// 登录弹窗状态
const showLoginModal = ref(false)

// 页面保护功能已移至全局 App.vue 中统一管理

// 所有章节的展开状态
const allChaptersExpanded = ref(false)

// 会员开通弹窗状态
const showMembershipDialog = ref(false)

// 详情图集数据
const detailGallery = ref([])
const galleryLoading = ref(true)
const loadedImageCount = ref(0)

// 图片查看器状态
const showImageViewer = ref(false)
const currentImageIndex = ref(0)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 跳转到会员页面
const goToMembership = () => {
  closeMembershipDialog()
  router.push('/membership')
}

// 关闭会员开通弹窗
const closeMembershipDialog = () => {
  showMembershipDialog.value = false
}

// 显示会员开通弹窗
const showMembershipPrompt = () => {
  showMembershipDialog.value = true
}

// 更新用户信息
const updateUserInfo = async () => {
  try {
    console.log('[CourseDetail] 开始获取最新用户信息')
    const response = await getCurrentUser()
    console.log('[CourseDetail] API响应数据:', response)
    
    if (response.code === 200) {
      console.log('[CourseDetail] 更新用户信息到store:', response.data)
      userStore.updateUserInfo(response.data)
      console.log('[CourseDetail] 用户信息已更新到store')
      
      // 验证更新后的用户信息
      const updatedUserInfo = userStore.getUserInfo
      console.log('[CourseDetail] 验证更新后的用户信息:', updatedUserInfo)
      
      // 更新用户信息后重新检查权限
      updateCoursePermission()
    } else {
      console.error('[CourseDetail] 获取用户信息失败:', response.message)
    }
  } catch (error) {
    console.error('[CourseDetail] 更新用户信息失败:', error)
    
    // 检查是否是401认证错误
    if (error.response && error.response.status === 401) {
      console.error('[CourseDetail] 捕获到401认证错误，API拦截器应该已经处理，这里作为备用处理')
      // 确保用户信息被清空
      userStore.logout()
      // 跳转到首页并显示提示
      setTimeout(() => {
        router.replace('/')
        ElMessage.error('登录已过期，请重新登录')
      }, 100)
    }
  }
}

// 联系客服
const contactSupport = () => {
  // 这里可以打开客服聊天窗口或跳转到客服页面
  ElMessage.info('正在为您连接客服...')
  // 可以添加实际的客服逻辑
}

// 通用文字截取工具函数
const truncateText = (text, maxLength = 6) => {
  if (!text) return ''
  if (text.length <= maxLength) return text
  return text.substring(0, maxLength) + '...'
}

// 描述文字截取（使用不同的默认长度）
const truncateDescription = (text, maxLength = 20) => {
  return truncateText(text, maxLength)
}

// 解析详情图集数据
const parseDetailGallery = (galleryStr) => {
  if (!galleryStr) return []
  
  try {
    const parsed = JSON.parse(galleryStr)
    return Array.isArray(parsed) ? parsed : []
  } catch (error) {
    console.error('解析详情图集失败:', error)
    return []
  }
}

// 打开图片查看器
const openImageViewer = (index) => {
  currentImageIndex.value = index
  showImageViewer.value = true
}

// 关闭图片查看器
const closeImageViewer = () => {
  showImageViewer.value = false
}

// 切换到上一张图片
const prevImage = () => {
  currentImageIndex.value = currentImageIndex.value > 0 ? currentImageIndex.value - 1 : detailGallery.value.length - 1
}

// 切换到下一张图片
const nextImage = () => {
  currentImageIndex.value = currentImageIndex.value < detailGallery.value.length - 1 ? currentImageIndex.value + 1 : 0
}

// 键盘事件处理
const handleKeyDown = (event) => {
  if (!showImageViewer.value) return
  
  switch (event.key) {
    case 'Escape':
      closeImageViewer()
      break
    case 'ArrowLeft':
      prevImage()
      break
    case 'ArrowRight':
      nextImage()
      break
  }
}

// 触摸事件处理（移动端滑动支持）
const touchStartX = ref(0)
const touchEndX = ref(0)

const handleTouchStart = (event) => {
  touchStartX.value = event.touches[0].clientX
}

const handleTouchMove = (event) => {
  touchEndX.value = event.touches[0].clientX
}

const handleTouchEnd = () => {
  if (!showImageViewer.value || detailGallery.value.length <= 1) return
  
  const swipeDistance = touchStartX.value - touchEndX.value
  const minSwipeDistance = 50
  
  if (Math.abs(swipeDistance) > minSwipeDistance) {
    if (swipeDistance > 0) {
      // 向左滑动，显示下一张
      nextImage()
    } else {
      // 向右滑动，显示上一张
      prevImage()
    }
  }
}

// 处理详情图集图片加载错误
const handleGalleryImageError = (event) => {
  const img = event.target
  // 如果图片加载失败，隐藏该图片
  img.style.display = 'none'
  // 更新加载计数
  handleGalleryImageLoad()
}

// 处理详情图集图片加载完成
const handleGalleryImageLoad = () => {
  loadedImageCount.value++
  if (loadedImageCount.value >= detailGallery.value.length) {
    galleryLoading.value = false
  }
}

// 选择视频
const selectVideo = (index) => {
  const video = playlist.value[index]
  if (!video.canPlay) {
    console.log('[CourseDetail] 视频无播放权限，显示会员开通弹窗')
    // 显示会员开通弹窗而不是警告消息
    showMembershipDialog.value = true
    return
  }
  
  currentVideoIndex.value = index
  currentVideoData.value = video
  
  // 如果播放器已经显示，直接播放新视频
  if (showPlayer.value) {
    loadAndPlayVideo()
  }
}

// 开始视频播放
const startVideoPlay = async () => {
  if (!currentVideoData.value && playlist.value.length > 0) {
    // 如果没有选中视频，默认选择第一个可播放的视频
    const firstPlayableVideo = playlist.value.find(video => video.canPlay)
    if (firstPlayableVideo) {
      const index = playlist.value.indexOf(firstPlayableVideo)
      selectVideo(index)
    } else {
      
      showMembershipDialog.value = true
      return
    }
  }
  
  if (!currentVideoData.value) {
    ElMessage.warning('请先选择要播放的视频')
    return
  }
  
  showPlayer.value = true
  await nextTick()
  loadAndPlayVideo()
}

// 加载并播放视频
const loadAndPlayVideo = async () => {
  if (!currentVideoData.value) {
    // 去除日志打印
    return
  }
  
  // 首先检查用户权限
  
  const permission = checkUserPermission()
  
  if (!permission.hasAccess) {
    
    // 显示会员开通弹窗而不是继续播放
    showMembershipDialog.value = true
    return
  }
  
  
  
  // 等待播放器组件就绪
  let retryCount = 0
  const maxRetries = 10
  
  while (!playerRef.value && retryCount < maxRetries) {
    
    await new Promise(resolve => setTimeout(resolve, 100))
    retryCount++
  }
  
  if (!playerRef.value) {
    
    ElMessage.error('播放器初始化失败，请重试')
    return
  }
  
  try {
    // 调用VOD API获取播放凭证
    const playAuthData = {
      videoId: currentVideoData.value.vodVideoId,
      courseId: courseData.value.id || parseInt(route.params.id),
      chapterId: currentVideoData.value.chapterId,
      authInfoTimeout: 3600,
      playDomain: window.location.hostname
    }
    
    const response = await getPlayAuthWithViewCount(playAuthData)
    
    
    
    // 兼容两种数据结构：
    // 1. { code: 200, data: { playAuth, videoMeta, viewCountInfo } }
    // 2. { playAuth, videoMeta, viewCountInfo } (已被VOD API处理过)
    let playAuth, videoMeta, viewCountInfo
    
    if (response.code === 200 && response.data) {
      // 标准格式：有code和data字段
      ({ playAuth, videoMeta, viewCountInfo } = response.data)
    } else if (response.playAuth) {
      // 已处理格式：直接包含playAuth字段
      ({ playAuth, videoMeta, viewCountInfo } = response)
    } else {
      throw new Error(response.message || '获取播放凭证失败')
    }
    
    
    
    if (!playAuth) {
      throw new Error('播放凭证为空')
    }
    
    // 使用videoMeta中的videoId，如果没有则使用当前视频数据中的vodVideoId
    const videoId = videoMeta?.videoId || currentVideoData.value.vodVideoId
    
    if (!videoId) {
      throw new Error('视频ID缺失')
    }
    
    // 调用播放器播放视频 - 使用正确的参数格式
    await playerRef.value.playVideo(playAuth, {
      videoId: videoId,
      title: videoMeta?.title || currentVideoData.value.title,
      duration: videoMeta?.duration,
      coverURL: videoMeta?.coverURL || currentVideoData.value.coverUrl
    })
    
    // 更新播放次数信息
    if (viewCountInfo) {
      
      // 可以在这里更新UI显示新的播放次数
      if (courseData.value.viewCount !== undefined) {
        courseData.value.viewCount = viewCountInfo.currentViewCount
      }
    }
  } catch (error) {
    console.error('播放视频失败:', error)
    ElMessage.error(error.message || '播放失败，请重试')
  }
}

// 播放器事件处理
const handleVideoPlay = (data) => {
  
  isVideoPlaying.value = true
}

const handleVideoPause = (data) => {
  
  isVideoPlaying.value = false
}

const handleVideoEnded = (data) => {
  
  isVideoPlaying.value = false
}

const handleVideoError = (error) => {
  console.error('视频播放错误:', error)
  ElMessage.error('视频播放出错，请重试')
}

const handleTimeUpdate = (data) => {
  videoProgress.value = data.currentTime / data.duration * 100
}

const handlePlayerReady = (player) => {
  console.log('播放器准备就绪:', player)     // 去除日志打印
}

const handleNextVideo = () => {
  // 播放下一个视频
  const nextIndex = currentVideoIndex.value + 1
  if (nextIndex < playlist.value.length) {
    selectVideo(nextIndex)
  } else {
    ElMessage.info('已播放完所有视频')
    showPlayer.value = false
  }
}

// 收藏/取消收藏
const toggleFavorite = async () => {
  // 检查用户是否登录
  if (!isLoggedIn()) {
    showLoginModal.value = true
    return
  }
  
  try {
    // 调用封装的课程收藏接口
    const courseId = courseData.value.id || parseInt(route.params.id)
    const response = await toggleCourseFavorite(courseId)
    
    // 适配新的响应数据结构
    if (response.code === 200 && response.data) {
      // 使用接口返回的收藏状态
      isFavorited.value = response.data.isFavorited
      // 使用接口返回的消息
      ElMessage.success(response.data.message || (isFavorited.value ? '已添加到收藏' : '已取消收藏'))
    } else {
      ElMessage.error(response.message || '操作失败')
    }
  } catch (error) {
    console.error('收藏操作失败:', error)
    ElMessage.error('操作失败，请重试')
  }
}

// 关闭登录弹窗
const closeLoginModal = () => {
  showLoginModal.value = false
}

// 登录成功回调
const handleLoginSuccess = () => {
  showLoginModal.value = false
  ElMessage.success('登录成功')
  
  // 登录成功后立即更新权限信息
  setTimeout(() => {
    updateCoursePermission()
    // 然后执行收藏操作
    toggleFavorite()
  }, 100)
}

// 格式化播放量显示
const formatViewCount = (count) => {
  if (count < 1000) {
    return count.toString()
  } else if (count < 10000) {
    return (count / 1000).toFixed(1) + 'k'
  } else if (count < 100000000) {
    return (count / 10000).toFixed(1) + '万'
  } else {
    return (count / 100000000).toFixed(1) + '亿'
  }
}

// 处理图片加载错误
const handleImageError = (event) => {
  const img = event.target
  // 如果图片加载失败，使用占位图片
  if (!img.src.includes('picsum.photos')) {
    img.src = 'https://picsum.photos/120/68'
  }
}

// 处理课程封面图片加载错误
const handleCourseImageError = (event) => {
  const img = event.target
  // 如果课程封面加载失败，使用占位图片
  if (!img.src.includes('picsum.photos')) {
    img.src = 'https://picsum.photos/980/666'
  }
}

// 初始化收藏状态
const initializeFavoriteStatus = async () => {
  // 如果用户未登录，则收藏状态为false
  if (!isLoggedIn()) {
    isFavorited.value = false
    return
  }
  
  try {
    // 优先使用新的课程状态接口
    const courseId = courseData.value.id || parseInt(route.params.id)
    const response = await getCourseStatus(courseId)
    
    if (response.code === 200 && response.data && response.data.success) {
      isFavorited.value = response.data.isFavorited || false
      // 保存完整的状态信息
      courseStatus.value = {
        isLiked: response.data.isLiked || false,
        isFavorited: response.data.isFavorited || false,
        likeCount: response.data.likeCount || 0,
        favoriteCount: response.data.favoriteCount || 0
      }
    } else {
      // 如果新接口失败，回退到旧接口
      const fallbackResponse = await getCourseFavoriteStatus(courseId)
      if (fallbackResponse.code === 200) {
        isFavorited.value = fallbackResponse.data.isFavorited || false
      } else {
        isFavorited.value = false
      }
    }
  } catch (error) {
    console.error('获取收藏状态失败:', error)
    // 出错时回退到旧接口
    try {
      const courseId = courseData.value.id || parseInt(route.params.id)
      const fallbackResponse = await getCourseFavoriteStatus(courseId)
      if (fallbackResponse.code === 200) {
        isFavorited.value = fallbackResponse.data.isFavorited || false
      } else {
        isFavorited.value = false
      }
    } catch (fallbackError) {
      console.error('备用接口也失败:', fallbackError)
      isFavorited.value = false
    }
  }
}

// 检查用户是否有权限访问课程
const checkUserPermission = () => {
 
  
  // 如果用户未登录，则无权限
  if (!isLoggedIn()) {
   
    return {
      hasAccess: false,
      accessDeniedReason: '请先登录后再查看课程内容',
      showPermissionInfo: true
    }
  }
  
  // 获取用户信息
  const userInfo = userStore.getUserInfo
  
  if (!userInfo) {
    
    return {
      hasAccess: false,
      accessDeniedReason: '用户信息获取失败，请重新登录',
      showPermissionInfo: true
    }
  }
  
  // 检查用户角色权限
  const userRole = userInfo.role || 1
  const requiredLevel = courseData.value.level || 1
  
  // 用户角色 >= 课程要求等级时，有权限访问
  if (userRole >= requiredLevel) {
 
    return {
      hasAccess: true,
      accessDeniedReason: null,
      showPermissionInfo: false // 权限足够时不显示权限信息
    }
  }
  
  // 无权限时的提示信息
  let reason = ''
  if (requiredLevel === 2) {
    reason = '该课程需要VIP用户及以上权限'
  } else if (requiredLevel === 3) {
    reason = '该课程需要SVIP用户及以上权限'
  } else if (requiredLevel === 1) {
    reason = '该课程需要登录后才能访问'
  } else {
    reason = '该课程需要更高权限才能访问'
  }
  
  console.log('[CourseDetail] 权限检查失败，原因:', reason)
  return {
    hasAccess: false,
    accessDeniedReason: reason,
    showPermissionInfo: true // 权限不足时显示权限信息
  }
}

// 更新课程权限信息
const updateCoursePermission = () => {
 
  const permission = checkUserPermission()
 
  // 更新课程数据中的权限信息
  if (courseData.value.userPermission) {
    courseData.value.userPermission = {
      ...courseData.value.userPermission,
      ...permission
    }
  } else {
    courseData.value.userPermission = permission
  }
  
 
  // 更新播放列表中的权限信息
  if (playlist.value && playlist.value.length > 0) {
    playlist.value.forEach(video => {
      video.canPlay = permission.hasAccess
      video.lockReason = permission.hasAccess ? null : permission.accessDeniedReason
    })
    
  } else {
    
  }
  
  // 更新章节数据中的权限信息
  if (organizedChapters.value && organizedChapters.value.length > 0) {
    organizedChapters.value.forEach(chapter => {
      if (chapter.videos && chapter.videos.length > 0) {
        chapter.videos.forEach(video => {
          video.canPlay = permission.hasAccess
          video.lockReason = permission.hasAccess ? null : permission.accessDeniedReason
        })
      }
    })
   
  } else {
   
  }
  

  
  // 如果没有访问权限，显示会员开通弹窗
  if (!permission.hasAccess) {
    // 延迟一点时间显示弹窗，确保页面已经渲染完成
    setTimeout(() => {
      showMembershipDialog.value = true
    }, 500)
  }
  
  // 强制更新UI
  nextTick(() => {
    console.log('UI更新完成')
  })
}

// 将章节和视频数据转换为播放列表格式
const convertToPlaylist = (chapters, course = {}) => {
  const videoList = []
  
  // 如果有章节数据，按章节顺序处理
  if (chapters && chapters.length > 0) {
    const sortedChapters = chapters.sort((a, b) => a.orderNum - b.orderNum)
    
    sortedChapters.forEach(chapter => {
      if (chapter.videos && chapter.videos.length > 0) {
        // 按视频顺序处理
        const sortedVideos = chapter.videos.sort((a, b) => a.orderNum - b.orderNum)
        
        sortedVideos.forEach((video, videoIndex) => {
          videoList.push({
            id: video.id,
            title: video.title,
            description: chapter.description,
            coverUrl: video.coverUrl || course.coverUrl || 'https://picsum.photos/120/68',
            duration: video.durationFormatted || '00:00',
            vodVideoId: video.vodVideoId,
            chapterId: video.chapterId,
            canPlay: video.canPlay,
            lockReason: video.lockReason,
            // 添加章节信息
            chapterTitle: chapter.title,
            chapterOrderNum: chapter.orderNum,
            videoOrderNum: video.orderNum,
            videoIndex: videoIndex + 1,
            chapterIndex: sortedChapters.findIndex(c => c.id === chapter.id) + 1
          })
        })
      }
    })
  }
  
  return videoList
}

// 组织章节数据，支持折叠
const organizeChapters = (chapters) => {
  const organized = []
  if (chapters && chapters.length > 0) {
    const sortedChapters = chapters.sort((a, b) => a.orderNum - b.orderNum)
    
    sortedChapters.forEach(chapter => {
      organized.push({
        id: chapter.id,
        title: chapter.title,
        description: chapter.description,
        videos: chapter.videos ? chapter.videos.sort((a, b) => a.orderNum - b.orderNum) : [],
        isCollapsed: true // 默认折叠
      })
    })
  }
  
  // 初始化全局展开状态
  setTimeout(() => {
    checkAllChaptersExpanded()
  }, 0)
  
  return organized
}

// 获取课程视频详情数据
const fetchCourseVideoDetail = async () => {
  try {
    const courseId = route.params.id
    if (!courseId) {
      console.error('[CourseDetail] 课程ID缺失')
      return
    }

    // 验证当前路由是否正确
    const currentPath = route.path
    console.log('[CourseDetail] 获取课程详情:', {
      courseId,
      currentPath,
      expectedPath: `/course/${courseId}`,
      routeName: route.name
    })
    
    // 如果路由名称不匹配，可能是路由错误
    if (route.name !== 'CourseDetail') {
      console.warn('[CourseDetail] 警告：路由名称不匹配!', route.name)
    }

    const response = await getCourseVideoDetail(courseId)
    
    if (response.code === 200 && response.data) {
      // 更新课程数据
      courseData.value = {
        ...response.data.course,
        creator: response.data.course.creator,
        chapters: response.data.chapters || [],
        userPermission: response.data.userPermission
      }
      
      // 解析详情图集数据
      detailGallery.value = parseDetailGallery(response.data.course.detailGallery)
      // 重置图集加载状态
      if (detailGallery.value.length > 0) {
        galleryLoading.value = true
        loadedImageCount.value = 0
      } else {
        galleryLoading.value = false
      }
      
      // 转换播放列表数据
      playlist.value = convertToPlaylist(response.data.chapters, courseData.value)
      
      // 组织章节数据
      organizedChapters.value = organizeChapters(response.data.chapters)
      
      // 立即更新权限信息
      updateCoursePermission()
      
      // 初始化收藏状态
      await initializeFavoriteStatus()
      
      console.log('课程数据加载成功:', courseData.value)
      console.log('播放列表:', playlist.value)
      console.log('权限信息:', courseData.value.userPermission)
    } else {
      ElMessage.error(response.message || '获取课程详情失败')
      // 如果API调用失败，不显示任何内容，只显示错误提示
      return
    }
    
  } catch (error) {
    console.error('获取课程视频详情失败:', error)
    
    // 检查是否是401认证错误
    if (error.response && error.response.status === 401) {
      console.error('[CourseDetail] API调用遇到401认证错误')
      // API拦截器应该已经处理，但作为备用处理
      userStore.logout()
      setTimeout(() => {
        router.replace('/')
        ElMessage.error('登录已过期，请重新登录')
      }, 100)
      return
    }
    
    ElMessage.error('获取课程详情失败，请稍后重试')
    return
  }
}

// 切换章节折叠状态
const toggleChapter = (index) => {
  organizedChapters.value[index].isCollapsed = !organizedChapters.value[index].isCollapsed
  // 检查是否所有章节都已展开
  checkAllChaptersExpanded()
}

// 切换所有章节的展开/收起状态
const toggleAllChapters = () => {
  allChaptersExpanded.value = !allChaptersExpanded.value
  organizedChapters.value.forEach(chapter => {
    chapter.isCollapsed = !allChaptersExpanded.value
  })
}

// 检查是否所有章节都已展开
const checkAllChaptersExpanded = () => {
  allChaptersExpanded.value = organizedChapters.value.every(chapter => !chapter.isCollapsed)
}

// 展开所有章节
const expandAllChapters = () => {
  organizedChapters.value.forEach(chapter => {
    chapter.isCollapsed = false
  })
  allChaptersExpanded.value = true
}

// 收起所有章节
const collapseAllChapters = () => {
  organizedChapters.value.forEach(chapter => {
    chapter.isCollapsed = true
  })
  allChaptersExpanded.value = false
}

// 获取视频在播放列表中的全局索引
const getGlobalVideoIndex = (chapterIndex, videoIndex) => {
  let globalIndex = 0
  for (let i = 0; i < chapterIndex; i++) {
    globalIndex += organizedChapters.value[i].videos.length
  }
  globalIndex += videoIndex
  return globalIndex
}

// 监听用户状态变化，动态更新权限
const watchUserStatus = () => {
  // 监听用户信息变化
  watch(() => userStore.getUserInfo, (newUserInfo) => {
    if (newUserInfo && courseData.value.id) {
      console.log('[CourseDetail] 用户信息变化，更新权限:', newUserInfo)
      updateCoursePermission()
    }
  }, { deep: true })
  
  // 监听登录状态变化
  watch(() => userStore.getIsLoggedIn, (isLoggedIn) => {
    if (courseData.value.id) {
      console.log('[CourseDetail] 登录状态变化，更新权限:', isLoggedIn)
      if (isLoggedIn) {
        // 登录后立即更新用户信息
        updateUserInfo()
      } else {
        // 登出后更新权限
        updateCoursePermission()
      }
    }
  })
  
  // 监听用户store的初始化完成
  watch(() => userStore.getUserInfo, (userInfo) => {
    if (userInfo && courseData.value.id) {
      console.log('[CourseDetail] 用户信息初始化完成，更新权限:', userInfo)
      updateCoursePermission()
    }
  }, { immediate: true })
  
  // 监听用户角色变化
  watch(() => userStore.getUserInfo?.role, (newRole, oldRole) => {
    if (newRole !== oldRole && courseData.value.id) {
      console.log('[CourseDetail] 用户角色变化，从', oldRole, '变为', newRole, '，更新权限')
      // 角色变化后立即更新用户信息
      updateUserInfo()
    }
  })
}

// 清理函数
const cleanup = () => {
  console.log('清理课程详情页面资源')
  // 这里可以添加其他清理逻辑
}

onMounted(() => {
  // 页面加载完成
  
  // 如果用户已经登录，先更新用户信息
  if (isLoggedIn()) {
    console.log('[CourseDetail] 页面加载时用户已登录，先更新用户信息')
    updateUserInfo()
  }
  
  // 获取课程视频详情
  fetchCourseVideoDetail()
  
  // 监听用户状态变化
  watchUserStatus()
  
  // 添加键盘事件监听
  document.addEventListener('keydown', handleKeyDown)
  
  // 页面保护功能已移至全局 App.vue 中统一管理
})

onUnmounted(() => {
  // 移除键盘事件监听
  document.removeEventListener('keydown', handleKeyDown)
  
  // 页面卸载时清理资源
  cleanup()
})

// 监听课程数据变化，动态设置页面标题
watch(courseData, (newData) => {
  if (newData.title) {
    document.title = `${newData.title} - 1818.AI`
  }
}, { deep: true })

// 页面保护功能已移至全局 App.vue 中统一管理
</script>

<style scoped>
/* 页面保护功能已移至全局 App.vue 中统一管理 */
.course-detail {
  width: 100%;
  background: #1a1a1a;
  padding: 0;
  overflow-x: hidden;

  box-sizing: border-box;
}

.course-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  padding: 12px 0;
  font-size: 14px;
  color: #ccc;
  text-align: left;
}

.back-link {
  color: #60a5fa;
  cursor: pointer;
  transition: color 0.2s;
  text-align: left;
}

.back-link:hover {
  color: #93c5fd;
}

.separator {
  margin: 0 8px;
}

.current-page {
  color: #e5e5e5;
  font-weight: 500;
  text-align: left;
}
.breadcrumb-container {
  background-color: #2a2a2a;
  border-bottom: 1px solid #404040;
}

.video-module {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  width: 100vw;
  margin: 0 calc(-50vw + 50%); /* 更精确的全宽布局计算，确保左右对称 */
  padding: 50px 0 50px;
}

.video-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.video-section {
  margin: 0;
  padding: 0;
}

/* 课程信息栏样式 */
.course-info-section {
  margin: 20px 0;
  width: 100%;
  background: #ffffff;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}



.course-creator-info {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.creator-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid #f0f0f0;
}

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

.creator-details {
  min-width: 0;
  flex: 1;
}

.creator-name {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-category {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-level {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #666;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-actions {
  flex-shrink: 0;
  margin-left: 16px;
}

.favorite-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.favorite-btn:hover {
  border-color: #d1d5db;
  background: #f9fafb;
}

.favorite-btn.favorited {
  background: #ef4444;
  border-color: #ef4444;
  color: #ffffff;
}

.favorite-btn.favorited:hover {
  background: #dc2626;
  border-color: #dc2626;
}

.favorite-btn svg {
  flex-shrink: 0;
}

.below-module {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 160px;
  border-radius: 12px;
  background: #2a2a2a;
  border: 1px solid #404040;
  padding: 20px;
  box-sizing: border-box; /* 确保padding和border包含在width内 */
}

/* 移动端below-module样式覆盖 - 扩大适用范围 */
@media (max-width: 767px) {
  .below-module {
    margin: 10px 16px 0 16px !important; /* 左右边距都是16px，保持对称 */
    padding: 16px 12px !important;
    width: auto !important; /* 让宽度自动计算，避免calc导致的问题 */
    box-sizing: border-box !important; /* 确保padding包含在元素内 */
  }
  
  /* 移动端专用：使用负边距抵消父容器padding，确保完全对称 */
  .video-module {
    margin: 0 -8px !important; /* 抵消course-detail的8px padding */
    width: calc(100% + 16px) !important; /* 补偿左右各8px */
  }
  
  /* 确保video-inner边距对称，与below-module保持一致 */
  .video-inner {
    padding: 0 16px !important; /* 与below-module保持一致的左右边距 */
    margin: 0 auto !important; /* 确保居中 */
  }
}

.course-description h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: #e5e5e5;
  text-align: left;
}

.course-description {
  margin-bottom: 40px;
}

.course-description p {
  font-size: 14px;
  line-height: 1.6;
  color: #cccccc;
  margin: 0;
  text-align: left;
}

/* 富文本内容样式 */
.rich-text-content {
  font-size: 14px;
  line-height: 1.6;
  color: #cccccc;
  text-align: left;
}

.rich-text-content h1,
.rich-text-content h2,
.rich-text-content h3,
.rich-text-content h4,
.rich-text-content h5,
.rich-text-content h6 {
  color: #e5e5e5;
  margin: 16px 0 8px 0;
  font-weight: 600;
}

.rich-text-content h1 { font-size: 24px; }
.rich-text-content h2 { font-size: 20px; }
.rich-text-content h3 { font-size: 18px; }
.rich-text-content h4 { font-size: 16px; }
.rich-text-content h5 { font-size: 14px; }
.rich-text-content h6 { font-size: 12px; }

.rich-text-content p {
  margin: 8px 0;
  color: #cccccc;
}

.rich-text-content ul,
.rich-text-content ol {
  margin: 8px 0;
  padding-left: 20px;
  color: #cccccc;
}

.rich-text-content li {
  margin: 4px 0;
}

.rich-text-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid #409eff;
  background: rgba(64, 158, 255, 0.1);
  color: #cccccc;
  border-radius: 0 4px 4px 0;
}

.rich-text-content code {
  background: rgba(255, 255, 255, 0.1);
  color: #e6a23c;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}

.rich-text-content pre {
  background: rgba(0, 0, 0, 0.3);
  color: #e5e5e5;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rich-text-content pre code {
  background: none;
  color: inherit;
  padding: 0;
}

.rich-text-content .rich-text-image {
  max-width: 100%;
  max-height: 600px;
  height: auto;
  border-radius: 8px;
  margin: 12px 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  display: block;
  object-fit: contain;
}

/* 支持用户设置的对齐方式 */
.rich-text-content p[style*="text-align: center"] .rich-text-image,
.rich-text-content div[style*="text-align: center"] .rich-text-image,
.rich-text-content .rich-text-image[style*="text-align: center"] {
  margin-left: auto;
  margin-right: auto;
}

.rich-text-content p[style*="text-align: left"] .rich-text-image,
.rich-text-content div[style*="text-align: left"] .rich-text-image,
.rich-text-content .rich-text-image[style*="text-align: left"] {
  margin-left: 0;
  margin-right: auto;
}

.rich-text-content p[style*="text-align: right"] .rich-text-image,
.rich-text-content div[style*="text-align: right"] .rich-text-image,
.rich-text-content .rich-text-image[style*="text-align: right"] {
  margin-left: auto;
  margin-right: 0;
}

/* 支持富文本编辑器的对齐类 */
.rich-text-content .ql-align-center .rich-text-image,
.rich-text-content .rich-text-image.ql-align-center {
  margin-left: auto;
  margin-right: auto;
}

.rich-text-content .ql-align-left .rich-text-image,
.rich-text-content .rich-text-image.ql-align-left {
  margin-left: 0;
  margin-right: auto;
}

.rich-text-content .ql-align-right .rich-text-image,
.rich-text-content .rich-text-image.ql-align-right {
  margin-left: auto;
  margin-right: 0;
}

/* 支持标准HTML对齐类 */
.rich-text-content .text-center .rich-text-image,
.rich-text-content .rich-text-image.text-center {
  margin-left: auto;
  margin-right: auto;
}

.rich-text-content .text-left .rich-text-image,
.rich-text-content .rich-text-image.text-left {
  margin-left: 0;
  margin-right: auto;
}

.rich-text-content .text-right .rich-text-image,
.rich-text-content .rich-text-image.text-right {
  margin-left: auto;
  margin-right: 0;
}

/* 支持内联样式的对齐 */
.rich-text-content .rich-text-image[style*="float: left"] {
  float: left;
  margin-right: 16px;
  margin-left: 0;
}

.rich-text-content .rich-text-image[style*="float: right"] {
  float: right;
  margin-left: 16px;
  margin-right: 0;
}

.rich-text-content .rich-text-image[style*="display: block"][style*="margin-left: auto"][style*="margin-right: auto"] {
  margin-left: auto;
  margin-right: auto;
}

/* 图片容器对齐 */
.rich-text-content p,
.rich-text-content div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.rich-text-content p[style*="text-align: center"],
.rich-text-content div[style*="text-align: center"] {
  text-align: center;
}

.rich-text-content p[style*="text-align: left"],
.rich-text-content div[style*="text-align: left"] {
  text-align: left;
}

.rich-text-content p[style*="text-align: right"],
.rich-text-content div[style*="text-align: right"] {
  text-align: right;
}

/* 支持Quill编辑器的对齐类 */
.rich-text-content .ql-align-center {
  text-align: center;
}

.rich-text-content .ql-align-left {
  text-align: left;
}

.rich-text-content .ql-align-right {
  text-align: right;
}

.rich-text-content .ql-align-justify {
  text-align: justify;
}

.rich-text-content .rich-text-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 6px;
  overflow: hidden;
}

.rich-text-content .rich-text-table th,
.rich-text-content .rich-text-table td {
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.rich-text-content .rich-text-table th {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e5e5;
  font-weight: 600;
}

.rich-text-content .rich-text-table td {
  color: #cccccc;
}

.rich-text-content a {
  color: #409eff;
  text-decoration: none;
  transition: color 0.2s;
}

.rich-text-content a:hover {
  color: #66b1ff;
  text-decoration: underline;
}

.rich-text-content strong {
  color: #e5e5e5;
  font-weight: 600;
}

.rich-text-content em {
  color: #f0f0f0;
  font-style: italic;
}

/* 图片尺寸控制 */
.rich-text-content .rich-text-image[style*="width"] {
  max-width: 100% !important;
}

.rich-text-content .rich-text-image[width] {
  max-width: 100% !important;
  width: auto !important;
}

/* 防止图片超出容器 */
.rich-text-content {
  overflow-x: auto;
  word-wrap: break-word;
}

.rich-text-content img:not(.rich-text-image) {
  max-width: 100%;
  max-height: 600px;
  height: auto;
  object-fit: contain;
}

/* 清除浮动影响 */
.rich-text-content::after {
  content: "";
  display: table;
  clear: both;
}

/* 移动端富文本适配 */
@media (max-width: 768px) {
  .rich-text-content {
    font-size: 13px;
  }
  
  .rich-text-content h1 { font-size: 20px; }
  .rich-text-content h2 { font-size: 18px; }
  .rich-text-content h3 { font-size: 16px; }
  .rich-text-content h4 { font-size: 14px; }
  .rich-text-content h5 { font-size: 13px; }
  .rich-text-content h6 { font-size: 12px; }
  
  .rich-text-content .rich-text-table {
    font-size: 12px;
  }
  
  .rich-text-content .rich-text-table th,
  .rich-text-content .rich-text-table td {
    padding: 6px 8px;
  }
  
  /* 移动端图片优化 */
  .rich-text-content .rich-text-image {
    margin: 8px 0;
    border-radius: 6px;
    max-height: 400px;
  }
  
  /* 移动端取消浮动 */
  .rich-text-content .rich-text-image[style*="float"] {
    float: none !important;
    margin: 8px auto !important;
    display: block !important;
  }
}



.video-covers-section {
  margin-top: 20px;
}

/* PC端隐藏视频封面区域，避免与右侧播放列表重复 */
@media (min-width: 768px) {
  .video-covers-section {
    display: none;
  }
}

/* 移动端隐藏类 */
.hidden-mobile {
  display: block;
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }
}

/* 权限信息显示样式 */
.permission-info-section {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.permission-info-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.permission-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.permission-text {
  flex: 1;
}

.permission-text h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #92400e;
}

.permission-text p {
  margin: 0;
  font-size: 14px;
  color: #a16207;
  line-height: 1.5;
}

.upgrade-permission-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.upgrade-permission-btn:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.upgrade-permission-btn:active {
  transform: translateY(0);
}

/* 移动端权限信息样式适配 */
@media (max-width: 768px) {
  .permission-info-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .permission-text {
    text-align: center;
  }
  
  .upgrade-permission-btn {
    width: 100%;
    max-width: 200px;
  }
}

/* 会员开通弹窗 - 简化版本 */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dialog {
  background: rgba(40, 40, 40, 1);
  border-radius: 12px;
  width: 100%;
  max-width: 360px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from { transform: scale(0.9) translateY(-20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dialog-header h3 {
  margin: 0;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}

.dialog-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}

.dialog-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.dialog-body {
  padding: 20px;
}

.dialog-text {
  margin: 0 0 20px 0;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
  font-size: 15px;
}

.benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.benefits-list li {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dialog-footer {
  padding: 0 20px 20px;
  display: flex;
  gap: 12px;
}

.btn {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-primary {
  background: #3b82f6;
  color: #fff;
}

.btn-primary:hover {
  background: #2563eb;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .dialog {
    max-width: 320px;
    margin: 0 10px;
  }
  
  .dialog-header,
  .dialog-body {
    padding: 16px;
  }
  
  .dialog-footer {
    padding: 0 16px 16px;
    flex-direction: column;
  }
  
  .dialog-header h3 {
    font-size: 16px;
  }
  
  .dialog-text {
    font-size: 14px;
  }
  
  .benefits-list li {
    font-size: 13px;
  }
}

/* 课程卡片 - 简化版本 */
.video-covers-section h3 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #e5e5e5;
}

.video-covers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.video-cover-item {
  position: relative;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease;
}

.video-cover-item:hover {
  transform: translateY(-2px);
}

.video-cover-item.active {
  border: 2px solid #3b82f6;
}

.video-cover-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 封面图片和覆盖层 - 简化版本 */
.cover-image {
  width: 100%;
  height: 100%;
  background: #000;
}

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

.cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s;
}

.video-cover-item:hover .cover-overlay {
  opacity: 1;
}

.lock-overlay,
.play-overlay {
  text-align: center;
  color: #fff;
}

.lock-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.play-button {
  font-size: 36px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

.video-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.7);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  box-sizing: border-box;
}

.video-chapter-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.chapter-badge {
  display: inline-block;
  background: #409eff;
  color: #fff;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.video-number {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  min-width: 16px;
  text-align: center;
}

.video-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  height: 1.4em; /* 固定高度，确保单行显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行显示 */
}

.video-desc {
  margin: 0;
  font-size: 12px;
  color: #ccc;
  line-height: 1.4;
  height: 2.8em; /* 固定高度，约等于2行 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.no-videos-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #f0f9eb;
  border: 1px solid #67c23a;
  border-radius: 8px;
  margin-top: 20px;
}

.no-videos-notice .notice-icon {
  font-size: 24px;
  color: #67c23a;
}

.no-videos-notice .notice-content h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  color: #67c23a;
}

.no-videos-notice .notice-content p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #67c23a;
  line-height: 1.6;
}

.video-container {
  display: flex;
  gap: 30px;
  width: 100%;
  align-items: stretch;
}

.video-player {
  flex: 2;
  aspect-ratio: 16/9;
  background: rgba(40, 40, 40, 1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* 桌面端最小高度约束 - 确保合理的播放器尺寸 */
@media (min-width: 1024px) {
  .video-container {
    min-height: 400px;
  }
  
  .video-player {
    min-height: 400px;
  }
}

/* 课程主封面显示样式 */
.course-cover-display {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.course-cover-display:hover {
  transform: scale(1.02);
}

.course-main-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.cover-overlay-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.cover-overlay-content .play-icon {
  font-size: 64px;
  color: #fff;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.cover-overlay-content .course-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.3;
}

.cover-overlay-content .course-subtitle {
  font-size: 16px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.lock-icon-large {
  font-size: 64px;
  color: #ff6b6b;
  margin-bottom: 20px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.player-placeholder {
  text-align: center;
  color: #fff;
}

.play-icon {
  font-size: 48px;
  color: #3b82f6;
  margin-bottom: 16px;
}

.player-placeholder p {
  font-size: 18px;
  margin: 0 0 8px 0;
  color: #ccc;
}

.player-size {
  font-size: 14px;
  color: #666;
}

.pc-size {
  display: block;
}

.mobile-size {
  display: none;
}

/* 课程信息面板 - 现代化毛玻璃效果 */
.course-info-panel {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 400px;
  text-align: left; /* 强制左对齐，覆盖#app的居中样式 */
  color: white;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 0;
  min-height: 0;
}

/* 平板和PC布局调整 */
@media (max-width: 1399px) {
  .course-info-panel {
    max-width: 100%;
  }
}

/* 章节容器 - 可滚动版本 */
.chapters-container {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  padding: 0 24px 24px 24px;
  min-height: 0;
}

.chapters-container::-webkit-scrollbar {
  width: 6px;
}

.chapters-container::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* 章节控制 */
.chapters-control {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  margin-bottom: 8px;
}

.control-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.control-btn svg.rotated {
  transform: rotate(180deg);
}

/* 章节项 - 简化版本 */
.chapter-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

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

.chapter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.chapter-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.chapter-title {
  flex: 1;
}

.chapter-name {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.video-count {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.chapter-toggle {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s;
}

.chapter-toggle svg.rotated {
  transform: rotate(180deg);
}

/* 章节视频列表 - 简化版本 */
.chapter-videos {
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: max-height 0.3s ease;
  max-height: 0;
}

.chapter-videos.expanded {
  max-height: 1000px;
}

/* 播放列表项 */
.playlist-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-left: 0;
  border-left: 2px solid transparent;
}

.playlist-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.playlist-item.active {
  background: rgba(255, 255, 255, 0.12);
  border-left-color: #3b82f6;
}

.playlist-item.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

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

/* 视频封面图片样式 */
.video-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.3s ease;
}

.video-cover-img:hover {
  transform: scale(1.05);
}

/* 创建者信息区域 - 统一样式 */
.creator-info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 24px 16px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.creator-info-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.creator-info-text {
  flex: 1;
}

.course-views {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
}

.playlist-favorite-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.playlist-favorite-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.playlist-favorite-btn.favorited {
  background: #fbbf24;
  border-color: #fbbf24;
  color: #1f2937;
}

.playlist-favorite-btn.favorited:hover {
  background: #f59e0b;
  border-color: #f59e0b;
}

.playlist-favorite-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* 播放列表项样式已统一到章节结构中 */

.item-cover {
  position: relative;
  flex: 0 0 120px;
  height: 68px;
}

.item-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.item-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* lock-icon样式已在前面定义 */

.item-info {
  flex: 1;
  min-width: 0;
}

.item-title {
  margin: 0 0 8px 0;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  height: 1.4em; /* 固定高度，确保单行显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行显示 */
}

.item-desc {
  margin: 0;
  color: #999;
  font-size: 12px;
  line-height: 1.4;
  height: 2.8em; /* 固定高度，约等于2行 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 平板端适配 (768px - 1023px) */
@media (max-width: 1023px) and (min-width: 768px) {
  .video-container {
    flex-direction: column;
    gap: 20px;
  }
  
  .video-player {
    flex: none;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
  }
  
  .course-info-panel {
    flex: none;
    width: 100%;
    min-height: auto;
    max-width: 100%;
    max-height: 400px;
    padding: 0;
  }
  
  .creator-info-section {
    padding: 20px 20px 14px 20px;
  }
  
  .chapters-container {
    padding: 0 20px 20px 20px;
  }
  
  /* 平板端课程封面样式 */
  .cover-overlay-content .play-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  .cover-overlay-content .course-title {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .cover-overlay-content .course-subtitle {
    font-size: 14px;
  }
  

  
  .pc-size {
    display: none;
  }
  
  .mobile-size {
    display: block;
  }
  
  /* 视频封面网格响应式 */
  .video-covers-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
  }
  
  .video-cover-item {
    height: 100px;
  }
  
  .video-title {
    font-size: 12px;
  }
  
  .video-desc {
    font-size: 10px;
  }
  
  /* 平板端章节显示优化已在上方统一设置 */
  
  .chapters-control {
    padding: 10px 12px;
    justify-content: left;
  }
  
  .control-btn {
    padding: 7px 14px;
    font-size: 11px;
    gap: 5px;
    min-width: 75px;
  }
  
  .control-btn svg {
    width: 13px;
    height: 13px;
  }
  
  .chapter-header {
    padding: 10px 12px;
    text-align: left; /* 确保平板端也左对齐 */
  }
  
  .chapter-title {
    text-align: left; /* 确保平板端也左对齐 */
  }
  
  .chapter-name {
    font-size: 13px;
    text-align: left; /* 确保平板端也左对齐 */
  }
  
  .video-count {
    font-size: 11px;
    text-align: left; /* 确保平板端也左对齐 */
  }
  
  .chapter-videos .playlist-item {
    padding: 8px 10px;
    margin-left: 0;
    gap: 10px;
  }
  
  .chapter-toggle svg {
    width: 14px;
    height: 14px;
  }
  
  .item-cover {
    width: 80px;
    height: 45px;
    margin-bottom: 0;
  }
  
  .item-title {
    font-size: 12px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  
  .item-desc {
    font-size: 10px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }


}

/* 小屏优化 (480px - 640px) */
@media (max-width: 640px) and (min-width: 480px) {
  .course-detail {
    padding: 10px;
  }
  
  .breadcrumb-container {
    padding: 0 16px;
  }
  
  .video-module {
    padding: 16px 0 24px;
  }
  
  .video-inner {
    padding: 0 16px; /* 与移动端保持一致的左右边距，确保对称 */
  }
  
  .video-container {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .video-player {
    max-width: 100%;
    min-width: unset;
    aspect-ratio: 16/9;
    border-radius: 6px;
  }
  

  
  /* 小屏课程信息栏 */
  .course-info-container {
    padding: 0 12px;
    height: 64px;
  }
  
  .creator-avatar {
    width: 36px;
    height: 36px;
  }
  
  .creator-name {
    font-size: 13px;
  }
  
  .course-category,
  .course-level {
    font-size: 11px;
  }
  
  .favorite-btn {
    padding: 5px 10px;
    font-size: 11px;
    gap: 3px;
  }
  
  .favorite-btn svg {
    width: 12px;
    height: 12px;
  }
  
  /* 小屏封面样式 */
  .cover-overlay-content .play-icon {
    font-size: 32px;
    margin-bottom: 10px;
  }
  
  .cover-overlay-content .course-title {
    font-size: 15px;
    margin-bottom: 5px;
  }
  
  .cover-overlay-content .course-subtitle {
    font-size: 11px;
  }
  
  /* 小屏视频封面网格 */
  .video-covers-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
  }
  
  .video-cover-item {
    height: 72px;
  }
  
  .video-title {
    font-size: 10px;
  }
  
  .video-desc {
    font-size: 8px;
  }
  
  .play-button {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* 移动端适配 (最大767px) - 与below-module条件保持一致 */
@media (max-width: 767px) {
  .course-detail {
    padding: 8px;
  }
  
  .breadcrumb-container .course-container {
    padding: 0 15px;
  }
  
  .video-module {
    padding: 12px 0 20px;
  }
  
  /* video-inner样式已在上方767px媒体查询中统一设置为16px，确保对称 */
  
  /* 移动端course-container边距修复 */
  .course-container {
    padding: 0 !important; /* 移动端去除padding，让below-module的margin直接控制边距 */
  }
  
  /* 移动端below-module样式已在上方1348行处定义，此处删除重复规则避免冲突 */
  
  .video-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .video-player {
    flex: none;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 6px;
  }
  
  .course-info-panel {
    flex: none;
    width: 100%;
    min-height: auto;
    max-width: 100%;
    max-height: 350px;
    padding: 0;
  }
  
  .creator-info-section {
    padding: 16px 16px 12px 16px;
  }
  
  .chapters-container {
    padding: 0 16px 16px 16px;
  }
  
  /* 移动端课程封面样式 */
  .cover-overlay-content .play-icon {
    font-size: 28px;
    margin-bottom: 8px;
  }
  
  .cover-overlay-content .course-title {
    font-size: 14px;
    margin-bottom: 4px;
  }
  
  .cover-overlay-content .course-subtitle {
    font-size: 10px;
  }
  
  .pc-size {
    display: none;
  }
  
  .mobile-size {
    display: block;
  }
  

  

  
  /* 移动端课程卡片优化 */
  .video-covers-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
  
  .video-cover-item {
    height: 80px;
  }
  
  .play-button {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  .lock-icon {
    font-size: 20px;
    margin-bottom: 4px;
  }
  

  
  .lock-overlay span {
    font-size: 8px;
  }
  
  /* 移动端权限提示 */
  .permission-notice {
    padding: 16px;
    margin-top: 16px;
    border-radius: 12px;
  }
  
  .notice-content {
    margin-left: 8px;
  }
  
  .notice-content h4 {
    font-size: 16px;
    margin-bottom: 8px;
  }
  
  .notice-content p {
    font-size: 13px;
    margin-bottom: 16px;
  }
  
  .upgrade-options {
    flex-direction: column;
    gap: 8px;
  }
  
  .upgrade-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: 12px;
    border-radius: 8px;
    gap: 6px;
  }
  
  .upgrade-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* 添加加载状态样式 */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: #666;
}

.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 12px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 错误状态样式 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  text-align: center;
  color: #666;
}

.error-icon {
  font-size: 48px;
  color: #ef4444;
  margin-bottom: 16px;
}

.error-message {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
}

.error-detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.retry-btn {
  padding: 8px 16px;
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.3s ease;
}

.retry-btn:hover {
  background: #2563eb;
}

/* 详情图集样式 */
.detail-gallery-section {
  margin-top: 32px;
}

/* 图集骨架屏样式 */
.gallery-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.skeleton-item {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  background: #f8f9fa;
}

/* 新的图片内骨架屏样式 */
.skeleton-image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border-radius: 12px;
  overflow: hidden;
}

.skeleton-image {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeletonLoading 1.5s infinite;
  border-radius: 12px;
}

@keyframes skeletonLoading {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* 图片加载状态样式 */
.gallery-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-image.image-loaded {
  opacity: 1;
}



.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 20px;
}

.gallery-item {
  position: relative;
  aspect-ratio: 16/9;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  background: #f8f9fa;
}

.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border-color: #e0e0e0;
}

/* gallery-image样式已在前面定义 */

.gallery-item:hover .gallery-image {
  transform: scale(1.05);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay.overlay-visible {
  opacity: 1;
}

.gallery-zoom-icon {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.8);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}

.gallery-zoom-icon .el-icon {
  color: #fff;
}

.gallery-item:hover .gallery-zoom-icon {
  transform: scale(1.1);
  background: rgba(0, 0, 0, 0.8);
}

/* 图片查看器样式 */
.image-viewer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: fadeIn 0.3s ease-out;
  cursor: pointer;
}

.image-viewer {
  position: relative;
  max-width: 95vw;
  max-height: 95vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease-out;
  cursor: default;
}

.image-viewer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #f0f0f0;
}

.image-counter {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.image-viewer-close {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #666;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.image-viewer-close .el-icon {
  color: #666;
}

.image-viewer-close:hover .el-icon {
  color: #333;
}

.image-viewer-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.image-viewer-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f9fa;
}

.viewer-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  display: block;
}

.image-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.image-nav-btn .el-icon {
  color: #333;
}

.image-nav-btn:hover .el-icon {
  color: #000;
}

.image-nav-btn:hover {
  background: #fff;
  color: #000;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
}

.prev-btn {
  left: 20px;
}

.next-btn {
  right: 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .breadcrumb-container .course-container {
    padding: 0 15px;
  }
  
  .detail-gallery-section {
    margin-top: 24px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  /* 移动端骨架屏适配 */
  .gallery-skeleton {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .gallery-item {
    border-radius: 8px;
  }
  
  .gallery-zoom-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .image-viewer {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
  }
  
  .image-viewer-header {
    padding: 12px 16px;
  }
  
  .image-counter {
    font-size: 12px;
  }
  
  .image-viewer-close {
    font-size: 20px;
    width: 28px;
    height: 28px;
  }
  
  .viewer-image {
    max-height: 60vh;
  }
  
  .image-nav-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
  
  .prev-btn {
    left: 12px;
  }
  
  .next-btn {
    right: 12px;
  }
}

@media (max-width: 480px) {
  .breadcrumb-container .course-container {
    padding: 0 10px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* 小屏骨架屏适配 */
  .gallery-skeleton {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }
  
  .gallery-zoom-icon {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .image-viewer-header {
    padding: 10px 12px;
  }
  
  .image-nav-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .prev-btn {
    left: 8px;
  }
  
  .next-btn {
    right: 8px;
  }
}


</style> 