<template>
  <div class="course-detail">
    <div class="course-header">
      <div class="container">
        <div class="course-info">
          <h1 class="course-title">{{ course.title }}</h1>
          <p class="course-desc">{{ course.description }}</p>
          <div class="course-meta">
            <div class="meta-item">
              <el-icon><User /></el-icon>
              <span>讲师: {{ course.teacher }}</span>
            </div>
            <div class="meta-item">
              <el-icon><Calendar /></el-icon>
              <span>更新时间: {{ course.updateTime }}</span>
            </div>
            <div class="meta-item">
              <el-icon><View /></el-icon>
              <span>{{ course.studentCount }}人学习</span>
            </div>
            <div class="meta-item">
              <el-rate v-model="course.rating" disabled text-color="#ff9900" />
              <span>({{ course.ratingCount }})</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="container">
      <div class="course-content">
        <div class="course-main">
          <el-tabs v-model="activeTab" class="course-tabs">
            <el-tab-pane label="课程章节" name="chapters">
              <div class="course-chapters">
                <el-collapse v-model="activeChapters">
                  <el-collapse-item v-for="chapter in course.chapters" :key="chapter.id" :title="chapter.title" :name="chapter.id">
                    <div class="chapter-sections">
                      <div 
                        v-for="section in chapter.sections" 
                        :key="section.id" 
                        class="section-item"
                        :class="{ 'is-free': section.isFree, 'is-active': currentSection && currentSection.id === section.id }"
                        @click="playSection(chapter, section)"
                      >
                        <div class="section-info">
                          <el-icon v-if="section.type === 'video'"><VideoPlay /></el-icon>
                          <el-icon v-else-if="section.type === 'document'"><Document /></el-icon>
                          <span class="section-title">{{ section.title }}</span>
                          <span v-if="section.isFree" class="free-tag">免费</span>
                        </div>
                        <div class="section-meta">
                          <span>{{ section.duration }}</span>
                          <el-icon v-if="section.isCompleted"><Check /></el-icon>
                        </div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </el-tab-pane>
            
            <el-tab-pane label="课程介绍" name="intro">
              <div class="course-intro" v-html="course.introHtml"></div>
            </el-tab-pane>
            
            <el-tab-pane label="课程评价" name="reviews">
              <div class="course-reviews">
                <div class="review-summary">
                  <div class="rating-overall">
                    <div class="rating-score">{{ course.rating.toFixed(1) }}</div>
                    <div class="rating-stars">
                      <el-rate v-model="course.rating" disabled text-color="#ff9900" />
                      <div class="rating-count">{{ course.ratingCount }}人评价</div>
                    </div>
                  </div>
                  <div class="rating-distribution">
                    <div v-for="(count, index) in course.ratingDistribution" :key="index" class="rating-bar">
                      <span class="rating-level">{{ 5 - index }}星</span>
                      <el-progress 
                        :percentage="Math.round(count / course.ratingCount * 100)" 
                        :stroke-width="12"
                        :show-text="false"
                        :color="'#ffc107'"
                      />
                      <span class="rating-percent">{{ Math.round(count / course.ratingCount * 100) }}%</span>
                    </div>
                  </div>
                </div>
                
                <div class="review-list">
                  <div v-for="review in course.reviews" :key="review.id" class="review-item">
                    <div class="review-header">
                      <div class="reviewer-info">
                        <el-avatar :size="40" :src="review.avatar"></el-avatar>
                        <div class="reviewer-meta">
                          <div class="reviewer-name">{{ review.username }}</div>
                          <div class="review-date">{{ review.date }}</div>
                        </div>
                      </div>
                      <div class="review-rating">
                        <el-rate v-model="review.rating" disabled text-color="#ff9900" />
                      </div>
                    </div>
                    <div class="review-content">{{ review.content }}</div>
                    <div v-if="review.reply" class="review-reply">
                      <div class="reply-header">讲师回复:</div>
                      <div class="reply-content">{{ review.reply }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <div class="course-sidebar">
          <el-card class="sidebar-card">
            <div class="video-preview">
              <img :src="course.coverImg" :alt="course.title">
              <div class="play-button" @click="playPreview">
                <el-icon><VideoPlay /></el-icon>
              </div>
            </div>
            
            <div class="course-price-info">
              <div v-if="course.price > 0" class="price">
                <span class="current-price">¥{{ course.price.toFixed(2) }}</span>
                <span v-if="course.originalPrice" class="original-price">¥{{ course.originalPrice.toFixed(2) }}</span>
              </div>
              <div v-else class="price free">免费</div>
            </div>
            
            <div class="course-actions">
              <el-button v-if="isEnrolled" type="primary" @click="continueLearning">继续学习</el-button>
              <el-button v-else type="primary" @click="enrollCourse">立即报名</el-button>
              <el-button v-if="isFavorite" @click="removeFavorite">取消收藏</el-button>
              <el-button v-else @click="addFavorite">收藏课程</el-button>
            </div>
            
            <div class="course-includes">
              <h3>课程包含</h3>
              <ul>
                <li><el-icon><VideoPlay /></el-icon> {{ course.videoCount }}个视频</li>
                <li><el-icon><Document /></el-icon> {{ course.documentCount }}个文档</li>
                <li><el-icon><Timer /></el-icon> {{ course.totalDuration }}</li>
                <li><el-icon><Trophy /></el-icon> 完成后获得证书</li>
                <li><el-icon><Connection /></el-icon> 永久观看权限</li>
              </ul>
            </div>
          </el-card>
        </div>
      </div>
    </div>
    
    <el-dialog v-model="videoDialogVisible" title="视频播放" width="70%" destroy-on-close>
      <div class="video-player">
        <div class="player-placeholder">
          <img :src="course.coverImg" alt="视频封面">
          <div class="player-overlay">
            <p>{{ currentSection ? currentSection.title : '课程预览' }}</p>
            <el-icon><VideoPlay /></el-icon>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { User, Calendar, View, VideoPlay, Document, Check, Trophy, Timer, Connection } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const courseId = route.params.id
const activeTab = ref('chapters')
const activeChapters = ref([1])
const videoDialogVisible = ref(false)
const currentSection = ref(null)

// 模拟课程数据
const course = ref({
  id: 1,
  title: 'Vue.js 3 完全指南',
  description: '从入门到精通，全面掌握Vue3的新特性和开发技巧',
  coverImg: 'https://picsum.photos/id/1/600/400',
  teacher: '张教授',
  updateTime: '2023-05-15',
  studentCount: 1250,
  rating: 4.8,
  ratingCount: 245,
  ratingDistribution: [180, 50, 10, 3, 2], // 5星到1星的分布
  price: 199,
  originalPrice: 299,
  videoCount: 45,
  documentCount: 12,
  totalDuration: '12小时30分钟',
  introHtml: `
    <h2>课程简介</h2>
    <p>Vue.js 3是一个流行的JavaScript框架，用于构建用户界面。它建立在标准HTML、CSS和JavaScript之上，并提供了一个声明式的、组件化的编程模型，帮助你高效地开发用户界面。</p>
    <h3>你将学到什么</h3>
    <ul>
      <li>Vue 3的核心概念和基础知识</li>
      <li>组合式API的使用方法和最佳实践</li>
      <li>Vue Router和Pinia状态管理</li>
      <li>Vue 3的高级特性和性能优化</li>
      <li>实际项目开发和部署</li>
    </ul>
    <h3>适合人群</h3>
    <p>本课程适合有一定JavaScript基础，想要学习Vue.js 3的开发者。如果你已经熟悉Vue 2，本课程也会帮助你快速过渡到Vue 3。</p>
  `,
  chapters: [
    {
      id: 1,
      title: '第1章：Vue 3基础入门',
      sections: [
        { id: 101, title: '课程介绍', type: 'video', duration: '10:30', isFree: true, isCompleted: true },
        { id: 102, title: 'Vue 3新特性概述', type: 'video', duration: '15:45', isFree: true, isCompleted: true },
        { id: 103, title: '开发环境搭建', type: 'video', duration: '12:20', isFree: false, isCompleted: true },
        { id: 104, title: '第一个Vue 3应用', type: 'video', duration: '18:15', isFree: false, isCompleted: false }
      ]
    },
    {
      id: 2,
      title: '第2章：组合式API详解',
      sections: [
        { id: 201, title: 'setup函数介绍', type: 'video', duration: '14:30', isFree: false, isCompleted: false },
        { id: 202, title: 'ref和reactive', type: 'video', duration: '20:15', isFree: false, isCompleted: false },
        { id: 203, title: '计算属性和侦听器', type: 'video', duration: '16:40', isFree: false, isCompleted: false },
        { id: 204, title: '生命周期钩子', type: 'video', duration: '12:55', isFree: false, isCompleted: false },
        { id: 205, title: '组合式函数', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
      ]
    },
    {
      id: 3,
      title: '第3章：Vue Router路由管理',
      sections: [
        { id: 301, title: 'Vue Router 4基础', type: 'video', duration: '18:20', isFree: false, isCompleted: false },
        { id: 302, title: '动态路由和路由参数', type: 'video', duration: '15:10', isFree: false, isCompleted: false },
        { id: 303, title: '路由导航守卫', type: 'video', duration: '22:35', isFree: false, isCompleted: false },
        { id: 304, title: '路由元信息和过渡效果', type: 'document', duration: '阅读材料', isFree: false, isCompleted: false }
      ]
    }
  ],
  reviews: [
    {
      id: 1,
      username: '李明',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      rating: 5,
      date: '2023-05-10',
      content: '非常棒的课程！讲解清晰，内容全面，对Vue 3的理解有了质的提升。',
      reply: '谢谢支持，希望课程对你有所帮助！'
    },
    {
      id: 2,
      username: '王芳',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      rating: 4,
      date: '2023-05-05',
      content: '内容很充实，但有些地方讲解速度有点快，需要多看几遍才能理解。',
      reply: null
    },
    {
      id: 3,
      username: '张伟',
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      rating: 5,
      date: '2023-04-28',
      content: '老师讲解非常清晰，示例也很实用，强烈推荐给想学Vue 3的同学！',
      reply: '感谢您的评价，我们会继续努力提供更好的课程！'
    }
  ]
})

// 模拟用户状态
const isEnrolled = ref(true)
const isFavorite = ref(false)

// 播放课程章节
const playSection = (chapter, section) => {
  if (!isEnrolled.value && !section.isFree) {
    ElMessage.warning('请先报名课程')
    return
  }
  
  currentSection.value = section
  videoDialogVisible.value = true
}

// 播放预览视频
const playPreview = () => {
  currentSection.value = null
  videoDialogVisible.value = true
}

// 继续学习
const continueLearning = () => {
  // 查找上次学习的位置或第一个未完成的章节
  let targetChapter, targetSection
  
  for (const chapter of course.value.chapters) {
    const uncompletedSection = chapter.sections.find(section => !section.isCompleted)
    if (uncompletedSection) {
      targetChapter = chapter
      targetSection = uncompletedSection
      break
    }
  }
  
  if (targetChapter && targetSection) {
    activeChapters.value = [targetChapter.id]
    playSection(targetChapter, targetSection)
  } else {
    // 如果全部完成，播放第一章第一节
    const firstChapter = course.value.chapters[0]
    const firstSection = firstChapter.sections[0]
    activeChapters.value = [firstChapter.id]
    playSection(firstChapter, firstSection)
  }
}

// 报名课程
const enrollCourse = () => {
  ElMessageBox.confirm('确定要报名该课程吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    // 在实际应用中，这里应该调用API报名课程
    isEnrolled.value = true
    ElMessage.success('报名成功')
  }).catch(() => {
    // 用户取消操作
  })
}

// 收藏课程
const addFavorite = () => {
  // 在实际应用中，这里应该调用API收藏课程
  isFavorite.value = true
  ElMessage.success('已收藏课程')
}

// 取消收藏
const removeFavorite = () => {
  ElMessageBox.confirm('确定要取消收藏该课程吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 在实际应用中，这里应该调用API取消收藏
    isFavorite.value = false
    ElMessage.success('已取消收藏')
  }).catch(() => {
    // 用户取消操作
  })
}

