<template>
  <KlNavTab active="牛人社区" />
  <div class="app-container">
    <!-- 顶部 Banner -->
    <div class="banner"> </div>

    <!-- 生人推荐部分 -->
    <section class="teacher-recommend text-center">
      <h2>牛人推荐</h2>
      <div class="teacher-cards">
        <TeacherCard v-for="teacher in teachers" :key="teacher.id" :teacher="teacher" />
      </div>
    </section>

    <!-- 生人列表部分 -->
    <section class="teacher-list mt-30px text-center">
      <h2>牛人列表</h2>
      <div class="teacher-detail-cards">
        <TeacherDetailCard v-for="teacher in teacherDetails" :key="teacher.id" :teacher="teacher" />
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import TeacherCard from './components/TeacherCard.vue'
  import TeacherDetailCard from './components/TeacherDetailCard.vue'

  const teachers = ref([
    {
      id: 1,
      name: '王刚',
      title: 'CAD建模技术、非标设备设计',
      tags: ['在线工程', '电子产品'],
    },
    {
      id: 1,
      name: '王刚',
      title: 'CAD建模技术、非标设备设计',
      tags: ['在线工程', '电子产品'],
    },
    {
      id: 1,
      name: '王刚',
      title: 'CAD建模技术、非标设备设计',
      tags: ['在线工程', '电子产品'],
    },
    {
      id: 1,
      name: '王刚',
      title: 'CAD建模技术、非标设备设计',
      tags: ['在线工程', '电子产品'],
    },
    {
      id: 1,
      name: '王刚',
      title: 'CAD建模技术、非标设备设计',
      tags: ['在线工程', '电子产品'],
    },
    // ... 其他教师数据
  ])

  const teacherDetails = ref([
    {
      id: 1,
      name: '王刚',
      university: '重庆工商大学',
      works: 568,
      students: 378,
      tags: ['在线工程', '电子产品', '设计方案'],
      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
    },
    {
      id: 1,
      name: '王刚',
      university: '重庆工商大学',
      works: 568,
      students: 378,
      tags: ['在线工程', '电子产品', '设计方案'],
      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
    },
    {
      id: 1,
      name: '王刚',
      university: '重庆工商大学',
      works: 568,
      students: 378,
      tags: ['在线工程', '电子产品', '设计方案'],
      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
    },
    {
      id: 1,
      name: '王刚',
      university: '重庆工商大学',
      works: 568,
      students: 378,
      tags: ['在线工程', '电子产品', '设计方案'],
      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
    },
    {
      id: 1,
      name: '王刚',
      university: '重庆工商大学',
      works: 568,
      students: 378,
      tags: ['在线工程', '电子产品', '设计方案'],
      description: '国家注册分析师设计，结构设计，电气设计等资深工程设计工作，具有丰富的经验...',
    },
    // ... 其他详细教师数据
  ])
</script>

<style scoped>
  .app-container {
    width: 1440px;
    margin: 0 auto;
    padding: 20px;
  }

  .banner {
    background-color: #4080ff;
    color: white;
    padding: 40px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    background-image: url('@/assets/images/community-banner.png');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 410px;
  }

  .primary-btn {
    background-color: #ffb800;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
  }

  .teacher-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  .teacher-detail-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
  }

  h2 {
    color: #333;
    margin: 40px 0 20px;
    background-image: url('@/assets/images/community-bg.png');
    background-size: 120px 16px;
    background-position: 14px 22px;
    background-repeat: no-repeat;
    height: 50px;
    width: 120px;
    margin: 0 auto;
  }
</style>
