<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="法师详情" left-arrow @click-left="$router.back()" class="custom-nav">
      <template #right>
        <van-icon name="share" size="18" />
      </template>
    </van-nav-bar>
    
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 法师基本信息 -->
      <div class="teacher-profile">
        <div class="profile-header">
          <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="profile-info">
            <h2 class="teacher-name">{{ teacher.name }}</h2>
            <div class="teacher-role" :class="getRoleClass(teacher.role)">
              {{ teacher.role }}
            </div>
            <p class="teacher-title">{{ teacher.title }} · {{ teacher.temple }}</p>
          </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="stats-section">
          <div class="stat-item">
            <div class="stat-number">{{ teacher.experience }}</div>
            <div class="stat-label">戒腊年数</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-number">{{ teacher.ordinationYear }}</div>
            <div class="stat-label">受戒年份</div>
          </div>
          <div class="stat-divider"></div>
          <div class="stat-item">
            <div class="stat-number">{{ teacher.disciples || 0 }}</div>
            <div class="stat-label">弟子人数</div>
          </div>
        </div>
      </div>
      
      <!-- 详细信息 -->
      <div class="detail-sections">
        <!-- 个人简介 -->
        <div class="detail-section">
          <h3 class="section-title">
            <van-icon name="user-o" />
            个人简介
          </h3>
          <div class="section-content">
            <p>{{ teacher.biography || '暂无个人简介信息' }}</p>
          </div>
        </div>
        
        <!-- 修学经历 -->
        <div class="detail-section">
          <h3 class="section-title">
            <van-icon name="certificate" />
            修学经历
          </h3>
          <div class="section-content">
            <div class="timeline">
              <div v-for="(experience, index) in teacher.experiences" :key="index" class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <div class="timeline-year">{{ experience.year }}</div>
                  <div class="timeline-event">{{ experience.event }}</div>
                  <div class="timeline-location">{{ experience.location }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 弘法活动 -->
        <div class="detail-section">
          <h3 class="section-title">
            <van-icon name="fire-o" />
            弘法活动
          </h3>
          <div class="section-content">
            <div v-if="teacher.activities && teacher.activities.length > 0" class="activities-list">
              <div v-for="activity in teacher.activities" :key="activity.id" class="activity-item">
                <div class="activity-date">{{ activity.date }}</div>
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-location">{{ activity.location }}</div>
              </div>
            </div>
            <p v-else class="no-data">暂无弘法活动记录</p>
          </div>
        </div>
        
        <!-- 联系方式 -->
        <div class="detail-section">
          <h3 class="section-title">
            <van-icon name="phone-o" />
            联系方式
          </h3>
          <div class="section-content">
            <div class="contact-info">
              <div class="contact-item">
                <span class="contact-label">所在寺院：</span>
                <span class="contact-value">{{ teacher.temple }}</span>
              </div>
              <div class="contact-item" v-if="teacher.phone">
                <span class="contact-label">联系电话：</span>
                <span class="contact-value">{{ teacher.phone }}</span>
              </div>
              <div class="contact-item" v-if="teacher.email">
                <span class="contact-label">电子邮箱：</span>
                <span class="contact-value">{{ teacher.email }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const route = useRoute()
const router = useRouter()

// 法师详细信息
const teacher = ref({
  id: 1,
  name: '慧明法师',
  title: '方丈',
  role: '得戒和尚',
  temple: '大觉寺',
  ordinationYear: 1985,
  experience: 39,
  disciples: 156,
  avatar: null,
  biography: '慧明法师，俗姓李，1960年生于江苏南京。1985年在大觉寺依止上慧下觉老和尚剃度出家，同年在宝华山隆昌寺受具足戒。法师戒行清净，学修并重，深得四众弟子敬仰。现任大觉寺方丈，致力于佛法弘扬和寺院建设。',
  experiences: [
    {
      year: '1985年',
      event: '在大觉寺剃度出家',
      location: '大觉寺'
    },
    {
      year: '1985年',
      event: '在宝华山隆昌寺受具足戒',
      location: '宝华山隆昌寺'
    },
    {
      year: '1990年',
      event: '任大觉寺知客',
      location: '大觉寺'
    },
    {
      year: '1995年',
      event: '任大觉寺监院',
      location: '大觉寺'
    },
    {
      year: '2000年',
      event: '升座为大觉寺方丈',
      location: '大觉寺'
    }
  ],
  activities: [
    {
      id: 1,
      date: '2024-01-15',
      title: '三坛大戒传戒法会',
      location: '大觉寺'
    },
    {
      id: 2,
      date: '2023-12-08',
      title: '佛成道日法会',
      location: '大觉寺'
    },
    {
      id: 3,
      date: '2023-11-20',
      title: '佛学讲座：戒律的现代意义',
      location: '大觉寺讲堂'
    }
  ],
  phone: '025-12345678',
  email: 'huiming@dajuesi.org'
})

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

// 加载法师详情
const loadTeacherDetail = async () => {
  const teacherId = route.params.id
  // 这里应该根据 teacherId 从 API 获取法师详情
  // 现在使用模拟数据
  console.log('Loading teacher detail for ID:', teacherId)
}

onMounted(() => {
  loadTeacherDetail()
})
</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;
}

.teacher-profile {
  background: white;
  margin: 16px;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.teacher-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  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: 32px;
  font-weight: 600;
}

.profile-info {
  flex: 1;
}

.teacher-name {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin: 0 0 8px 0;
}

.teacher-role {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

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

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

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

.stats-section {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-top: 24px;
  border-top: 1px solid #f0f0f0;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #f59e0b;
  margin-bottom: 4px;
}

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

.stat-divider {
  width: 1px;
  height: 40px;
  background: #f0f0f0;
}

.detail-sections {
  padding: 0 16px 16px;
}

.detail-section {
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-title {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
  background: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.section-title .van-icon {
  margin-right: 8px;
  color: #f59e0b;
}

.section-content {
  padding: 20px;
}

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

.timeline {
  position: relative;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #f0f0f0;
}

.timeline-item {
  position: relative;
  padding-left: 32px;
  margin-bottom: 20px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f59e0b;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #f59e0b;
}

.timeline-year {
  font-size: 14px;
  font-weight: 600;
  color: #f59e0b;
  margin-bottom: 4px;
}

.timeline-event {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.timeline-location {
  font-size: 14px;
  color: #999;
}

.activities-list {
  space-y: 12px;
}

.activity-item {
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  margin-bottom: 12px;
}

.activity-date {
  font-size: 12px;
  color: #f59e0b;
  font-weight: 500;
  margin-bottom: 4px;
}

.activity-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.activity-location {
  font-size: 14px;
  color: #666;
}

.contact-info {
  space-y: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.contact-label {
  font-size: 14px;
  color: #666;
  width: 80px;
  flex-shrink: 0;
}

.contact-value {
  font-size: 14px;
  color: #333;
  flex: 1;
}

.no-data {
  text-align: center;
  color: #999;
  font-size: 14px;
  margin: 0;
}
</style>