<template>
  <div class="app-container student-detail-page">
    <!-- 顶部用户信息卡片 -->
    <div class="user-profile-card bg-white p-6 rounded mb-4">
      <div class="flex items-center mb-4">
        <el-button link @click="handleBack">
          <el-icon><i-ep-arrow-left /></el-icon>
          返回
        </el-button>
      </div>
      <div class="flex gap-8">
        <div class="avatar-section flex flex-col items-center">
          <el-avatar :size="100" src="https://img.js.design/assets/img/652f7596850c9502759a296e.png" />
          <el-tag type="success" size="small" class="mt-2">一周内到岗</el-tag>
        </div>
        <div class="info-section flex-1 grid grid-cols-3 gap-y-4 gap-x-12">
          <div class="info-group col-span-1">
            <div class="name-gender flex items-center gap-2 mb-2">
              <span class="text-2xl font-bold">张三</span>
              <span class="text-blue-500">♂</span>
              <span class="text-pink-500">♀</span>
            </div>
            <div class="detail-item">
              <span class="label text-gray-400">身份证号</span>
              <div class="value">110101213432431234</div>
            </div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">联系电话</span>
            <div class="value">138567875678</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">电子邮箱</span>
            <div class="value">wangxm@example.com</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">求职意向</span>
            <div class="value">审计A、审计B</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">求职类型</span>
            <div class="value">实习、兼职</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">毕业院校</span>
            <div class="value">复旦大学·一年级·本科</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">实习时长</span>
            <div class="value">6个月</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">注册日期</span>
            <div class="value">2023-05-12 09:34:21</div>
          </div>
          <div class="detail-item">
            <span class="label text-gray-400">最后更新</span>
            <div class="value">2023-08-05 15:22:10</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 Tab 内容 -->
    <div class="detail-tabs-wrapper bg-white rounded p-4">
      <el-tabs v-model="activeTab" class="custom-tabs">
        <el-tab-pane label="在线简历" name="resume">
          <div class="resume-content space-y-8 p-4">
            <!-- 教育经历 -->
            <section>
              <h3 class="section-title mb-4 font-bold text-lg">教育经历</h3>
              <el-table :data="educationData" border stripe>
                <el-table-column prop="school" label="学校" />
                <el-table-column prop="degree" label="学历" />
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="major" label="专业" />
                <el-table-column prop="experience" label="在校经历" />
              </el-table>
            </section>

            <!-- 工作经历 -->
            <section>
              <h3 class="section-title mb-4 font-bold text-lg">工作经历</h3>
              <el-table :data="workData" border stripe>
                <el-table-column prop="company" label="公司" />
                <el-table-column prop="industry" label="行业" />
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="position" label="职位" />
                <el-table-column prop="dept" label="所属部门" />
                <el-table-column prop="content" label="工作内容" />
              </el-table>
            </section>

            <!-- 项目经历 -->
            <section>
              <h3 class="section-title mb-4 font-bold text-lg">项目经历</h3>
              <el-table :data="projectData" border stripe>
                <el-table-column prop="name" label="项目" />
                <el-table-column prop="role" label="担任角色" />
                <el-table-column prop="time" label="时间" />
                <el-table-column prop="desc" label="描述" />
                <el-table-column prop="achievement" label="业绩" />
                <el-table-column prop="link" label="链接">
                  <template #default="scope">
                    <el-link v-if="scope.row.link" type="primary" :href="scope.row.link" target="_blank">{{ scope.row.link }}</el-link>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
              </el-table>
            </section>
          </div>
        </el-tab-pane>
        <el-tab-pane label="测评信息" name="assessment" />
        <el-tab-pane label="培训信息" name="training" />
        <el-tab-pane label="订单信息" name="order" />
        <el-tab-pane label="任职信息" name="job" />
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

onMounted(() => {
  console.log('StudentDetail component mounted');
});

const handleBack = () => {
  window.history.back();
};

const activeTab = ref('resume');

const educationData = ref([
  {
    school: '复旦大学',
    degree: '本科·全日制',
    time: '2022.9——2026.7',
    major: '会计',
    experience: '在校经历XXXXXXXX',
  },
  { school: '', degree: '', time: '', major: '', experience: '' },
  { school: '', degree: '', time: '', major: '', experience: '' },
]);

const workData = ref([
  {
    company: 'XXXX公司',
    industry: '服务业',
    time: '2022.9——2026.7 (实习)',
    position: '会计',
    dept: '市场部',
    content: '工作内容XXXXXXXX',
  },
  { company: '', industry: '', time: '', position: '', dept: '', content: '' },
  { company: '', industry: '', time: '', position: '', dept: '', content: '' },
]);

const projectData = ref([
  {
    name: 'XXXX项目',
    role: '负责人',
    time: '2022.9——2026.7',
    desc: '描述XXXXX',
    achievement: '业绩XXXXX',
    link: 'https://qa-sa.',
  },
  { name: '', role: '', time: '', desc: '', achievement: '', link: '' },
  { name: '', role: '', time: '', desc: '', achievement: '', link: '' },
]);
</script>

<style scoped lang="scss">
.student-detail-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);

  .user-profile-card {
    .label {
      font-size: 13px;
      margin-bottom: 4px;
      display: block;
    }
    .value {
      font-size: 14px;
      color: #333;
    }
  }

  .custom-tabs {
    :deep(.el-tabs__header) {
      margin-bottom: 20px;
    }
  }

  :deep(.el-table) {
    .el-table__header-wrapper th {
      background-color: #f8f9fb;
      color: #333;
      font-weight: 500;
    }
  }
}
</style>
