<template>
  <div class="my-courses">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="我的课程" name="enrolled">
        <div v-if="enrolledCourses.length > 0">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="course in enrolledCourses" :key="course.id">
              <el-card class="course-card" shadow="hover" @click="viewCourseDetail(course.id)">
                <div class="course-image">
                  <img :src="course.coverImg" :alt="course.title">
                  <div class="course-progress">
                    <el-progress :percentage="course.progress" :format="percentageFormat" />
                  </div>
                </div>
                <div class="course-info">
                  <h3 class="course-title">{{ course.title }}</h3>
                  <p class="course-teacher">{{ course.teacher }}</p>
                  <div class="course-meta">
                    <span class="last-learn">上次学习: {{ course.lastLearnTime }}</span>
                    <el-button type="primary" size="small" @click.stop="continueLearning(course)">
                      继续学习
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-empty v-else description="暂无已报名课程" />
      </el-tab-pane>
      
      <el-tab-pane label="收藏课程" name="favorite">
        <div v-if="favoriteCourses.length > 0">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="course in favoriteCourses" :key="course.id">
              <el-card class="course-card" shadow="hover" @click="viewCourseDetail(course.id)">
                <div class="course-image">
                  <img :src="course.coverImg" :alt="course.title">
                  <span class="course-level" :class="course.level">
                    {{ getLevelText(course.level) }}
                  </span>
                  <span v-if="course.price === 0" class="course-price free">免费</span>
                  <span v-else class="course-price">¥{{ course.price.toFixed(2) }}</span>
                </div>
                <div class="course-info">
                  <h3 class="course-title">{{ course.title }}</h3>
                  <p class="course-teacher">{{ course.teacher }}</p>
                  <div class="course-meta">
                    <div class="course-rating">
                      <el-rate v-model="course.rating" disabled text-color="#ff9900" />
                    </div>
                    <el-button type="danger" size="small" @click.stop="removeFavorite(course.id)">
                      取消收藏
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-empty v-else description="暂无收藏课程" />
      </el-tab-pane>
      
      <el-tab-pane label="学习记录" name="history">
        <div v-if="learningHistory.length > 0">
          <el-timeline>
            <el-timeline-item
              v-for="record in learningHistory"
              :key="record.id"
              :timestamp="record.time"
              :type="record.type"
            >
              <el-card>
                <h4>{{ record.courseName }}</h4>
                <p>{{ record.description }}</p>
                <div class="history-actions">
                  <el-button type="primary" size="small" @click="viewCourseDetail(record.courseId)">
                    查看课程
                  </el-button>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
        <el-empty v-else description="暂无学习记录" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const activeTab = ref('enrolled')

// 模拟已报名课程数据
const enrolledCourses = ref([
  {
    id: 1,
    title: 'Vue.js 3 完全指南',
    coverImg: 'https://picsum.photos/id/1/300/200',
    teacher: '张教授',
    progress: 45,
    lastLearnTime: '2023-05-20 15:30'
  },
  {
    id: 3,
    title: 'Python 数据分析入门',
    coverImg: 'https://picsum.photos/id/3/300/200',
    teacher: '王教授',
    progress: 80,
    lastLearnTime: '2023-05-19 10:15'
  },
  {
    id: 6,
    title: 'Node.js 服务端开发',
    coverImg: 'https://picsum.photos/id/6/300/200',
    teacher: '孙老师',
    progress: 20,
    lastLearnTime: '2023-05-18 14:45'
  }
])

