<template>
  <el-drawer v-model="visible" title="学生详细档案" size="40%">
    <div v-if="student" class="student-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.name }}
            <vab-icon 
              :icon="student.gender === '男' ? 'men-line' : 'women-line'" 
              :class="student.gender === '男' ? 'text-blue' : 'text-pink'" 
            />
          </div>
          <div class="tags">
            <el-tag size="small">{{ student.college }}</el-tag>
            <el-tag size="small" type="info">{{ student.major }}</el-tag>
            <el-tag size="small" :type="getStatusType(student.status)">{{ getStatusLabel(student.status) }}</el-tag>
          </div>
        </div>
      </div>

      <el-tabs class="mt-20">
        <el-tab-pane label="基本信息">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="学号">{{ student.id }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">33010620000101****</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ student.phone }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ student.id }}@intl.zju.edu.cn</el-descriptions-item>
            <el-descriptions-item label="家庭住址">浙江省杭州市西湖区...</el-descriptions-item>
            <el-descriptions-item label="紧急联系人">张父 (13900000000)</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="住宿记录">
           <el-timeline class="mt-10">
            <el-timeline-item timestamp="2026-01-23" placement="top" type="success">
              <div class="card">
                <h4>办理入住</h4>
                <p>入住房间：一号书院 302-1</p>
                <p>操作人：系统管理员</p>
              </div>
            </el-timeline-item>
            <el-timeline-item timestamp="2025-09-01" placement="top" type="primary">
              <div class="card">
                <h4>新生报到</h4>
                <p>完成线上预报到流程</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-tab-pane>
        <el-tab-pane label="违纪/奖惩">
          <el-empty description="暂无记录" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-drawer>
</template>

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

const visible = ref(false)
const student = ref(null)

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

const getStatusLabel = (status) => {
  const map = { active: '在住', left: '已退宿', temp: '临时' }
  return map[status]
}
const getStatusType = (status) => {
  const map = { active: 'success', left: 'info', temp: 'warning' }
  return map[status]
}

defineExpose({
  open
})
</script>

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

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

    .header-info {
      margin-left: 20px;
      .name {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .tags {
        display: flex;
        gap: 5px;
      }
    }
  }

  .card {
    h4 { margin: 0 0 5px 0; font-size: 14px; }
    p { margin: 0; color: #666; font-size: 13px; }
  }
}
.text-blue { color: #409eff; }
.text-pink { color: #f56c6c; }
.mt-20 { margin-top: 20px; }
.mt-10 { margin-top: 10px; }
</style>
