<template>
  <div class="course-center">
    <!-- 顶部横幅 -->
    <div class="course-banner">
      <div class="banner-content">
        <h1>课程中心</h1>
        <p>探索丰富的C/C++课程资源，开启您的编程之旅</p>
        <div class="search-box">
          <el-input
            v-model="searchQuery"
            placeholder="搜索课程..."
            class="search-input"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
      <div class="banner-bg"></div>
    </div>

    <!-- 课程分类和筛选 -->
    <div class="course-filters">
      <div class="container">
        <div class="filter-section">
          <div class="filter-group">
            <h3>课程分类</h3>
            <div class="filter-tags">
              <el-tag
                v-for="category in categories"
                :key="category.value"
                :class="{ active: selectedCategory === category.value }"
                @click="selectedCategory = category.value"
              >
                {{ category.label }}
              </el-tag>
            </div>
          </div>
          <div class="filter-group">
            <h3>难度等级</h3>
            <div class="filter-tags">
              <el-tag
                v-for="level in levels"
                :key="level.value"
                :class="{ active: selectedLevel === level.value }"
                @click="selectedLevel = level.value"
              >
                {{ level.label }}
              </el-tag>
            </div>
          </div>
          <div class="filter-group">
            <h3>课程类型</h3>
            <div class="filter-tags">
              <el-tag
                v-for="type in types"
                :key="type.value"
                :class="{ active: selectedType === type.value }"
                @click="selectedType = type.value"
              >
                {{ type.label }}
              </el-tag>
            </div>
          </div>
        </div>
        <div class="sort-section">
          <el-radio-group v-model="sortBy" size="large">
            <el-radio-button label="newest">最新</el-radio-button>
            <el-radio-button label="popular">最热</el-radio-button>
            <el-radio-button label="rating">好评</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!-- 课程列表 -->
    <div class="course-list">
      <div class="container">
        <el-row :gutter="24">
          <el-col
            v-for="course in filteredCourses"
            :key="course.id"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
          >
            <div class="course-card" @click="viewCourse(course.id)">
              <div class="course-image">
                <img :src="course.coverImg" :alt="course.title">
                <div class="course-overlay">
                  <el-button type="primary" size="small">立即学习</el-button>
                </div>
                <div class="course-badge" :class="course.level">
                  {{ getLevelLabel(course.level) }}
                </div>
                <div class="course-type" v-if="course.type === 'live'">
                  <el-tag type="danger" size="small">直播</el-tag>
                </div>
              </div>
              <div class="course-content">
                <h3 class="course-title" :title="course.title">{{ course.title }}</h3>
                <p class="course-desc">{{ course.description }}</p>
                <div class="course-meta">
                  <div class="meta-left">
                    <span class="teacher">
                      <el-icon><User /></el-icon>
                      {{ course.teacher }}
                    </span>
                    <span class="students">
                      <el-icon><View /></el-icon>
                      {{ course.studentCount }}人学习
                    </span>
                  </div>
                  <div class="course-price" :class="{ 'free': !course.price }">
                    {{ course.price ? `¥${course.price}` : '免费' }}
                  </div>
                </div>
                <div class="course-rating">
                  <el-rate
                    v-model="course.rating"
                    disabled
                    text-color="#ff9900"
                  />
                  <span class="rating-count">({{ course.ratingCount }})</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="total"
            :page-sizes="[12, 24, 36, 48]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Search, User, View } from '@element-plus/icons-vue'

const router = useRouter()
const searchQuery = ref('')
const selectedCategory = ref('all')
const selectedLevel = ref('all')
const selectedType = ref('all')
const sortBy = ref('newest')
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

// 分类数据
const categories = [
  { label: '全部', value: 'all' },
  { label: 'C语言基础', value: 'c-basic' },
  { label: 'C++基础', value: 'cpp-basic' },
  { label: '数据结构', value: 'data-structure' },
  { label: '算法', value: 'algorithm' },
  { label: '项目实战', value: 'project' }
]

const levels = [
  { label: '全部', value: 'all' },
  { label: '入门', value: 'beginner' },
  { label: '初级', value: 'elementary' },
  { label: '中级', value: 'intermediate' },
  { label: '高级', value: 'advanced' }
]

const types = [
  { label: '全部', value: 'all' },
  { label: '录播', value: 'video' },
  { label: '直播', value: 'live' },
  { label: '实战', value: 'practice' }
]

// 获取难度标签
const getLevelLabel = (level) => {
  const levelMap = {
    'beginner': '入门',
    'elementary': '初级',
    'intermediate': '中级',
    'advanced': '高级'
  }
  return levelMap[level] || level
}

// 模拟课程数据
const courses = ref([
  {
    id: 1,
    title: 'C++面向对象编程精讲',
    description: '深入理解C++面向对象编程思想，掌握核心概念和实践技巧',
    coverImg: 'http://localhost:9000/file/c6d07740-7306-4fc1-b1f8-670684a73ed9/img/31c258e7-3fd4-402c-8f2f-c9455c6cfdaf.png',
    teacher: '张教授',
    studentCount: 1234,
    rating: 4.8,
    ratingCount: 328,
    price: 299,
    level: 'intermediate',
    type: 'video',
    category: 'cpp-basic'
  },
  // ... 其他课程数据
])

