<template>
  <div class="app-container">
    <el-card shadow="never" class="student-detail-card">
      <!-- 个人基础信息卡片 -->
      <div class="profile-header">
        <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" class="avatar" />
        <div class="profile-info">
          <div class="name-row">
            <span class="name">张三</span>
            <el-icon class="gender-icon male"><Male /></el-icon>
            <el-icon class="gender-icon female"><Female /></el-icon>
          </div>
          <el-row :gutter="40" class="info-grid">
            <el-col :span="8">
              <div class="item"><span class="label">手机号：</span>18888888888</div>
              <div class="item"><span class="label">最高学历：</span>本科</div>
              <div class="item"><span class="label">出生年份：</span>1998</div>
            </el-col>
            <el-col :span="8">
              <div class="item"><span class="label">现居地：</span>北京市</div>
              <div class="item"><span class="label">求职意向：</span>审计</div>
              <div class="item"><span class="label">投递时间：</span>2024-06-13 09:49:47</div>
            </el-col>
            <el-col :span="8">
              <div class="item"><span class="label">电子邮箱：</span>zhangsan@example.com</div>
              <div class="item"><span class="label">毕业时间：</span>2022-06-30</div>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-divider />

      <!-- 教育经历 -->
      <div class="detail-section">
        <h3 class="section-title">教育经历</h3>
        <el-table :data="educationData" border class="flat-table">
          <el-table-column label="学校" prop="school" />
          <el-table-column label="学历" prop="degree" width="180" />
          <el-table-column label="时间" prop="time" width="220" />
          <el-table-column label="专业" prop="major" width="200" />
          <el-table-column label="在读情况" prop="isReading" width="180" />
        </el-table>
      </div>

      <!-- 工作经历 -->
      <div class="detail-section mt40">
        <h3 class="section-title">工作经历</h3>
        <el-table :data="workHistoryData" border class="flat-table">
          <el-table-column label="公司" prop="company" />
          <el-table-column label="岗位" prop="post" width="200" />
          <el-table-column label="时间" prop="time" width="220" />
          <el-table-column label="薪资" prop="salary" width="150" />
          <el-table-column label="所属部门" prop="department" width="200" />
          <el-table-column label="工作简述" prop="brief" />
        </el-table>
      </div>

      <!-- 项目经历 -->
      <div class="detail-section mt40">
        <h3 class="section-title">项目经历</h3>
        <el-table :data="projectData" border class="flat-table">
          <el-table-column label="项目" prop="project" />
          <el-table-column label="担任角色" prop="role" width="200" />
          <el-table-column label="时间" prop="time" width="220" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="业绩" prop="performance" />
          <el-table-column label="链接" prop="url" width="150">
            <template #default="scope">
              <el-link type="primary" :underline="false">{{ scope.row.url }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="footer-ops">
        <el-button @click="router.back()">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="StudentDetail">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Male, Female } from '@element-plus/icons-vue';

const router = useRouter();

const educationData = ref([
  { school: '某某大学', degree: '本科-全日制', time: '2018.9 -- 2022.7', major: '审计', isReading: '否（2022届毕业）' }
]);

const workHistoryData = ref([
  { company: '某某公司', post: '审计岗', time: '2022.8 -- 至今', salary: '8k', department: '财务部', brief: '日常工作简述内容展示区域' }
]);

const projectData = ref([
  { project: '测试项目', role: '负责人', time: '2023.1 -- 2023.7', description: '项目内容XXXXX', performance: '业绩展示区域', url: 'http://xxxxx' }
]);
</script>

<style scoped lang="scss">
.app-container {
  background-color: #f7f8fa;
  min-height: calc(100vh - 84px);
  padding: 20px;
}
.student-detail-card {
  border-radius: 8px;
  max-width: 1200px;
  margin: 0 auto;
}
.profile-header {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  padding: 20px 0;
  .avatar { flex-shrink: 0; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
  .profile-info {
    flex: 1;
    .name-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      .name { font-size: 24px; font-weight: bold; color: #333; }
      .male { color: #409eff; }
      .female { color: #f56c6c; }
    }
    .info-grid {
      .item { font-size: 13px; margin-bottom: 12px; color: #333; .label { color: #666; } }
    }
  }
}

.section-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 4px solid #409eff;
}

.flat-table {
  :deep(thead th) {
    background-color: #f8f9fb;
    color: #666;
    font-weight: 700;
  }
}

.mt40 { margin-top: 40px; }

.footer-ops {
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
</style>
