<template>
  <div class="course-detail-page">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="container">
        <span class="breadcrumb-text">首页 > 课程库 > 暑期名师领学，提高班级教学质量！高效冲分指南</span>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <div class="container">
        <div class="content-layout">
          <!-- 左侧主要内容 -->
          <div class="main-column">
            <!-- 视频播放器区域 - 未报名状态 -->
            <div class="video-player-section">
              <div class="video-player unregistered">
                <div class="video-background">
                  <div class="video-content">
                    <!-- 课程标题 -->
                    <h1 class="course-main-title">暑期名师领学，提高班级教学质量！高效冲分指南</h1>

                    <!-- 课程信息 -->
                    <div class="course-meta-info">
                      <span class="meta-item">讲师：王老师</span>
                      <span class="meta-separator">|</span>
                      <span class="meta-item">时长：45分32秒</span>
                    </div>

                    <!-- 报名按钮 -->
                    <button class="enroll-button" @click="enrollCourse">
                      立即报名
                    </button>
                  </div>
                </div>

                <!-- 底部工具栏 -->
                <div class="video-toolbar">
                  <div class="toolbar-left">
                    <button class="toolbar-btn like-btn" :class="{ liked: isLiked }" @click="toggleLike">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 14L7.1 13.2C3.4 9.9 1 7.7 1 5C1 2.8 2.8 1 5 1C6.2 1 7.4 1.6 8 2.5C8.6 1.6 9.8 1 11 1C13.2 1 15 2.8 15 5C15 7.7 12.6 9.9 8.9 13.2L8 14Z" :fill="isLiked ? '#ff4757' : 'none'" stroke="currentColor" stroke-width="1"/>
                      </svg>
                      <span class="toolbar-text">{{ likeCount }}</span>
                    </button>

                    <button class="toolbar-btn share-btn" @click="shareCourse">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M13 10C12.3 10 11.7 10.3 11.2 10.7L5.9 7.8C5.9 7.5 6 7.3 6 7C6 6.7 5.9 6.5 5.9 6.2L11.2 3.3C11.7 3.7 12.3 4 13 4C14.7 4 16 2.7 16 1C16 -0.7 14.7 -2 13 -2C11.3 -2 10 -0.7 10 1C10 1.3 10.1 1.5 10.1 1.8L4.8 4.7C4.3 4.3 3.7 4 3 4C1.3 4 0 5.3 0 7C0 8.7 1.3 10 3 10C3.7 10 4.3 9.7 4.8 9.3L10.1 12.2C10.1 12.5 10 12.7 10 13C10 14.7 11.3 16 13 16C14.7 16 16 14.7 16 13C16 11.3 14.7 10 13 10Z" fill="currentColor"/>
                      </svg>
                      <span class="toolbar-text">{{ shareCount }}</span>
                    </button>
                  </div>

                  <div class="toolbar-right">
                    <button class="toolbar-btn icon-btn" @click="showComments">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M14 1H2C1.4 1 1 1.4 1 2V10C1 10.6 1.4 11 2 11H3V14L6 11H14C14.6 11 15 10.6 15 10V2C15 1.4 14.6 1 14 1Z" stroke="currentColor" stroke-width="1" fill="none"/>
                      </svg>
                    </button>

                    <button class="toolbar-btn icon-btn" @click="showMoreOptions">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M2 8C2 7.4 2.4 7 3 7C3.6 7 4 7.4 4 8C4 8.6 3.6 9 3 9C2.4 9 2 8.6 2 8ZM7 8C7 7.4 7.4 7 8 7C8.6 7 9 7.4 9 8C9 8.6 8.6 9 8 9C7.4 9 7 8.6 7 8ZM12 8C12 7.4 12.4 7 13 7C13.6 7 14 7.4 14 8C14 8.6 13.6 9 13 9C12.4 9 12 8.6 12 8Z" fill="currentColor"/>
                      </svg>
                    </button>

                    <div class="comment-input-container">
                      <input
                        type="text"
                        class="comment-input"
                        placeholder="成功报名学习才能发送弹幕~"
                        v-model="commentText"
                        :disabled="!isEnrolled"
                      />
                      <button class="send-btn" :disabled="!commentText.trim() || !isEnrolled" @click="sendComment">
                        发送
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 课程信息区域 -->
            <div class="course-info-section">
              <!-- 课程标题和分类 -->
              <div class="course-header">
                <h1 class="course-title">暑期名师领学，提高班级教学质量！高效冲分指南</h1>
                <div class="course-meta">
                  <span class="course-category">分类：<span class="category-tag">信息技术</span></span>
                  <button class="btn-notes">记笔记</button>
                </div>
              </div>

              <!-- 课程描述 -->
              <div class="course-description">
                <p>本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。</p>
              </div>

              <!-- 讲师信息 -->
              <div class="instructors-section">
                <h3 class="section-title">讲师</h3>
                <div class="instructors-list">
                  <div class="instructor-item">
                    <div class="instructor-avatar">
                      <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=60&h=60&fit=crop&crop=face" alt="汪波" />
                    </div>
                    <div class="instructor-name">汪波</div>
                    <div class="instructor-title">讲师</div>
                  </div>
                  <div class="instructor-item">
                    <div class="instructor-avatar">
                      <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=60&h=60&fit=crop&crop=face" alt="汪波" />
                    </div>
                    <div class="instructor-name">汪波</div>
                    <div class="instructor-title">讲师</div>
                  </div>
                  <div class="instructor-item">
                    <div class="instructor-avatar">
                      <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=60&h=60&fit=crop&crop=face" alt="汪波" />
                    </div>
                    <div class="instructor-name">汪波</div>
                    <div class="instructor-title">讲师</div>
                  </div>
                </div>
              </div>

              <!-- 课程标签页 -->
              <div class="course-tabs">
                <div class="tab-nav">
                  <button class="tab-btn" :class="{ active: activeTab === 'intro' }" @click="activeTab = 'intro'">课程介绍</button>
                  <button class="tab-btn" :class="{ active: activeTab === 'comments' }" @click="activeTab = 'comments'">评论(1251)</button>
                </div>

                <!-- 标签页内容区域 -->
                <div class="tab-content">
                  <!-- 课程介绍内容 -->
                  <div v-if="activeTab === 'intro'" class="tab-pane">
                    <!-- 已报名状态显示详细内容 -->
                    <div v-if="isEnrolled" class="intro-content">
                      <h4>课程详情</h4>
                      <p>本课程深度聚焦问题，让每一位教师了解并学习使用DeepSeek，结合办公自动化职业岗位标准，以实际工作任务为引导，强调课程内容的易用性和岗位要求的匹配性。</p>
                      <p>课程内容与全国计算机等级考试、"1+X"WPS办公应用职业技能等级证书，技能大赛紧密结合，课程设置紧密对应实际全面共享，可为职业工作人员、在校学生、创行教师提供服务与学习支持。</p>

                      <h4>学习目标</h4>
                      <ul>
                        <li>掌握DeepSeek的基本使用方法</li>
                        <li>了解办公自动化职业岗位标准</li>
                        <li>提高教学质量和效率</li>
                        <li>获得实际工作技能</li>
                      </ul>

                      <h4>适用人群</h4>
                      <p>本课程适合职业工作人员、在校学生、教师等群体学习。</p>
                    </div>

                    <!-- 未报名状态显示空内容 -->
                    <div v-else class="intro-empty">
                      <!-- 空内容区域，保持灰色背景 -->
                    </div>
                  </div>

                  <!-- 评论内容 -->
                  <div v-if="activeTab === 'comments'" class="tab-pane">
                    <div class="comments-content">
                      <div class="comment-stats">
                        <span class="total-comments">共1251条评论</span>
                        <div class="comment-filters">
                          <button class="filter-btn active">全部</button>
                          <button class="filter-btn">最新</button>
                          <button class="filter-btn">最热</button>
                        </div>
                      </div>

                      <div class="comment-list">
                        <div class="comment-item" v-for="comment in displayComments" :key="comment.id">
                          <div class="comment-avatar">
                            <img :src="comment.avatar" :alt="comment.username" />
                          </div>
                          <div class="comment-content">
                            <div class="comment-header">
                              <span class="comment-username">{{ comment.username }}</span>
                              <span class="comment-time">{{ comment.time }}</span>
                            </div>
                            <div class="comment-text">{{ comment.content }}</div>
                            <div class="comment-actions">
                              <button class="action-btn">
                                <i class="icon-like"></i>
                                {{ comment.likes }}
                              </button>
                              <button class="action-btn">回复</button>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="load-more">
                        <button class="btn-load-more">加载更多评论</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧边栏 -->
          <div class="sidebar">
            <!-- 报名学习按钮 -->
            <div class="enroll-section">
              <button class="btn-enroll">报名学习</button>
            </div>

            <!-- 课程章节 -->
            <div class="course-catalog">
              <div class="catalog-header">
                <h3>课程章节</h3>
                <div class="catalog-sort" @click="toggleSortOrder">
                  <span>三</span>
                  <span>{{ sortOrder === 'asc' ? '正序' : '倒序' }}</span>
                </div>
              </div>
              <div class="catalog-content">
                <div class="chapter-list">
                  <!-- 动态渲染章节，根据排序状态决定顺序 -->
                  <div class="chapter-item" v-for="chapter in sortedChapters" :key="chapter.id">
                    <div class="chapter-header" @click="toggleChapter(chapter.id)">
                      <span class="chapter-title">{{ chapter.title }}</span>
                      <div class="chapter-toggle">
                        <svg class="toggle-icon" :class="{ expanded: chapterStates[chapter.id] }" width="12" height="12" viewBox="0 0 12 12" fill="none">
                          <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                      </div>
                    </div>
                    <div class="lesson-list" v-if="chapterStates[chapter.id]">
                      <div class="lesson-item" v-for="lesson in chapter.lessons" :key="lesson.id">
                        <div class="lesson-left">
                          <span class="lesson-type" :class="lesson.type">{{ lesson.type === 'video' ? '视频' : '资料' }}</span>
                          <span class="lesson-title">{{ lesson.title }}</span>
                        </div>
                        <div class="lesson-right">
                          <!-- 视频课时显示时长和播放按钮 -->
                          <template v-if="lesson.type === 'video'">
                            <span class="lesson-duration">{{ lesson.duration }}</span>
                            <button class="lesson-play-btn">
                              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M3 2L9 6L3 10V2Z" fill="currentColor"/>
                              </svg>
                            </button>
                          </template>
                          <!-- 资料课时显示下载按钮 -->
                          <template v-else>
                            <button class="lesson-download-btn">
                              <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
                                <path d="M6 1V8M6 8L3 5M6 8L9 5M2 10H10" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/>
                              </svg>
                            </button>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- 推荐课程 -->
            <div class="recommended-courses">
              <div class="recommend-header">
                <h3>推荐课程</h3>
              </div>
              <div class="recommend-list">
                <!-- 计算机二级课程 -->
                <div class="recommend-item">
                  <div class="recommend-image">
                    <div class="recommend-placeholder computer-bg">
                      <div class="placeholder-text">计算机二级</div>
                    </div>
                    <div class="recommend-badge">热门</div>
                  </div>
                  <div class="recommend-content">
                    <h4 class="recommend-title">计算机二级考前冲刺</h4>
                    <div class="recommend-tags">
                      <span class="tag">考试必备</span>
                      <span class="tag">名师授课</span>
                      <span class="tag">高通过率</span>
                    </div>
                    <p class="recommend-desc">备考计算机二级，名师带你高效复习，掌握考试重点，轻松通过考试</p>
                    <button class="recommend-btn">立即学习</button>
                  </div>
                </div>

                <!-- 英语课程 -->
                <div class="recommend-item">
                  <div class="recommend-image">
                    <div class="recommend-placeholder english-bg">
                      <div class="placeholder-text">摆脱哑巴英语</div>
                    </div>
                  </div>
                  <div class="recommend-content">
                    <h4 class="recommend-title">摆脱哑巴英语</h4>
                    <p class="recommend-desc">备考计算机二级，名师带你高效复习，掌握考试重点，轻松通过考试</p>
                    <div class="recommend-meta">
                      <span class="recommend-price">¥99</span>
                      <button class="recommend-btn">立即学习</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const courseId = ref(route.params.id)

