<template>
  <el-drawer v-model="visible" title="重点关注学生档案" size="50%">
    <div v-if="student" class="focus-profile">
      <!-- 头部基本信息 -->
      <div class="profile-header">
        <el-avatar :size="80" shape="square" src="https://picsum.photos/200/200" />
        <div class="header-info">
          <div class="name">
            {{ student.studentName }}
            <el-tag size="small" :type="getLevelType(student.level)" effect="dark" class="ml-10">
              {{ getLevelLabel(student.level) }}关注
            </el-tag>
          </div>
          <div class="meta">
            <span>{{ student.studentId }}</span>
            <span class="divider">|</span>
            <span>{{ student.college }}</span>
          </div>
          <div class="tags mt-10">
            <el-tag 
              v-for="tag in student.tags" 
              :key="tag" 
              class="mr-5" 
              size="small"
              :type="getTagType(tag)"
            >
              {{ getTagLabel(tag) }}
            </el-tag>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 详细信息与记录 -->
      <el-tabs v-model="activeTab">
        <el-tab-pane label="关怀纪实" name="records">
          <div class="filter-bar mb-20">
            <el-radio-group v-model="recordFilter" size="small">
              <el-radio-button label="all">全部</el-radio-button>
              <el-radio-button label="talk">谈话</el-radio-button>
              <el-radio-button label="visit">走访</el-radio-button>
            </el-radio-group>
          </div>
          
          <el-timeline>
            <el-timeline-item timestamp="2026-01-20 14:30" placement="top" type="primary">
              <el-card shadow="hover" class="record-card">
                <div class="record-header">
                  <span class="font-bold">谈心谈话</span>
                  <span class="operator">记录人: 李辅导员</span>
                </div>
                <div class="record-content mt-10">
                  了解学生近期学习状态，学生表示微积分课程跟进困难。建议其参加学院组织的答疑班。
                </div>
                <div class="record-footer mt-10">
                  <el-tag size="small" type="warning">持续关注</el-tag>
                </div>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2025-12-15 10:00" placement="top" type="success">
              <el-card shadow="hover" class="record-card">
                <div class="record-header">
                  <span class="font-bold">助学金发放通知</span>
                  <span class="operator">记录人: 系统</span>
                </div>
                <div class="record-content mt-10">
                  已通知学生领取2025年度秋季学期助学金。
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        
        <el-tab-pane label="关注历程" name="history">
          <el-timeline>
            <el-timeline-item timestamp="2025-09-10" placement="top">
              <div class="history-item">
                <h4>纳入关注名单</h4>
                <p>原因：入学心理普查结果显示轻度焦虑</p>
                <p>等级：一般</p>
              </div>
            </el-timeline-item>
             <el-timeline-item timestamp="2025-11-20" placement="top" color="orange">
              <div class="history-item">
                <h4>等级调整</h4>
                <p>调整为：重要</p>
                <p>原因：期中考试多门不及格，叠加心理压力</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  typeOptions: {
    type: Array,
    default: () => []
  }
})

const visible = ref(false)
const student = ref(null)
const activeTab = ref('records')
const recordFilter = ref('all')

const open = (row) => {
  student.value = row
  visible.value = true
}

// Helpers
const getTagLabel = (tag) => {
  const found = props.typeOptions.find(t => t.value === tag)
  if (found) return found.label
  
  const map = { academic: '学业预警', psychology: '心理关注', poverty: '经济困难', discipline: '违纪常客', health: '特殊疾病' }
  return map[tag] || tag
}
const getTagType = (tag) => {
  const found = props.typeOptions.find(t => t.value === tag)
  if (found) {
     // Basic mapping from text color class to element type
     if (found.color && found.color.includes('danger')) return 'danger'
     if (found.color && found.color.includes('warning')) return 'warning'
     if (found.color && found.color.includes('success')) return 'success'
     if (found.color && found.color.includes('primary')) return ''
     return 'info'
  }

  const map = { academic: 'warning', psychology: 'danger', poverty: 'success', discipline: 'info', health: 'danger' }
  return map[tag] || 'info'
}
const getLevelLabel = (level) => {
  const map = { 1: '一般', 2: '重要', 3: '紧急' }
  return map[level]
}
const getLevelType = (level) => {
  const map = { 1: 'info', 2: 'warning', 3: 'danger' }
  return map[level]
}

defineExpose({
  open
})
</script>

<style lang="scss" scoped>
.focus-profile {
  padding: 0 10px;

  .profile-header {
    display: flex;
    align-items: flex-start;
    
    .header-info {
      margin-left: 20px;
      .name {
        font-size: 20px;
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .meta {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
        .divider { margin: 0 10px; color: #ddd; }
      }
    }
  }

  .record-card {
    .record-header {
      display: flex;
      justify-content: space-between;
      color: #333;
      .operator { font-size: 12px; color: #999; }
    }
    .record-content {
      color: #666;
      line-height: 1.5;
    }
  }

  .history-item {
    h4 { margin: 0 0 5px 0; font-size: 15px; }
    p { margin: 0; color: #888; font-size: 13px; }
  }
}

.ml-10 { margin-left: 10px; }
.mt-10 { margin-top: 10px; }
.mr-5 { margin-right: 5px; }
.mb-20 { margin-bottom: 20px; }
.font-bold { font-weight: bold; }
</style>
