<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar title="戒子详情" left-arrow @click-left="$router.back()" class="custom-nav">
      <template #right>
        <van-icon name="edit" size="18" @click="handleEdit" />
      </template>
    </van-nav-bar>
    
    <!-- 内容区域 -->
    <div class="content-container">
      <!-- 戒子基本信息 -->
      <div class="profile-section">
        <div class="profile-header">
          <div class="avatar-container">
            <img v-if="student.avatar" :src="student.avatar" :alt="student.name" class="avatar" />
            <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="profile-info">
            <h2 class="student-name">{{ student.name }}</h2>
            <p class="student-dharma-name">法名：{{ student.dharmaName }}</p>
            <p class="student-temple">{{ student.temple }}</p>
            <div class="status-badge" :class="getStatusClass(student.status)">
              {{ getStatusText(student.status) }}
            </div>
          </div>
        </div>
        
        <!-- 统计信息 -->
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-value">{{ student.studyDays }}</div>
            <div class="stat-label">学习天数</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ student.progress }}%</div>
            <div class="stat-label">学习进度</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ student.completedCourses }}</div>
            <div class="stat-label">完成课程</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ student.merits }}</div>
            <div class="stat-label">功德积分</div>
          </div>
        </div>
      </div>
      
      <!-- 详细信息 -->
      <div class="details-section">
        <!-- 基本信息 -->
        <van-cell-group title="基本信息" class="info-group">
          <van-cell title="戒师" :value="student.teacher" />
          <van-cell title="入学时间" :value="student.entryDate" />
          <van-cell title="预计毕业" :value="student.expectedGraduation" />
          <van-cell title="籍贯" :value="student.hometown" />
          <van-cell title="年龄" :value="student.age + '岁'" />
        </van-cell-group>
        
        <!-- 学习进度 -->
        <div class="progress-section">
          <h3 class="section-title">学习进度</h3>
          <div class="progress-card">
            <div class="progress-header">
              <span class="progress-text">总体进度</span>
              <span class="progress-percent">{{ student.progress }}%</span>
            </div>
            <van-progress :percentage="student.progress" color="#8b5cf6" />
          </div>
          
          <div class="course-list">
            <div
              v-for="course in student.courses"
              :key="course.id"
              class="course-item"
            >
              <div class="course-info">
                <h4 class="course-name">{{ course.name }}</h4>
                <p class="course-teacher">授课法师：{{ course.teacher }}</p>
              </div>
              <div class="course-progress">
                <div class="course-status" :class="getCourseStatusClass(course.status)">
                  {{ getCourseStatusText(course.status) }}
                </div>
                <div class="course-score" v-if="course.score">
                  {{ course.score }}分
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 戒律修学记录 -->
        <div class="records-section">
          <h3 class="section-title">修学记录</h3>
          <van-timeline>
            <van-timeline-item
              v-for="record in student.studyRecords"
              :key="record.id"
              :time="record.date"
            >
              <div class="record-content">
                <h4 class="record-title">{{ record.title }}</h4>
                <p class="record-description">{{ record.description }}</p>
                <div class="record-tags">
                  <van-tag
                    v-for="tag in record.tags"
                    :key="tag"
                    type="primary"
                    size="small"
                    class="record-tag"
                  >
                    {{ tag }}
                  </van-tag>
                </div>
              </div>
            </van-timeline-item>
          </van-timeline>
        </div>
        
        <!-- 联系方式 -->
        <van-cell-group title="联系方式" class="info-group">
          <van-cell title="手机号码" :value="student.phone" />
          <van-cell title="紧急联系人" :value="student.emergencyContact" />
          <van-cell title="紧急联系电话" :value="student.emergencyPhone" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

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

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