// 视频播放相关状态
const isPlaying = ref(false)
const videoProgress = ref(25) // 播放进度百分比

// 未报名状态的交互数据
const isLiked = ref(false)
const likeCount = ref(541)
const shareCount = ref(2377)
const commentText = ref('')
const isEnrolled = ref(false) // 是否已报名
const activeTab = ref('intro') // 当前激活的标签页

// 视频播放控制方法
const playVideo = () => {
  isPlaying.value = true
  console.log('开始播放视频')
}

const togglePlay = () => {
  isPlaying.value = !isPlaying.value
  console.log(isPlaying.value ? '播放视频' : '暂停视频')
}

// 未报名状态的交互方法
const enrollCourse = () => {
  console.log('点击报名课程')
  // 这里可以跳转到报名页面或显示报名弹窗
}

const toggleLike = () => {
  isLiked.value = !isLiked.value
  likeCount.value += isLiked.value ? 1 : -1
  console.log(isLiked.value ? '点赞课程' : '取消点赞')
}

const shareCourse = () => {
  console.log('分享课程')
  // 这里可以打开分享弹窗
}

const showComments = () => {
  console.log('显示评论区')
  // 这里可以滚动到评论区或打开评论弹窗
}

const showMoreOptions = () => {
  console.log('显示更多选项')
  // 这里可以显示更多操作选项
}

