<template>
  <div class="home">
    <div class="banner" id="banner-section">
      <div class="banner-content">
        <div class="title-wrapper">
          <h1 class="animated-title">
            <span class="line">C/C++</span>
            <span class="line">在线学习考试系统</span>
          </h1>
          <p class="subtitle">
            <span class="typing-text">专业的在线学习平台，助力您的职业发展</span>
            <span class="cursor"></span>
          </p>
        </div>
        <div class="banner-actions">
          <el-button type="primary" size="large" class="action-btn" @click="router.push('/course')">
            <el-icon><Reading /></el-icon>
            浏览课程
          </el-button>
          <el-button size="large" class="action-btn" @click="router.push('/exam')">
            <el-icon><Edit /></el-icon>
            参加考试
          </el-button>
        </div>
      </div>
      <div class="banner-background">
        <div class="particles"></div>
      </div>
    </div>

    <div class="features" id="features-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">平台特色</h2>
          <p class="section-subtitle">全方位满足您的C/C++学习需求</p>
        </div>
        <el-row :gutter="30">
          <el-col :span="8" v-for="(feature, index) in features" :key="index">
            <div class="feature-card" :class="`feature-${index + 1}`">
              <div class="feature-icon">
                <el-icon><component :is="feature.icon" /></el-icon>
              </div>
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
              <div class="feature-bg"></div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="popular-courses" id="courses-section">
      <div class="container">
        <div class="section-header">
          <h2 class="section-title">热门课程</h2>
          <p class="section-subtitle">精选优质C/C++课程，助您快速提升编程能力</p>
        </div>
        <el-row :gutter="24">
          <el-col v-for="course in popularCourses" :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.category">
                  {{ course.categoryName }}
                </div>
              </div>
              <div class="course-content">
                <h3 class="course-title">{{ course.title }}</h3>
                <div class="course-info">
                  <div class="course-stats">
                    <span class="stat-item">
                      <el-icon><User /></el-icon>
                      {{ course.studentCount || 0 }}人学习
                    </span>
                    <span class="stat-item">
                      <el-icon><Star /></el-icon>
                      {{ course.rating || 4.5 }}分
                    </span>
                  </div>
                  <div class="course-price" :class="{ 'free': !course.price }">
                    {{ course.price ? `¥${course.price}` : '免费' }}
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-button
      class="guide-btn"
      type="primary"
      circle
      @click="startGuide"
      id="guide-btn"
    >
      <el-icon><QuestionFilled /></el-icon>
    </el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  QuestionFilled, School, DocumentChecked, DataAnalysis,
  Reading, Edit, User, Star
} from '@element-plus/icons-vue'
import {getCoursesMethod} from "@/api/course.js";

const router = useRouter()

// 特色功能数据
const features = [
  {
    icon: 'School',
    title: '丰富的课程资源',
    description: '涵盖C/C++基础到高级应用的完整课程体系，配备实践案例'
  },
  {
    icon: 'DocumentChecked',
    title: '专业的考试系统',
    description: '支持多种题型，在线编程实践，自动评分，深入的成绩分析'
  },
  {
    icon: 'DataAnalysis',
    title: '个性化学习分析',
    description: '智能跟踪学习进度，生成个性化报告，提供精准的学习建议'
  }
]

// 更新课程数据
/*const popularCourses = ref([
  {
    id: 1,
    title: 'C++面向对象编程精讲',
    category: 'cpp',
    categoryName: 'C++编程',
    coverImg: 'http://localhost:9000/file/c6d07740-7306-4fc1-b1f8-670684a73ed9/img/31c258e7-3fd4-402c-8f2f-c9455c6cfdaf.png',
    studentCount: 1234,
    rating: 4.8,
    price: 0
  },
  {
    id: 2,
    title: '保密法律法规学习',
    category: 'law',
    categoryName: '法律法规',
    coverImg: 'https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg',
  },
  {
    id: 3,
    title: '深度学习在气象云图识别中的应用',
    category: 'test',
    categoryName: '测试',
    coverImg: 'https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg',
  },
  {
    id: 4,
    title: '天气雷达与云图识别基础',
    category: 'test',
    categoryName: '测试',
    coverImg: 'https://p5.img.cctvpic.com/photoworkspace/contentimg/2023/03/30/2023033011303020756.jpg',
  }
])*/

const popularCourses = ref([])



const getCourses = async () => {

  const params = {
    page: 1,      // 当前页码
    size: 4,     // 每页数量
  };

  var axiosResponse = await getCoursesMethod(params);
  console.log(axiosResponse)
  popularCourses.value = axiosResponse.data
}

const viewCourse = (courseId) => {
  router.push(`/course/detail/${courseId}`)
}

// 修改创建引导实例的方式
const startGuide = () => {
  const intro = window.introJs()
  intro.setOptions({
    steps: [
      {
        element: '#banner-section',
        title: '欢迎来到C/C++在线学习平台',
        intro: '这里是您的学习起点，您可以浏览课程或参加考试'
      },
      {
        element: '#features-section',
        title: '平台特色',
        intro: '了解我们平台提供的核心功能和服务'
      },
      {
        element: '#courses-section',
        title: '热门课程',
        intro: '查看最受欢迎的课程，开启您的学习之旅'
      },
      {
        element: '.banner-actions',
        title: '快速入口',
        intro: '点击这里可以直接进入课程中心或考试中心'
      }
    ],
    showProgress: true,
    showBullets: true,
    exitOnOverlayClick: false,
    nextLabel: '下一步',
    prevLabel: '上一步',
    skipLabel: '跳过',
    doneLabel: '完成'
  })
  intro.start()
}

