<template>
  <div class="pb-safe min-h-screen bg-gray-50">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="课程" left-arrow fixed placeholder class="nav-bar" />

    <!-- 选项卡 -->
    <div class="bg-white shadow-sm">
      <van-tabs
        v-model:active="activeTab"
        :line-width="40"
        :line-height="3"
        color="#4caf50"
        title-active-color="#4caf50"
        title-inactive-color="#666666"
        :swipeable="false"
      >
        <van-tab title="全部" title-class="tab-title"></van-tab>
        <van-tab title="已购买" title-class="tab-title"></van-tab>
        <van-tab title="免费" title-class="tab-title"></van-tab>
      </van-tabs>
    </div>

    <!-- 课程列表 -->
    <div class="p-3 pb-20">
      <div
        v-for="course in courses"
        :key="course.id"
        class="mb-3 cursor-pointer overflow-hidden rounded-xl bg-white shadow-md transition-transform active:scale-95"
        @click="handleCourseClick(course)"
      >
        <!-- 课程封面 -->
        <div class="relative h-44 w-full overflow-hidden">
          <img :src="course.cover" :alt="course.title" class="h-full w-full object-cover" />
          <!-- 免费标签 -->
          <div
            v-if="course.isFree"
            class="absolute left-3 top-3 rounded-full bg-gradient-to-r from-purple-500 to-indigo-500 px-3 py-1 text-xs font-semibold text-white shadow-md"
          >
            免费
          </div>
        </div>

        <!-- 课程信息 -->
        <div class="p-3">
          <!-- 课程标题 -->
          <h3 class="mb-2 line-clamp-2 text-base font-semibold leading-snug text-gray-900">
            {{ course.title }}
          </h3>

          <!-- 统计信息 -->
          <div class="mb-2 flex items-center gap-3">
            <span class="flex items-center gap-1 text-xs text-gray-500">
              <van-icon name="user-o" :size="12" color="#4caf50" />
              {{ course.studentCount }}
            </span>
            <span class="flex items-center gap-1 text-xs text-gray-500">
              <van-icon name="video-o" :size="12" color="#4caf50" />
              {{ course.lessonCount }}课时
            </span>
          </div>

          <!-- 讲师信息 -->
          <div class="flex items-center gap-1.5">
            <img
              :src="course.teacherAvatar"
              :alt="course.teacherName"
              class="h-5 w-5 rounded-full object-cover"
            />
            <span class="text-sm text-gray-600">{{ course.teacherName }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏（装饰用） -->
    <van-tabbar
      v-model="activeTabbar"
      fixed
      :safe-area-inset-bottom="true"
      active-color="#4caf50"
      inactive-color="#999999"
    >
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="apps-o">课程</van-tabbar-item>
      <van-tabbar-item icon="chat-o">活动</van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 当前激活的选项卡
const activeTab = ref(0)

// 底部导航栏激活项
const activeTabbar = ref(1)

// 模拟课程数据
const courses = ref([
  {
    id: 1,
    title: '家庭教育指导师（初级）第12期',
    cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-1.jpg',
    isFree: true,
    studentCount: 1289,
    lessonCount: 24,
    teacherName: '张老师',
    teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-1.jpg',
  },
  {
    id: 2,
    title: '智慧父母成长营第8期',
    cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-2.jpg',
    isFree: false,
    studentCount: 856,
    lessonCount: 16,
    teacherName: '李老师',
    teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-2.jpg',
  },
  {
    id: 3,
    title: '儿童心理学基础课程',
    cover: 'https://cdn.ipadbiz.cn/public/mlaj/course-cover-3.jpg',
    isFree: true,
    studentCount: 2341,
    lessonCount: 32,
    teacherName: '王老师',
    teacherAvatar: 'https://cdn.ipadbiz.cn/public/mlaj/teacher-3.jpg',
  },
])

// 点击课程卡片
const handleCourseClick = course => {
  console.log('点击课程:', course.title)
}
</script>

<style lang="less" scoped>
// 仅用于修改 Vant 组件的深层样式
:deep(.nav-bar) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .van-nav-bar__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
  }

  .van-icon {
    color: #ffffff;
  }
}

:deep(.van-tabs) {
  .van-tabs__nav {
    padding-bottom: 0;
  }

  .van-tab {
    flex: 1;
    padding: 0;

    .tab-title {
      font-size: 15px;
      font-weight: 500;
    }
  }

  .van-tabs__line {
    bottom: 0;
  }
}

:deep(.van-tabbar) {
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
}

// TailwindCSS 不支持的样式（自定义安全区域）
.pb-safe {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

// TailwindCSS 不支持的样式（行数限制）
.line-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
</style>