const sendComment = () => {
  if (commentText.value.trim() && isEnrolled.value) {
    console.log('发送弹幕:', commentText.value)
    commentText.value = ''
  }
}

// 选择课程方法
const selectLesson = (lesson: any) => {
  console.log('选择课程:', lesson.title)
  // 这里可以添加切换视频源的逻辑
}



// 课程章节数据
const chaptersData = ref([
  {
    id: 'chapter1',
    order: 1,
    title: '第一章 课前准备',
    lessons: [
      { id: 1, type: 'video', title: '开课彩蛋：新开始新征程', duration: '01:03:56' },
      { id: 2, type: 'video', title: '课程定位与目标', duration: '00:44:05' },
      { id: 3, type: 'video', title: '教学安排及学习建议', duration: '00:52:22' },
      { id: 4, type: 'material', title: '课前准备PPT' }
    ]
  },
  {
    id: 'chapter2',
    order: 2,
    title: '第二章 程序设计基础知识',
    lessons: [
      { id: 5, type: 'video', title: '第一章 程序设计入门', duration: '01:03:56' },
      { id: 6, type: 'material', title: '课件PPT' },
      { id: 7, type: 'video', title: '第二章 循环结构', duration: '00:52:22' },
      { id: 8, type: 'video', title: '第三章 函数&递归', duration: '00:52:22' },
      { id: 9, type: 'material', title: '练习题目' }
    ]
  },
  {
    id: 'chapter3',
    order: 3,
    title: '第三章 程序的控制结构',
    lessons: [
      { id: 10, type: 'video', title: '条件语句与分支结构', duration: '00:45:30' },
      { id: 11, type: 'video', title: '循环语句详解', duration: '00:38:45' },
      { id: 12, type: 'video', title: '嵌套循环与优化', duration: '00:55:20' },
      { id: 13, type: 'video', title: '异常处理机制', duration: '00:42:15' },
      { id: 14, type: 'material', title: '控制结构综合练习' }
    ]
  },
  {
    id: 'chapter4',
    order: 4,
    title: '第四章 大语言模型介绍',
    lessons: [
      { id: 15, type: 'video', title: '人工智能发展历程', duration: '00:35:20' },
      { id: 16, type: 'video', title: '大语言模型基础概念', duration: '00:48:30' },
      { id: 17, type: 'video', title: 'Transformer架构解析', duration: '01:15:45' },
      { id: 18, type: 'video', title: '主流大模型对比分析', duration: '00:52:10' },
      { id: 19, type: 'video', title: '大模型的应用场景', duration: '00:38:25' },
      { id: 20, type: 'material', title: '模型训练与微调资料' }
    ]
  },
  {
    id: 'chapter5',
    order: 5,
    title: '第五章 DeepSeek实际应用',
    lessons: [
      { id: 21, type: 'video', title: 'DeepSeek平台介绍', duration: '00:25:30' },
      { id: 22, type: 'video', title: 'API接口使用指南', duration: '00:42:15' },
      { id: 23, type: 'video', title: '代码生成与优化', duration: '01:08:20' },
      { id: 24, type: 'video', title: '文档自动生成', duration: '00:35:45' },
      { id: 25, type: 'video', title: '智能问答系统搭建', duration: '01:22:30' },
      { id: 26, type: 'video', title: '数据分析与处理', duration: '00:58:15' },
      { id: 27, type: 'material', title: '实战项目演示代码' }
    ]
  },
  {
    id: 'chapter6',
    order: 6,
    title: '第六章 高级应用与项目实战',
    lessons: [
      { id: 28, type: 'video', title: '企业级应用架构设计', duration: '01:15:30' },
      { id: 29, type: 'video', title: '性能优化与调试技巧', duration: '00:48:20' },
      { id: 30, type: 'video', title: '多模态应用开发', duration: '01:25:45' },
      { id: 31, type: 'video', title: '安全性与隐私保护', duration: '00:38:15' },
      { id: 32, type: 'video', title: '综合项目实战', duration: '02:15:30' },
      { id: 33, type: 'material', title: '项目部署与运维文档' },
      { id: 34, type: 'video', title: '未来发展趋势', duration: '00:45:20' },
      { id: 35, type: 'video', title: '课程总结与答疑', duration: '00:35:10' }
    ]
  }
])