onMounted(() => {
  // 在实际应用中，这里应该从API获取课程详情
  // fetchCourseDetail(courseId)
  
  // 检查URL参数，如果有autoplay=true，则自动开始播放
  if (route.query.autoplay === 'true') {
    continueLearning()
  }
})
</script>

<style lang="scss" scoped>
.course-detail {
  .course-header {
    background-color: #f5f7fa;
    padding: 40px 0;
    
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    .course-info {
      max-width: 800px;
      
      .course-title {
        font-size: 28px;
        margin-bottom: 15px;
        color: #303133;
      }
      
      .course-desc {
        font-size: 16px;
        color: #606266;
        margin-bottom: 20px;
        line-height: 1.6;
      }
      
      .course-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        
        .meta-item {
          display: flex;
          align-items: center;
          color: #909399;
          
          .el-icon {
            margin-right: 5px;
          }
        }
      }
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
  }
  
  .course-content {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 30px;
    
    @media (max-width: 992px) {
      grid-template-columns: 1fr;
    }
    
    .course-main {
      background-color: white;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      
      .course-tabs {
        padding: 20px;
      }
      
      .course-chapters {
        .chapter-sections {
          .section-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 10px;
            border-bottom: 1px solid #ebeef5;
            cursor: pointer;
            
            &:last-child {
              border-bottom: none;
            }
            
            &:hover {
              background-color: #f5f7fa;
            }
            
            &.is-free {
              .section-title {
                color: #67c23a;
              }
            }
            
            &.is-active {
              background-color: #ecf5ff;
            }
            
            .section-info {
              display: flex;
              align-items: center;
              gap: 8px;
              
              .el-icon {
                color: #409eff;
              }
              
              .free-tag {
                background-color: #67c23a;
                color: white;
                padding: 2px 6px;
                border-radius: 4px;
                font-size: 12px;
                margin-left: 8px;
              }
            }
            
            .section-meta {
              display: flex;
              align-items: center;
              gap: 10px;
              color: #909399;
              font-size: 14px;
              
              .el-icon {
                color: #67c23a;
              }
            }
          }
        }
      }
      
      .course-intro {
        padding: 0 10px;
        
        h2 {
          font-size: 20px;
          margin: 20px 0 15px;
          color: #303133;
        }
        
        h3 {
          font-size: 18px;
          margin: 18px 0 12px;
          color: #303133;
        }
        
        p {
          margin-bottom: 15px;
          line-height: 1.6;
          color: #606266;
        }
        
        ul {
          margin-bottom: 15px;
          padding-left: 20px;
          
          li {
            margin-bottom: 8px;
            line-height: 1.6;
            color: #606266;
          }
        }
      }
      
      .course-reviews {
        .review-summary {
          display: flex;
          gap: 30px;
          margin-bottom: 30px;
          padding: 20px;
          background-color: #f5f7fa;
          border-radius: 8px;
          
          @media (max-width: 768px) {
            flex-direction: column;
          }
          
          .rating-overall {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 150px;
            
            .rating-score {
              font-size: 48px;
              font-weight: bold;
              color: #ff9900;
            }
            
            .rating-stars {
              display: flex;
              flex-direction: column;
              align-items: center;
              
              .rating-count {
                margin-top: 5px;
                color: #909399;
              }
            }
          }
          
          .rating-distribution {
            flex-grow: 1;
            
            .rating-bar {
              display: flex;
              align-items: center;
              margin-bottom: 8px;
              
              .rating-level {
                width: 40px;
                text-align: right;
                margin-right: 10px;
                color: #606266;
              }
              
              .el-progress {
                flex-grow: 1;
                margin: 0 10px;
              }
              
              .rating-percent {
                width: 40px;
                color: #909399;
              }
            }
          }
        }
        
        .review-list {
          .review-item {
            border-bottom: 1px solid #ebeef5;
            padding: 20px 0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .review-header {
              display: flex;
              justify-content: space-between;
              margin-bottom: 15px;
              
              .reviewer-info {
                display: flex;
                align-items: center;
                
                .reviewer-meta {
                  margin-left: 10px;
                  
                  .reviewer-name {
                    font-weight: bold;
                    margin-bottom: 5px;
                  }
                  
                  .review-date {
                    font-size: 12px;
                    color: #909399;
                  }
                }
              }
            }
            
            .review-content {
              margin-bottom: 15px;
              line-height: 1.6;
              color: #606266;
            }
            
            .review-reply {
              background-color: #f5f7fa;
              padding: 15px;
              border-radius: 4px;
              
              .reply-header {
                font-weight: bold;
                margin-bottom: 8px;
                color: #409eff;
              }
              
              .reply-content {
                color: #606266;
                line-height: 1.6;
              }
            }
          }
        }
      }
    }
    
    .course-sidebar {
      .sidebar-card {
        position: sticky;
        top: 20px;
        
        .video-preview {
          position: relative;
          cursor: pointer;
          
          img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
          }
          
          .play-button {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 60px;
            height: 60px;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            .el-icon {
              font-size: 30px;
              color: white;
            }
            
            &:hover {
              background-color: rgba(0, 0, 0, 0.8);
            }
          }
        }
        
        .course-price-info {
          margin: 20px 0;
          text-align: center;
          
          .price {
            .current-price {
              font-size: 24px;
              font-weight: bold;
              color: #f56c6c;
            }
            
            .original-price {
              font-size: 16px;
              color: #909399;
              text-decoration: line-through;
              margin-left: 10px;
            }
            
            &.free {
              font-size: 24px;
              font-weight: bold;
              color: #67c23a;
            }
          }
        }
        
        .course-actions {
          display: flex;
          gap: 10px;
          margin-bottom: 20px;
          
          .el-button {
            flex: 1;
          }
        }
        
        .course-includes {
          margin-top: 20px;
          
          h3 {
            font-size: 16px;
            margin-bottom: 15px;
            color: #303133;
          }
          
          ul {
            list-style: none;
            padding: 0;
            
            li {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              color: #606266;
              
              .el-icon {
                margin-right: 8px;
                color: #409eff;
              }
            }
          }
        }
      }
    }
  }
  
  .video-player {
    .player-placeholder {
      position: relative;
      width: 100%;
      height: 400px;
      background-color: #000;
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.5;
      }
      
      .player-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        
        p {
          color: white;
          font-size: 18px;
          margin-bottom: 15px;
        }
        
        .el-icon {
          font-size: 48px;
          color: white;
        }
      }
    }
  }
}
</style> 