<template>
  <PageShell>
    <div class="apply-detail-page">
      <div class="apply-detail-card profile-card">
        <div class="profile-left">
          <img class="profile-avatar" :src="profile.avatar || defaultAvatar" alt="avatar" />
          <el-link type="primary" :underline="false">一周内到岗</el-link>
        </div>
        <div class="profile-main">
          <div class="profile-name-row">
            <span class="profile-name">张三</span>
            <span class="profile-gender">♂</span>
            <span class="profile-gender female">♀</span>
          </div>
          <div class="profile-grid">
            <div class="profile-item"><span>身份证号</span><span>110101213432431234</span></div>
            <div class="profile-item"><span>联系电话</span><span>138567875678</span></div>
            <div class="profile-item"><span>电子邮箱</span><span>wangxm@example.com</span></div>
            <div class="profile-item"><span>求职意向</span><span>审计A，审计B</span></div>
            <div class="profile-item"><span>求职类型</span><span>实习，兼职</span></div>
            <div class="profile-item"><span>毕业院校</span><span>复旦大学一年级本科</span></div>
            <div class="profile-item"><span>实习时长</span><span>6个月</span></div>
            <div class="profile-item"><span>注册日期</span><span>2023-05-12 09:34:21</span></div>
            <div class="profile-item"><span>最后更新</span><span>2023-08-05 15:22:10</span></div>
          </div>
        </div>
      </div>

      <div class="apply-detail-card tabs-card">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="在线简历" name="resume" />
          <el-tab-pane label="测评信息" name="evaluation" />
          <el-tab-pane label="培训信息" name="training" />
          <el-tab-pane label="任职信息" name="job" />
        </el-tabs>

        <div v-if="activeTab === 'resume'" class="detail-section-list">
          <div class="detail-section">
            <div class="section-title">教育经历</div>
            <el-table :data="educationList" border>
              <el-table-column label="学校" prop="school" min-width="120" />
              <el-table-column label="学历" prop="degree" min-width="120" />
              <el-table-column label="时间" prop="period" min-width="160" />
              <el-table-column label="专业" prop="major" min-width="120" />
              <el-table-column label="在校经历" prop="experience" min-width="180" />
            </el-table>
          </div>

          <div class="detail-section">
            <div class="section-title">工作经历</div>
            <el-table :data="workList" border>
              <el-table-column label="公司" prop="company" min-width="140" />
              <el-table-column label="行业" prop="industry" min-width="120" />
              <el-table-column label="时间" prop="period" min-width="160" />
              <el-table-column label="职位" prop="position" min-width="120" />
              <el-table-column label="所属部门" prop="department" min-width="140" />
              <el-table-column label="工作内容" prop="content" min-width="160" />
            </el-table>
          </div>

          <div class="detail-section">
            <div class="section-title">项目经历</div>
            <el-table :data="projectList" border>
              <el-table-column label="项目" prop="project" min-width="140" />
              <el-table-column label="担任角色" prop="role" min-width="120" />
              <el-table-column label="时间" prop="period" min-width="160" />
              <el-table-column label="描述" prop="description" min-width="160" />
              <el-table-column label="业绩" prop="achievement" min-width="160" />
              <el-table-column label="链接" prop="link" min-width="120" />
            </el-table>
          </div>
        </div>

        <div v-else-if="activeTab === 'evaluation'" class="detail-section-list">
          <div class="detail-section">
            <div class="section-title">测评信息</div>
            <el-table :data="evaluationList" border>
              <el-table-column label="名称" prop="name" min-width="140" />
              <el-table-column label="岗位" prop="post" min-width="140" />
              <el-table-column label="结果" prop="result" min-width="160" />
              <el-table-column label="测评时间" prop="evaluateTime" min-width="180" />
              <el-table-column label="操作" min-width="180">
                <template #default="scope">
                  <el-button link type="primary" @click="handleOpenEvaluation(scope.row)">查看</el-button>
                  <template v-if="scope.row.result === '未通过'">
                    <el-button link type="primary">录用</el-button>
                    <el-button link type="primary">不录用</el-button>
                  </template>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div v-else-if="activeTab === 'training'" class="detail-section-list">
          <div class="detail-section">
            <div class="section-title">培训信息</div>
            <el-table :data="trainingList" border>
              <el-table-column label="名称" prop="name" min-width="180" />
              <el-table-column label="培训方式" prop="type" min-width="140" />
              <el-table-column label="培训时间" prop="time" min-width="180" />
            </el-table>
          </div>
        </div>

        <div v-else-if="activeTab === 'job'" class="detail-section-list">
          <div class="detail-section">
            <div class="section-title">任职信息</div>
            <el-table :data="jobList" border>
              <el-table-column label="公司" prop="company" min-width="140" />
              <el-table-column label="岗位" prop="post" min-width="120" />
              <el-table-column label="岗位类型" prop="postType" min-width="140" />
              <el-table-column label="任职状态" prop="status" min-width="140" />
              <el-table-column label="入职时间" prop="entryTime" min-width="160" />
              <el-table-column label="离职时间" prop="leaveTime" min-width="160" />
              <el-table-column label="离职原因" prop="leaveReason" min-width="140" />
              <el-table-column label="操作" min-width="140">
                <template #default>
                  <el-button link type="primary" @click="handleOpenCompanyRate">查看该公司评价</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <el-dialog v-model="companyRateDialog.visible" title="评价" width="460px" append-to-body>
          <div class="company-rate-content">
            <div class="company-rate-item">
              <div class="company-rate-head">
                <span class="company-rate-label">综合评价</span>
                <el-rate v-model="companyRateDialog.form.totalRate" disabled show-score text-color="#303133" score-template="{value}星" />
              </div>
              <el-input v-model="companyRateDialog.form.totalRemark" type="textarea" :rows="3" readonly />
            </div>
            <div class="company-rate-item">
              <div class="company-rate-head">
                <span class="company-rate-label">能力A</span>
                <el-rate v-model="companyRateDialog.form.abilityARate" disabled show-score text-color="#303133" score-template="{value}星" />
              </div>
              <el-input v-model="companyRateDialog.form.abilityARemark" type="textarea" :rows="3" readonly />
            </div>
            <div class="company-rate-item">
              <div class="company-rate-head">
                <span class="company-rate-label">能力B</span>
                <el-rate v-model="companyRateDialog.form.abilityBRate" disabled show-score text-color="#303133" score-template="{value}星" />
              </div>
              <el-input v-model="companyRateDialog.form.abilityBRemark" type="textarea" :rows="3" readonly />
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </PageShell>
</template>