// 课件下载
const courseDownloads = ref([
  { id: 1, name: 'DeepSeek入门指南.pdf', size: '2.5MB' },
  { id: 2, name: '课程代码示例.zip', size: '15.8MB' },
  { id: 3, name: '实践项目模板.zip', size: '8.2MB' },
  { id: 4, name: '参考资料合集.pdf', size: '12.3MB' }
])

// 课程评论
const displayComments = ref([
  {
    id: 1,
    username: '学习者小王',
    avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
    time: '2天前',
    content: '老师讲得很详细，从零基础到实际应用都有涉及，非常适合初学者！',
    likes: 23
  },
  {
    id: 2,
    username: 'AI爱好者',
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
    time: '5天前',
    content: '课程内容很实用，跟着做了几个项目，收获很大。推荐给想学AI的朋友们！',
    likes: 18
  },
  {
    id: 3,
    username: '程序员小李',
    avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&auto=format&fit=crop&w=50&q=80',
    time: '1周前',
    content: 'DeepSeek确实是个很强大的工具，通过这个课程学会了很多实用技巧。',
    likes: 31
  },
  {
    id: 4,
    username: '资深开发者',
    avatar: 'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?w=40&h=40&fit=crop&crop=face',
    time: '3天前',
    content: '课程内容很全面，对提高工作效率很有帮助。',
    likes: 15
  },
  {
    id: 5,
    username: '教育工作者',
    avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=40&h=40&fit=crop&crop=face',
    time: '1周前',
    content: '作为教师，这个课程给了我很多教学灵感，值得推荐。',
    likes: 27
  }
])

