<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="戒子管理" left-arrow @click-left="$router.back()" class="custom-nav">
      <template #right>
        <van-icon name="search" size="18" @click="handleSearch" />
      </template>
    </van-nav-bar>
    
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 顶部统计 -->
      <div class="stats-section">
        <div class="stat-card">
          <div class="stat-icon">🙏</div>
          <div class="stat-info">
            <div class="stat-number">{{ totalStudents }}</div>
            <div class="stat-label">总戒子数</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">📚</div>
          <div class="stat-info">
            <div class="stat-number">{{ studyingStudents }}</div>
            <div class="stat-label">在学戒子</div>
          </div>
        </div>
        <div class="stat-card">
          <div class="stat-icon">🎓</div>
          <div class="stat-info">
            <div class="stat-number">{{ graduatedStudents }}</div>
            <div class="stat-label">已毕业</div>
          </div>
        </div>
      </div>
      
      <!-- 筛选栏 -->
      <div class="filter-section">
        <van-tabs v-model:active="activeTab" @change="handleTabChange" class="custom-tabs">
          <van-tab title="全部" name="all"></van-tab>
          <van-tab title="沙弥戒" name="novice"></van-tab>
          <van-tab title="比丘戒" name="bhiksu"></van-tab>
          <van-tab title="菩萨戒" name="bodhisattva"></van-tab>
        </van-tabs>
      </div>
      
      <!-- 戒子列表 -->
      <div class="students-list">
        <div
          v-for="student in filteredStudents"
          :key="student.id"
          class="student-card"
          @click="handleStudentClick(student)"
        >
          <div class="student-avatar">
            <img v-if="student.avatar" :src="student.avatar" :alt="student.name" />
            <div v-else class="avatar-placeholder">
              <span>{{ student.name.charAt(0) }}</span>
            </div>
            <div class="precept-badge" :class="getPreceptClass(student.preceptType)">
              {{ getPreceptText(student.preceptType) }}
            </div>
          </div>
          
          <div class="student-info">
            <div class="student-header">
              <h4 class="student-name">{{ student.name }}</h4>
              <div class="student-status" :class="getStatusClass(student.status)">
                {{ getStatusText(student.status) }}
              </div>
            </div>
            
            <div class="student-details">
              <p class="student-temple">{{ student.temple }}</p>
              <p class="student-teacher">戒师：{{ student.teacher }}</p>
              <div class="student-meta">
                <span class="entry-date">{{ student.entryDate }}入学</span>
                <span class="progress">进度：{{ student.progress }}%</span>
              </div>
            </div>
          </div>
          
          <div class="student-actions">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <van-empty v-if="filteredStudents.length === 0" description="暂无戒子信息" />
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Toast } from 'vant'

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

// 统计数据
const totalStudents = ref(68)
const studyingStudents = ref(52)
const graduatedStudents = ref(16)

// 戒子数据
const students = ref([
  {
    id: 1,
    name: '释慧明',
    temple: '大雄宝殿',
    teacher: '释智慧法师',
    preceptType: 'bhiksu',
    status: 'studying',
    entryDate: '2023-03-15',
    progress: 75,
    avatar: null
  },
  {
    id: 2,
    name: '释德行',
    temple: '观音殿',
    teacher: '释慈悲法师',
    preceptType: 'novice',
    status: 'studying',
    entryDate: '2023-06-20',
    progress: 45,
    avatar: null
  },
  {
    id: 3,
    name: '释觉悟',
    temple: '文殊殿',
    teacher: '释般若法师',
    preceptType: 'bodhisattva',
    status: 'graduated',
    entryDate: '2022-09-10',
    progress: 100,
    avatar: null
  },
  {
    id: 4,
    name: '释持戒',
    temple: '地藏殿',
    teacher: '释智慧法师',
    preceptType: 'bhiksu',
    status: 'studying',
    entryDate: '2023-01-05',
    progress: 85,
    avatar: null
  },
  {
    id: 5,
    name: '释精进',
    temple: '药师殿',
    teacher: '释慈悲法师',
    preceptType: 'novice',
    status: 'studying',
    entryDate: '2023-08-12',
    progress: 30,
    avatar: null
  },
  {
    id: 6,
    name: '释忍辱',
    temple: '弥勒殿',
    teacher: '释般若法师',
    preceptType: 'bodhisattva',
    status: 'studying',
    entryDate: '2023-04-18',
    progress: 60,
    avatar: null
  },
  {
    id: 7,
    name: '释禅定',
    temple: '韦陀殿',
    teacher: '释智慧法师',
    preceptType: 'bhiksu',
    status: 'graduated',
    entryDate: '2022-11-30',
    progress: 100,
    avatar: null
  },
  {
    id: 8,
    name: '释智慧',
    temple: '伽蓝殿',
    teacher: '释慈悲法师',
    preceptType: 'novice',
    status: 'studying',
    entryDate: '2023-07-08',
    progress: 40,
    avatar: null
  }
])