// 是否首次访问
const isFirstVisit = ref(!localStorage.getItem('hasVisited'))

onMounted(() => {
  // 如果是首次访问，自动开始引导
  if (isFirstVisit.value) {
    startGuide()
    localStorage.setItem('hasVisited', 'true')
  }

  getCourses()

})
</script>

<style lang="scss" scoped>
.home {
  .banner {
    position: relative;
    background: linear-gradient(135deg, #1a365d 0%, #2563eb 100%);
    color: white;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: url('/src/assets/images/pattern.svg') center/cover;
      opacity: 0.1;
      animation: float 20s linear infinite;
    }

    .banner-content {
      position: relative;
      max-width: 800px;
      margin: 0 auto;
      padding: 0 20px;
      z-index: 1;

      .title-wrapper {
        margin-bottom: 40px;

        .animated-title {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 48px;
          font-weight: bold;
          margin-bottom: 20px;

          .line {
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s forwards;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

            &:first-child {
              animation-delay: 0.2s;
              background: linear-gradient(to right, #60a5fa, #34d399);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
            }

            &:last-child {
              animation-delay: 0.4s;
            }
          }
        }

        .subtitle {
          position: relative;
          display: inline-block;
          font-size: 20px;
          opacity: 0.9;

          .typing-text {
            display: inline-block;
            opacity: 0;
            animation: fadeIn 0.8s 1s forwards;
          }

          .cursor {
            display: inline-block;
            width: 2px;
            height: 24px;
            background-color: white;
            margin-left: 4px;
            animation: blink 1s infinite;
          }
        }
      }

      .banner-actions {
        display: flex;
        justify-content: center;
        gap: 20px;
        opacity: 0;
        animation: fadeInUp 0.8s 1.2s forwards;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 8px;
          padding: 12px 24px;
          font-size: 16px;
          border-radius: 8px;
          transition: all 0.3s;

          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
          }

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

  .features {
    padding: 100px 0;
    background-color: #f8fafc;
    position: relative;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: linear-gradient(to right, transparent, rgba(37, 99, 235, 0.1), transparent);
    }

    .section-header {
      text-align: center;
      margin-bottom: 60px;

      .section-title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 16px;
        background: linear-gradient(to right, #2563eb, #4f46e5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0;
        animation: fadeInUp 0.8s forwards;
      }

      .section-subtitle {
        font-size: 18px;
        color: #666;
        opacity: 0;
        animation: fadeInUp 0.8s 0.2s forwards;
      }
    }

    .feature-card {
      background: white;
      border-radius: 16px;
      padding: 40px 30px;
      text-align: center;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

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

        .feature-icon {
          transform: scale(1.1);
        }

        .feature-bg {
          opacity: 1;
        }
      }

      .feature-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
        transition: transform 0.3s ease;

        .el-icon {
          font-size: 36px;
          color: white;
        }
      }

      h3 {
        font-size: 20px;
        margin-bottom: 16px;
        position: relative;
        z-index: 1;
      }

      p {
        color: #666;
        line-height: 1.6;
        position: relative;
        z-index: 1;
      }

      .feature-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: linear-gradient(135deg, rgba(96, 165, 250, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
      }
    }
  }

  .popular-courses {
    padding: 100px 0;
    background-color: white;

    .section-header {
      text-align: center;
      margin-bottom: 60px;

      .section-title {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 16px;
        background: linear-gradient(to right, #2563eb, #4f46e5);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        opacity: 0;
        animation: fadeInUp 0.8s forwards;
      }

      .section-subtitle {
        font-size: 18px;
        color: #666;
        opacity: 0;
        animation: fadeInUp 0.8s 0.2s forwards;
      }
    }

    .course-card {
      border-radius: 12px;
      overflow: hidden;
      background: white;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
      cursor: pointer;
      margin-bottom: 30px;

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

        .course-overlay {
          opacity: 1;
        }
      }

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

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

        .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 ease;
        }

        .course-badge {
          position: absolute;
          top: 16px;
          left: 16px;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 12px;
          color: white;
          background: rgba(0, 0, 0, 0.6);

          &.cpp {
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
          }
        }
      }

      .course-content {
        padding: 20px;

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

        .course-info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .course-stats {
            display: flex;
            gap: 16px;

            .stat-item {
              display: flex;
              align-items: center;
              gap: 4px;
              color: #666;
              font-size: 14px;

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

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

            &.free {
              color: #10b981;
            }
          }
        }
      }
    }
  }
}

.guide-btn {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

// 修改引导样式
:global(.introjs-tooltip) {
  background-color: #4080ff;
  color: white;

  .introjs-tooltip-title {
    color: white;
    font-weight: bold;
  }

  .introjs-button {
    background-color: white;
    color: #4080ff;
    border: none;
    text-shadow: none;

    &:hover {
      background-color: #f5f7fa;
    }
  }
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

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

// 添加响应式设计
@media (max-width: 768px) {
  .home .banner {
    padding: 60px 0;

    .banner-content {
      .title-wrapper {
        .animated-title {
          font-size: 36px;
        }

        .subtitle {
          font-size: 18px;
        }
      }

      .banner-actions {
        flex-direction: column;
        padding: 0 20px;

        .action-btn {
          width: 100%;
        }
      }
    }
  }
}
</style>