// 推荐课程
const recommendedCourses = ref([
  {
    id: 1,
    title: '计算机二级考试指南',
    description: '全面覆盖计算机二级考试要点，助你轻松通过考试',
    image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80',
    studentsCount: '3421',
    rating: '4.8'
  },
  {
    id: 2,
    title: '黑马程序员巴赛罗那',
    description: '从零开始学习编程，打造扎实的编程基础',
    image: 'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80',
    studentsCount: '2856',
    rating: '4.9'
  }
])

// 更多课程（保留原有数据以防其他地方使用）
const moreCourses = ref([
  {
    id: 1,
    title: '计算机二级考试指南',
    image: 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
    studentsCount: '3421'
  },
  {
    id: 2,
    title: 'Python编程基础',
    image: 'https://images.unsplash.com/photo-1526379095098-d400fd0bf935?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
    studentsCount: '2856'
  },
  {
    id: 3,
    title: '机器学习实战',
    image: 'https://images.unsplash.com/photo-1555949963-aa79dcee981c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80',
    studentsCount: '1967'
  }
])

// 章节展开状态管理
const chapterStates = ref<Record<string, boolean>>({
  chapter1: true,  // 第一章默认展开
  chapter2: true,  // 第二章默认展开
  chapter3: false, // 第三章默认收起
  chapter4: false, // 第四章默认收起
  chapter5: false, // 第五章默认收起
  chapter6: false  // 第六章默认收起
})

// 排序状态管理
const sortOrder = ref<'asc' | 'desc'>('asc') // 'asc' 正序, 'desc' 倒序

// 切换章节展开/收起状态
const toggleChapter = (chapterId: string) => {
  chapterStates.value[chapterId] = !chapterStates.value[chapterId]
}

// 切换排序顺序
const toggleSortOrder = () => {
  sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
  console.log('切换排序顺序:', sortOrder.value === 'asc' ? '正序' : '倒序')
}

// 排序后的章节数据
const sortedChapters = computed(() => {
  const chapters = [...chaptersData.value]
  if (sortOrder.value === 'desc') {
    return chapters.sort((a, b) => b.order - a.order)
  }
  return chapters.sort((a, b) => a.order - b.order)
})