// 过滤后的戒子列表
const filteredStudents = computed(() => {
  if (activeTab.value === 'all') {
    return students.value
  }
  return students.value.filter(student => student.preceptType === activeTab.value)
})

// 获取戒律类型样式类
const getPreceptClass = (type) => {
  const classes = {
    novice: 'precept-novice',
    bhiksu: 'precept-bhiksu',
    bodhisattva: 'precept-bodhisattva'
  }
  return classes[type] || 'precept-novice'
}

// 获取戒律类型文本
const getPreceptText = (type) => {
  const texts = {
    novice: '沙弥',
    bhiksu: '比丘',
    bodhisattva: '菩萨'
  }
  return texts[type] || '沙弥'
}

// 获取状态样式类
const getStatusClass = (status) => {
  const classes = {
    studying: 'status-studying',
    graduated: 'status-graduated',
    suspended: 'status-suspended'
  }
  return classes[status] || 'status-studying'
}

// 获取状态文本
const getStatusText = (status) => {
  const texts = {
    studying: '在学',
    graduated: '毕业',
    suspended: '暂停'
  }
  return texts[status] || '在学'
}

// 处理标签切换
const handleTabChange = (name) => {
  activeTab.value = name
}

// 处理戒子点击
const handleStudentClick = (student) => {
  router.push(`/students/${student.id}`)
}

// 处理搜索
const handleSearch = () => {
  Toast('搜索功能开发中...')
}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background: #fafafa;
}

.custom-nav {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  color: white;
}

.custom-nav :deep(.van-nav-bar__title) {
  color: white;
  font-weight: 600;
}

.custom-nav :deep(.van-icon) {
  color: white;
}

.content-container {
  padding-top: 46px;
}

.stats-section {
  display: flex;
  gap: 12px;
  padding: 16px;
}

.stat-card {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  font-size: 24px;
  margin-right: 12px;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #8b5cf6;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.filter-section {
  background: white;
  border-bottom: 1px solid #eee;
}

.custom-tabs :deep(.van-tab) {
  font-weight: 500;
}

.custom-tabs :deep(.van-tab--active) {
  color: #8b5cf6;
}

.custom-tabs :deep(.van-tabs__line) {
  background: #8b5cf6;
}

.students-list {
  padding: 16px;
}

.student-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
}

.student-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.student-card:active {
  transform: translateY(-1px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.student-avatar {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 16px;
  flex-shrink: 0;
}

.student-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
}

.precept-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  border: 2px solid white;
}

.precept-novice {
  background: #10b981;
  color: white;
}

.precept-bhiksu {
  background: #3b82f6;
  color: white;
}

.precept-bodhisattva {
  background: #f59e0b;
  color: white;
}

.student-info {
  flex: 1;
}

.student-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.student-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.student-status {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-studying {
  background: #dbeafe;
  color: #1d4ed8;
  border: 1px solid #93c5fd;
}

.status-graduated {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.status-suspended {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.student-details {
  space-y: 4px;
}

.student-temple {
  font-size: 16px;
  color: #666;
  margin: 0 0 4px 0;
}

.student-teacher {
  font-size: 14px;
  color: #999;
  margin: 0 0 8px 0;
}

.student-meta {
  display: flex;
  gap: 16px;
}

.entry-date,
.progress {
  font-size: 12px;
  color: #999;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.student-actions {
  margin-left: 12px;
  color: #ccc;
}
</style>