// 戒子详细信息
const student = ref({
  id: 1,
  name: '释慧明',
  dharmaName: '慧明',
  temple: '大雄宝殿',
  teacher: '释智慧法师',
  preceptType: 'bhiksu',
  status: 'studying',
  entryDate: '2023-03-15',
  expectedGraduation: '2024-03-15',
  hometown: '江苏南京',
  age: 28,
  studyDays: 285,
  progress: 75,
  completedCourses: 12,
  merits: 1580,
  phone: '138****8888',
  emergencyContact: '张居士',
  emergencyPhone: '139****9999',
  avatar: null,
  courses: [
    {
      id: 1,
      name: '沙弥律仪',
      teacher: '释智慧法师',
      status: 'completed',
      score: 95
    },
    {
      id: 2,
      name: '比丘戒本',
      teacher: '释慈悲法师',
      status: 'studying',
      score: null
    },
    {
      id: 3,
      name: '戒律学纲要',
      teacher: '释般若法师',
      status: 'completed',
      score: 88
    },
    {
      id: 4,
      name: '四分律删繁补阙行事钞',
      teacher: '释智慧法师',
      status: 'pending',
      score: null
    }
  ],
  studyRecords: [
    {
      id: 1,
      date: '2024-01-15',
      title: '完成沙弥律仪考试',
      description: '以优异成绩通过沙弥律仪课程考试，获得95分',
      tags: ['考试', '沙弥律仪', '优秀']
    },
    {
      id: 2,
      date: '2024-01-10',
      title: '参加戒律研讨会',
      description: '积极参与戒律研讨，发表见解，获得法师好评',
      tags: ['研讨会', '戒律', '积极参与']
    },
    {
      id: 3,
      date: '2024-01-05',
      title: '开始比丘戒本学习',
      description: '正式开始比丘戒本课程的学习，制定详细学习计划',
      tags: ['比丘戒', '学习计划']
    },
    {
      id: 4,
      date: '2023-12-20',
      title: '戒律学纲要结业',
      description: '完成戒律学纲要课程，掌握戒律基本理论',
      tags: ['结业', '戒律学', '理论']
    }
  ]
})

// 获取戒律类型样式类
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 getCourseStatusClass = (status) => {
  const classes = {
    completed: 'course-completed',
    studying: 'course-studying',
    pending: 'course-pending'
  }
  return classes[status] || 'course-pending'
}

// 获取课程状态文本
const getCourseStatusText = (status) => {
  const texts = {
    completed: '已完成',
    studying: '学习中',
    pending: '未开始'
  }
  return texts[status] || '未开始'
}

// 处理编辑
const handleEdit = () => {
  Toast('编辑功能开发中...')
}

// 组件挂载时加载数据
onMounted(() => {
  // 这里可以根据路由参数加载具体的戒子数据
  const studentId = route.params.id
  console.log('Loading student data for ID:', studentId)
})
</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;
}

.profile-section {
  background: white;
  padding: 20px;
  margin-bottom: 12px;
}

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

.avatar-container {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  flex-shrink: 0;
}

.avatar {
  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: 32px;
  font-weight: 600;
}

.precept-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  padding: 4px 8px;
  border-radius: 12px;
  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;
}

.profile-info {
  flex: 1;
}

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

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

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

.status-badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 16px;
  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;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

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

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

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

.details-section {
  padding: 0 16px 20px;
}

.info-group {
  margin-bottom: 16px;
}

.info-group :deep(.van-cell-group__title) {
  color: #333;
  font-weight: 600;
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 20px 0 16px 0;
  padding-left: 4px;
  border-left: 4px solid #8b5cf6;
}

.progress-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.progress-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

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

.progress-text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.progress-percent {
  font-size: 18px;
  font-weight: 700;
  color: #8b5cf6;
}

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

.course-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 12px;
}

.course-info {
  flex: 1;
}

.course-name {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 4px 0;
}

.course-teacher {
  font-size: 14px;
  color: #666;
  margin: 0;
}

.course-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

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

.course-completed {
  background: #dcfce7;
  color: #166534;
}

.course-studying {
  background: #dbeafe;
  color: #1d4ed8;
}

.course-pending {
  background: #f3f4f6;
  color: #6b7280;
}

.course-score {
  font-size: 14px;
  font-weight: 600;
  color: #8b5cf6;
}

.records-section {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.record-content {
  padding-left: 16px;
}

.record-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}

.record-description {
  font-size: 14px;
  color: #666;
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.record-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.record-tag {
  background: #f3e8ff !important;
  color: #8b5cf6 !important;
  border: 1px solid #c4b5fd !important;
}
</style>