onMounted(() => {
  // 页面加载时的初始化逻辑
  console.log('课程详情页加载完成，课程ID:', courseId.value)
})
</script>

<style scoped>
/* 基础样式 */
.course-detail-page {
  min-height: 100vh;
  background: #f5f7fa;
}

.container {
  max-width: 1600px; /* 限制最大宽度，避免在超宽屏幕上过度拉伸 */
  margin: 0 auto;
  padding: 0;
  /* 左侧对齐导航栏的"首页"位置 */
  /* 计算：导航栏左边距30px + Logo宽度72px + Logo右边距40px = 142px */
  padding-left: 142px;
  /* 右边距与左边距保持一致，实现对称布局 */
  padding-right: 142px;
}

/* 面包屑导航 */
.breadcrumb {
  background: white;
  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
}

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

/* 主要内容区域 */
.main-content {
  padding: 20px 0;
}

.content-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

/* 左侧主要内容 */
.main-column {
  flex: 1;
  min-width: 0; /* 防止flex子项溢出 */
}

/* 视频播放器区域 - 未报名状态 */
.video-player-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.video-player.unregistered {
  position: relative;
}

.video-background {
  width: 100%;
  height: 400px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c3e50 50%, #1a252f 75%, #2c3e50 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(52, 152, 219, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(46, 204, 113, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(155, 89, 182, 0.2) 0%, transparent 50%);
  opacity: 0.6;
}

.video-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
  max-width: 600px;
  padding: 0 20px;
}

.course-main-title {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.4;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.course-meta-info {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
}

.meta-item {
  font-weight: 500;
}

.meta-separator {
  opacity: 0.6;
}

.enroll-button {
  background: #3498db;
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.enroll-button:hover {
  background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

/* 底部工具栏 */
.video-toolbar {
  background: #f8f9fa;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e9ecef;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #666;
  font-size: 14px;
}

.toolbar-btn:hover {
  background: #e9ecef;
  color: #333;
}

.toolbar-btn.like-btn.liked {
  color: #ff4757;
}

.toolbar-btn.icon-btn {
  padding: 6px;
  gap: 0;
}

.toolbar-text {
  font-size: 13px;
  font-weight: 500;
}

/* 评论输入区域 */
.comment-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
}

.comment-input {
  flex: 1;
  min-width: 200px;
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
}

.comment-input:focus {
  outline: none;
  border-color: #40a9ff;
  background: white;
}

.comment-input:disabled {
  background: #f5f5f5;
  color: #bbb;
  cursor: not-allowed;
}

.comment-input::placeholder {
  color: #bbb;
}

.send-btn {
  background: #d9d9d9;
  color: #666;
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.send-btn:not(:disabled):hover {
  background: #1890ff;
  color: white;
}

.send-btn:disabled {
  background: #d9d9d9;
  color: #bbb;
  cursor: not-allowed;
}

/* 课程信息区域 */
.course-info-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

/* 课程标题和分类 */
.course-header {
  margin-bottom: 16px;
}

.course-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.4;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

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

.category-tag {
  color: #1890ff;
  font-weight: 500;
}

.btn-notes {
  background: none;
  border: 1px solid #d9d9d9;
  color: #666;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-notes:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 课程描述 */
.course-description {
  margin-bottom: 20px;
}

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

/* 讲师信息 */
.instructors-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.instructors-list {
  display: flex;
  gap: 20px;
}

.instructor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.instructor-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 8px;
}

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

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

.instructor-title {
  font-size: 12px;
  color: #999;
}

/* 课程标签页 */
.course-tabs {
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
}

.tab-nav {
  display: flex;
  gap: 24px;
}

.tab-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  transition: color 0.3s;
}

.tab-btn.active {
  color: #1890ff;
  font-weight: 500;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #1890ff;
}

.tab-btn:hover {
  color: #1890ff;
}

/* 标签页内容区域 */
.tab-content {
  margin-top: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 20px;
  min-height: auto;
}

.tab-pane {
  display: block;
}

/* 课程介绍内容 */
.intro-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px 0;
}

.intro-content p {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 16px;
}

.intro-content ul {
  margin: 0 0 16px 0;
  padding-left: 20px;
}

.intro-content li {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 8px;
}

/* 未报名状态的空内容区域 */
.intro-empty {
  height: 530px;
  /* 保持灰色背景，但内容为空，设置530px高度 */
}

/* 评论内容 */
.comments-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #e8e8e8;
}

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