// 过滤和排序课程
const filteredCourses = computed(() => {
  let result = courses.value

  // 应用过滤
  if (selectedCategory.value !== 'all') {
    result = result.filter(course => course.category === selectedCategory.value)
  }
  if (selectedLevel.value !== 'all') {
    result = result.filter(course => course.level === selectedLevel.value)
  }
  if (selectedType.value !== 'all') {
    result = result.filter(course => course.type === selectedType.value)
  }
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    result = result.filter(course =>
      course.title.toLowerCase().includes(query) ||
      course.description.toLowerCase().includes(query)
    )
  }

  // 应用排序
  result = [...result].sort((a, b) => {
    switch (sortBy.value) {
      case 'popular':
        return b.studentCount - a.studentCount
      case 'rating':
        return b.rating - a.rating
      default:
        return b.id - a.id // 默认按最新排序
    }
  })

  return result
})

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

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}
</script>

<style lang="scss" scoped>
.course-center {
  min-height: 100vh;
  background-color: #f8fafc;

  .course-banner {
    position: relative;
    background: linear-gradient(135deg, #1a365d 0%, #2563eb 100%);
    padding: 60px 0;
    overflow: hidden;

    .banner-content {
      position: relative;
      z-index: 1;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      text-align: center;
      color: white;

      h1 {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 16px;
        letter-spacing: 1px;
        animation: fadeInDown 0.8s;
      }

      p {
        font-size: 18px;
        opacity: 0.9;
        margin-bottom: 30px;
        animation: fadeInUp 0.8s 0.2s both;
      }

      .search-box {
        max-width: 600px;
        margin: 0 auto;
        animation: fadeInUp 0.8s 0.4s both;

        .search-input {
          :deep(.el-input__wrapper) {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            box-shadow: none;

            &:hover, &:focus {
              background: rgba(255, 255, 255, 0.2);
            }
          }

          :deep(.el-input__inner) {
            color: white;
            &::placeholder {
              color: rgba(255, 255, 255, 0.7);
            }
          }

          :deep(.el-input__prefix) {
            color: rgba(255, 255, 255, 0.7);
          }
        }
      }
    }

    .banner-bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: url('/src/assets/images/pattern.svg');
      opacity: 0.1;
      animation: float 20s linear infinite;
    }
  }

  .course-filters {
    background: white;
    padding: 30px 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

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

    .filter-section {
      .filter-group {
        margin-bottom: 20px;

        &:last-child {
          margin-bottom: 0;
        }

        h3 {
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 12px;
          color: #1f2937;
        }

        .filter-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 10px;

          .el-tag {
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              transform: translateY(-1px);
            }

            &.active {
              background: #2563eb;
              color: white;
              border-color: #2563eb;
            }
          }
        }
      }
    }

    .sort-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #e5e7eb;
    }
  }

  .course-list {
    padding: 40px 0;

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

    .course-card {
      background: white;
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.3s;
      margin-bottom: 24px;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);

        .course-image {
          img {
            transform: scale(1.05);
          }

          .course-overlay {
            opacity: 1;
          }
        }
      }

      .course-image {
        position: relative;
        height: 180px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s;
        }

        .course-overlay {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          transition: opacity 0.3s;
        }

        .course-badge {
          position: absolute;
          top: 12px;
          left: 12px;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          color: white;

          &.beginner {
            background: linear-gradient(135deg, #34d399 0%, #059669 100%);
          }
          &.elementary {
            background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
          }
          &.intermediate {
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
          }
          &.advanced {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
          }
        }

        .course-type {
          position: absolute;
          top: 12px;
          right: 12px;
        }
      }

      .course-content {
        padding: 20px;

        .course-title {
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
          line-height: 1.4;
          height: 50px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }

        .course-desc {
          color: #666;
          font-size: 14px;
          line-height: 1.5;
          height: 42px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          margin-bottom: 16px;
        }

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

          .meta-left {
            display: flex;
            gap: 16px;
            color: #666;
            font-size: 14px;

            span {
              display: flex;
              align-items: center;
              gap: 4px;

              .el-icon {
                font-size: 16px;
              }
            }
          }

          .course-price {
            font-size: 18px;
            font-weight: bold;
            color: #ef4444;

            &.free {
              color: #059669;
            }
          }
        }

        .course-rating {
          display: flex;
          align-items: center;
          gap: 8px;

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

    .pagination {
      margin-top: 40px;
      text-align: center;
    }
  }
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  from {
    transform: translateY(0) rotate(0);
  }
  to {
    transform: translateY(-100%) rotate(10deg);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .course-center {
    .course-banner {
      padding: 40px 0;

      .banner-content {
        h1 {
          font-size: 28px;
        }

        p {
          font-size: 16px;
        }
      }
    }

    .course-filters {
      padding: 20px 0;

      .filter-group {
        margin-bottom: 15px;
      }
    }

    .course-list {
      padding: 20px 0;

      .course-card {
        .course-image {
          height: 160px;
        }

        .course-content {
          padding: 15px;

          .course-title {
            font-size: 16px;
            height: 44px;
          }

          .course-meta {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