<script setup name="PostManageApplyDetail" lang="ts">
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import PageShell from '@/components/PageShell/index.vue';
import defaultAvatar from '@/assets/images/user.jpg';

const router = useRouter();
const activeTab = ref('resume');

const profile = {
  avatar: ''
};

const educationList = [
  { school: '复旦大学', degree: '本科-全日制', period: '2022.9——2026.7', major: '会计', experience: '在校经历XXXXXXX' }
];

const workList = [
  { company: 'XXXX公司', industry: '服务业', period: '2022.9——2026.7（实习）', position: '会计', department: '市场部', content: '工作内容XXXXXXXX' }
];

const projectList = [
  { project: 'XXXX项目', role: '负责人', period: '2022.9——2026.7', description: '描述XXXX', achievement: '业绩XXXXXX', link: 'https://qq.cn' }
];

const evaluationList = [
  { name: '审计A1测试', post: '审计A1', result: '通过', evaluateTime: '2025.12.12 12：12' },
  { name: '', post: '', result: '未通过', evaluateTime: '' }
];

const trainingList = [{ name: '审计A1培训', type: '线下', time: '2025.12.12 12：12' }];

const jobList = [
  { company: 'XXXXX公司', post: '审计A', postType: '全职、实习、兼职', status: '在职', entryTime: '2025.12.12', leaveTime: '', leaveReason: '' },
  { company: 'XXXXX公司', post: '审计A', postType: '全职', status: '离职', entryTime: '2024.12.12', leaveTime: '2025.12.01', leaveReason: '个人发展' }
];

const companyRateDialog = reactive({
  visible: false,
  form: {
    totalRate: 3.5,
    totalRemark: '在职期间表现佳',
    abilityARate: 3,
    abilityARemark: '在职期间表现佳',
    abilityBRate: 3,
    abilityBRemark: '在职期间表现佳'
  }
});

const handleOpenEvaluation = (row: { name: string }) => {
  router.push({
    path: '/postManage/evaluation-view',
    query: {
      name: row.name
    }
  });
};

const handleOpenCompanyRate = () => {
  companyRateDialog.visible = true;
};
</script>

<style scoped>
.apply-detail-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.apply-detail-card {
  padding: 16px 20px;
  background: #fff;
  border-radius: 6px;
}

.profile-card {
  display: flex;
  gap: 16px;
}

.profile-left {
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
}

.profile-main {
  flex: 1;
}

.profile-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}

.profile-name {
  font-size: 28px;
  font-weight: 600;
  color: #303133;
}

.profile-gender {
  color: #409eff;
}

.profile-gender.female {
  color: #f56c6c;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
}

.profile-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #606266;
  font-size: 13px;
}

.profile-item span:last-child {
  color: #303133;
}

.tabs-card :deep(.el-tabs__header) {
  margin-bottom: 16px;
}

.detail-section-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.section-title {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.company-rate-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.company-rate-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.company-rate-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.company-rate-label {
  width: 56px;
  color: #303133;
  flex-shrink: 0;
}
</style>