.comment-filters {
  display: flex;
  gap: 12px;
}

.filter-btn {
  background: none;
  border: none;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 4px;
  transition: all 0.3s;
}

.filter-btn.active {
  background: #1890ff;
  color: white;
}

.filter-btn:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.filter-btn.active:hover {
  background: #1890ff;
  color: white;
}

/* 评论列表 */
.comment-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-item {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.comment-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

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

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.comment-username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-text {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 12px;
}

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

.action-btn {
  background: none;
  border: none;
  font-size: 12px;
  color: #999;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.3s;
}

.action-btn:hover {
  color: #1890ff;
}

.icon-like::before {
  content: '👍';
}

/* 加载更多 */
.load-more {
  text-align: center;
  padding-top: 16px;
}

.btn-load-more {
  background: none;
  border: 1px solid #d9d9d9;
  color: #666;
  padding: 8px 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
}

.btn-load-more:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 右侧边栏 */
.sidebar {
  width: 360px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* 报名学习按钮 */
.enroll-section {
  margin-bottom: 24px;
}

.btn-enroll {
  width: 100%;
  background: #e6f7ff;
  color: #1890ff;
  border: 1px solid #91d5ff;
  padding: 18px 0;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 4px rgba(24, 144, 255, 0.1);
  letter-spacing: 0.5px;
}

.btn-enroll:hover {
  background: #bae7ff;
  border-color: #69c0ff;
}

/* 课程章节 */
.course-catalog {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 1px solid #e8e8e8;
  margin-bottom: 24px;
}

.catalog-header {
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.catalog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.3px;
}

.catalog-sort {
  display: flex;
  gap: 8px;
  font-size: 15px;
  color: #666;
  cursor: pointer;
  transition: color 0.3s;
  font-weight: 500;
}

.catalog-sort:hover {
  color: #1890ff;
}

.catalog-content {
  max-height: 500px;
  overflow-y: auto;
  background: #f5f5f5;
}

/* 章节列表 */
.chapter-list {
  padding: 0;
}

.chapter-item {
  border-bottom: 1px solid #f0f0f0;
}

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

.chapter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  background: #fafafa;
}

.chapter-header:hover {
  background: #ebebeb;
}

.chapter-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.2px;
}

.chapter-toggle {
  display: flex;
  align-items: center;
}

.toggle-icon {
  transition: transform 0.3s;
  color: #666;
}

.toggle-icon.expanded {
  transform: rotate(0deg);
}

/* 课时列表 */
.lesson-list {
  background: white;
}

.lesson-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f5f5f5;
  font-size: 15px;
  min-height: 56px;
}

.lesson-item:hover {
  background: #f8f9fa;
}

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

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

.lesson-type {
  background: #f8f9fa;
  color: #666;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  flex-shrink: 0;
  border: 1px solid #d9d9d9;
  min-width: 40px;
  text-align: center;
  font-weight: 500;
}

.lesson-type.video {
  background: #e6f7ff;
  color: #1890ff;
  border-color: #91d5ff;
}

.lesson-type.document {
  background: #f6ffed;
  color: #52c41a;
  border-color: #b7eb8f;
}

.lesson-title {
  flex: 1;
  color: #333;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
}

.lesson-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.lesson-duration {
  font-size: 13px;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-width: 50px;
  text-align: right;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.lesson-play-btn,
.lesson-download-btn {
  background: none;
  border: 1px solid #d9d9d9;
  color: #666;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  width: 28px;
  height: 28px;
}

.lesson-play-btn:hover,
.lesson-download-btn:hover {
  color: #1890ff;
  border-color: #1890ff;
  background: #f6f8ff;
}

/* 推荐课程 */
.recommended-courses {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  border: 1px solid #e8e8e8;
}

.recommend-header {
  padding: 16px 20px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8e8e8;
}

.recommend-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  letter-spacing: 0.3px;
}

.recommend-list {
  background: white;
}

.recommend-item {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

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

.recommend-image {
  position: relative;
  width: 100%;
  height: 100px;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 10px;
}

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

.recommend-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.recommend-content {
  padding: 0;
}

.recommend-title {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  margin: 0 0 6px 0;
  line-height: 1.4;
}

.recommend-tags {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.tag {
  background: #fff7e6;
  color: #fa8c16;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 500;
  border: 1px solid #ffd591;
}

.recommend-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  margin: 0 0 10px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.recommend-btn {
  background: #1890ff;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.recommend-btn:hover {
  background: #40a9ff;
}

.recommend-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}

.recommend-price {
  font-size: 16px;
  font-weight: 600;
  color: #ff4d4f;
}

/* 推荐课程占位图片 */
.recommend-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
}

