<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" />
      </template>
    </van-nav-bar>
    
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 顶部说明 -->
      <div class="intro-section">
        <div class="intro-card">
          <div class="intro-icon">📜</div>
          <div class="intro-content">
            <h3>三师七证</h3>
            <p>三师：得戒和尚、羯磨阿阇梨、教授阿阇梨<br>七证：七位证明师</p>
          </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="teachers"></van-tab>
          <van-tab title="七证" name="witnesses"></van-tab>
        </van-tabs>
      </div>
      
      <!-- 法师列表 -->
      <div class="teachers-list">
        <div
          v-for="teacher in filteredTeachers"
          :key="teacher.id"
          class="teacher-card"
          @click="handleTeacherClick(teacher)"
        >
          <div class="teacher-avatar">
            <img v-if="teacher.avatar" :src="teacher.avatar" :alt="teacher.name" />
            <div v-else class="avatar-placeholder">
              <span>{{ teacher.name.charAt(0) }}</span>
            </div>
          </div>
          
          <div class="teacher-info">
            <div class="teacher-header">
              <h4 class="teacher-name">{{ teacher.name }}</h4>
              <div class="teacher-role" :class="getRoleClass(teacher.role)">
                {{ teacher.role }}
              </div>
            </div>
            
            <div class="teacher-details">
              <p class="teacher-title">{{ teacher.title }}</p>
              <p class="teacher-temple">{{ teacher.temple }}</p>
              <div class="teacher-meta">
                <span class="ordination-year">{{ teacher.ordinationYear }}年受戒</span>
                <span class="experience">{{ teacher.experience }}年戒腊</span>
              </div>
            </div>
          </div>
          
          <div class="teacher-actions">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      
      <!-- 空状态 -->
      <van-empty v-if="filteredTeachers.length === 0" description="暂无相关法师信息" />
    </div>
  </div>
</template>

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

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

// 法师数据
const teachers = ref([
  {
    id: 1,
    name: '慧明法师',
    title: '方丈',
    role: '得戒和尚',
    temple: '大觉寺',
    ordinationYear: 1985,
    experience: 39,
    avatar: null,
    type: 'teacher'
  },
  {
    id: 2,
    name: '智慧法师',
    title: '首座',
    role: '羯磨阿阇梨',
    temple: '大觉寺',
    ordinationYear: 1990,
    experience: 34,
    avatar: null,
    type: 'teacher'
  },
  {
    id: 3,
    name: '觉悟法师',
    title: '监院',
    role: '教授阿阇梨',
    temple: '大觉寺',
    ordinationYear: 1992,
    experience: 32,
    avatar: null,
    type: 'teacher'
  },
  {
    id: 4,
    name: '慈悲法师',
    title: '知客',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 1995,
    experience: 29,
    avatar: null,
    type: 'witness'
  },
  {
    id: 5,
    name: '般若法师',
    title: '维那',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 1998,
    experience: 26,
    avatar: null,
    type: 'witness'
  },
  {
    id: 6,
    name: '禅定法师',
    title: '典座',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 2000,
    experience: 24,
    avatar: null,
    type: 'witness'
  },
  {
    id: 7,
    name: '精进法师',
    title: '书记',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 2002,
    experience: 22,
    avatar: null,
    type: 'witness'
  },
  {
    id: 8,
    name: '持戒法师',
    title: '库头',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 2005,
    experience: 19,
    avatar: null,
    type: 'witness'
  },
  {
    id: 9,
    name: '忍辱法师',
    title: '僧值',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 2008,
    experience: 16,
    avatar: null,
    type: 'witness'
  },
  {
    id: 10,
    name: '布施法师',
    title: '衣钵',
    role: '证明师',
    temple: '大觉寺',
    ordinationYear: 2010,
    experience: 14,
    avatar: null,
    type: 'witness'
  }
])

// 过滤后的法师列表
const filteredTeachers = computed(() => {
  if (activeTab.value === 'all') {
    return teachers.value
  } else if (activeTab.value === 'teachers') {
    return teachers.value.filter(teacher => teacher.type === 'teacher')
  } else if (activeTab.value === 'witnesses') {
    return teachers.value.filter(teacher => teacher.type === 'witness')
  }
  return teachers.value
})

// 获取角色样式类
const getRoleClass = (role) => {
  if (role.includes('和尚') || role.includes('阿阇梨')) {
    return 'role-teacher'
  }
  return 'role-witness'
}

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

// 处理法师点击
const handleTeacherClick = (teacher) => {
  router.push(`/teachers/${teacher.id}`)
}
</script>

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

.custom-nav {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  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;
}

.intro-section {
  padding: 16px;
}

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

.intro-icon {
  font-size: 32px;
  margin-right: 16px;
}

.intro-content h3 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.intro-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
  line-height: 1.5;
}

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

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

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

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

.teachers-list {
  padding: 16px;
}

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

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

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

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

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

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

.teacher-info {
  flex: 1;
}

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

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

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

.role-teacher {
  background: linear-gradient(135deg, #fbbf24, #f97316);
  color: white;
}

.role-witness {
  background: #f0f9ff;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

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

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

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

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

.ordination-year,
.experience {
  font-size: 12px;
  color: #999;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

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