// 模拟收藏课程数据
const favoriteCourses = ref([
  {
    id: 2,
    title: 'React 实战项目开发',
    coverImg: 'https://picsum.photos/id/2/300/200',
    teacher: '李老师',
    level: 'advanced',
    price: 299,
    rating: 4.7
  },
  {
    id: 5,
    title: 'Flutter 跨平台应用开发',
    coverImg: 'https://picsum.photos/id/5/300/200',
    teacher: '钱教授',
    level: 'advanced',
    price: 349,
    rating: 4.9
  },
  {
    id: 7,
    title: '机器学习基础与实践',
    coverImg: 'https://picsum.photos/id/7/300/200',
    teacher: '周教授',
    level: 'advanced',
    price: 399,
    rating: 4.8
  },
  {
    id: 11,
    title: '数据结构与算法',
    coverImg: 'https://picsum.photos/id/11/300/200',
    teacher: '陈教授',
    level: 'intermediate',
    price: 0,
    rating: 4.9
  }
])

// 模拟学习记录数据
const learningHistory = ref([
  {
    id: 1,
    courseId: 1,
    courseName: 'Vue.js 3 完全指南',
    description: '完成了第5章 "组合式API深入" 的学习',
    time: '2023-05-20 15:30',
    type: 'primary'
  },
  {
    id: 2,
    courseId: 3,
    courseName: 'Python 数据分析入门',
    description: '完成了第8章 "Pandas数据处理" 的学习',
    time: '2023-05-19 10:15',
    type: 'success'
  },
  {
    id: 3,
    courseId: 6,
    courseName: 'Node.js 服务端开发',
    description: '开始学习第3章 "Express框架入门"',
    time: '2023-05-18 14:45',
    type: 'info'
  },
  {
    id: 4,
    courseId: 1,
    courseName: 'Vue.js 3 完全指南',
    description: '完成了第4章 "Vue Router路由管理" 的学习',
    time: '2023-05-17 20:10',
    type: 'primary'
  },
  {
    id: 5,
    courseId: 3,
    courseName: 'Python 数据分析入门',
    description: '完成了第7章 "NumPy数组操作" 的学习',
    time: '2023-05-16 11:30',
    type: 'success'
  }
])

// 获取难度级别文本
const getLevelText = (level) => {
  const levelMap = {
    'beginner': '入门',
    'intermediate': '中级',
    'advanced': '高级'
  }
  return levelMap[level] || level
}

// 格式化进度百分比
const percentageFormat = (percentage) => {
  return percentage + '%'
}

// 查看课程详情
const viewCourseDetail = (id) => {
  router.push(`/course/detail/${id}`)
}

// 继续学习
const continueLearning = (course) => {
  router.push(`/course/detail/${course.id}?autoplay=true`)
}

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

onMounted(() => {
  // 在实际应用中，这里应该从API获取数据
  // fetchEnrolledCourses()
  // fetchFavoriteCourses()
  // fetchLearningHistory()
})
</script>

<style lang="scss" scoped>
.my-courses {
  padding: 20px;
  
  .course-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s;
    
    &:hover {
      transform: translateY(-5px);
    }
    
    .course-image {
      position: relative;
      
      img {
        width: 100%;
        height: 160px;
        object-fit: cover;
        border-radius: 4px 4px 0 0;
      }
      
      .course-progress {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 8px;
        background-color: rgba(0, 0, 0, 0.6);
      }
      
      .course-level {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        color: white;
        
        &.beginner {
          background-color: #67c23a;
        }
        
        &.intermediate {
          background-color: #e6a23c;
        }
        
        &.advanced {
          background-color: #f56c6c;
        }
      }
      
      .course-price {
        position: absolute;
        bottom: 10px;
        right: 10px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 14px;
        font-weight: bold;
        background-color: rgba(0, 0, 0, 0.6);
        color: white;
        
        &.free {
          background-color: #67c23a;
        }
      }
    }
    
    .course-info {
      padding: 15px;
      
      .course-title {
        font-size: 16px;
        margin-bottom: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      
      .course-teacher {
        font-size: 14px;
        color: #666;
        margin-bottom: 10px;
      }
      
      .course-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .last-learn {
          font-size: 13px;
          color: #999;
        }
      }
    }
  }
  
  .history-actions {
    margin-top: 10px;
  }
}
</style> 