.computer-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.english-bg {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.placeholder-text {
  color: white;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}



/* 响应式设计 */
/* 大屏幕优化 */
@media (min-width: 1200px) {
  .container {
    max-width: 1800px; /* 大屏幕下适当增加最大宽度 */
    /* 导航栏padding: 0 32px，所以左边距 = 32px + 72px + 40px = 144px */
    padding-left: 144px;
    /* 右边距与左边距保持一致 */
    padding-right: 144px;
  }

  .sidebar {
    width: 400px;
  }

  .content-layout {
    gap: 60px;
  }
}

/* 中等屏幕优化 */
@media (max-width: 1200px) {
  .container {
    /* 保持与导航栏对齐 */
    padding-left: 142px;
    /* 右边距与左边距保持一致 */
    padding-right: 142px;
  }

  .sidebar {
    width: 320px;
  }

  .content-layout {
    gap: 30px;
  }
}

/* 平板优化 */
@media (max-width: 992px) {
  .container {
    /* 导航栏padding: 0 20px，所以左边距 = 20px + 72px + 40px = 132px */
    padding-left: 132px;
    /* 右边距与左边距保持一致 */
    padding-right: 132px;
  }
}

@media (max-width: 768px) {
  .container {
    /* 小屏幕下导航栏padding: 0 16px，但导航菜单隐藏，所以使用常规内边距 */
    padding: 0 16px;
  }

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

  .sidebar {
    width: 100%;
    position: static;
  }

  .main-column {
    max-width: 100%;
  }

  .video-background {
    height: 300px;
  }

  .course-main-title {
    font-size: 22px;
  }

  .toolbar-left,
  .toolbar-right {
    gap: 12px;
  }

  .toolbar-btn {
    padding: 4px 8px;
  }

  .comment-input-container {
    margin-left: 4px;
  }

  .comment-input {
    min-width: 150px;
    font-size: 12px;
  }

  /* 移动端右侧边栏字体调整 */
  .btn-enroll {
    font-size: 16px;
    padding: 14px 0;
  }

  .catalog-header h3 {
    font-size: 16px;
  }

  .chapter-title {
    font-size: 15px;
  }

  .lesson-title {
    font-size: 13px;
  }

  .lesson-duration {
    font-size: 12px;
  }

  /* 移动端推荐课程调整 */
  .recommend-header h3 {
    font-size: 16px;
  }

  .recommend-image {
    height: 80px;
  }

  .recommend-title {
    font-size: 14px;
  }

  .recommend-desc {
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .video-background {
    height: 250px;
  }

  .course-main-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .course-meta-info {
    font-size: 12px;
    margin-bottom: 20px;
  }

  .enroll-button {
    padding: 10px 24px;
    font-size: 14px;
  }

  /* 小屏幕右侧边栏字体进一步调整 */
  .btn-enroll {
    font-size: 15px;
    padding: 12px 0;
  }

  .catalog-header h3 {
    font-size: 15px;
  }

  .chapter-title {
    font-size: 14px;
  }

  .lesson-title {
    font-size: 12px;
  }

  .lesson-duration {
    font-size: 11px;
  }

  .lesson-play-btn,
  .lesson-download-btn {
    width: 24px;
    height: 24px;
    padding: 4px;
  }

  /* 小屏幕推荐课程进一步调整 */
  .recommend-header h3 {
    font-size: 15px;
  }

  .recommend-image {
    height: 70px;
  }

  .recommend-title {
    font-size: 13px;
  }

  .recommend-desc {
    font-size: 10px;
  }

  .recommend-btn {
    padding: 4px 8px;
    font-size: 11px;
  }

  .video-toolbar {
    padding: 8px 12px;
  }

  .toolbar-left,
  .toolbar-right {
    gap: 8px;
  }

  .toolbar-text {
    font-size: 12px;
  }

  .comment-input-container {
    margin-left: 2px;
  }

  .comment-input {
    min-width: 120px;
    font-size: 11px;
    padding: 4px 8px;
  }

  .send-btn {
    padding: 4px 12px;
    font-size: 11px;
  }
}


</style>
