<template>
  <main class="safety-platform-container__main">
    <div class="page-container">
      <!-- 标题 -->
      <el-card shadow="never" class="mb-16">
        <h2>上飞院职工安全生产培训记录卡</h2>
        <div class="meta">
          <span>创建人：{{ employeeDetail.createdUserName }}</span>
          <span>创建时间：{{ employeeDetail.createdAt }}</span>
        </div>
      </el-card>

      <!-- 基本信息 -->
      <el-card shadow="never" class="mb-16">
        <template #header>
          <strong>基本信息</strong>
        </template>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="工号">{{ employeeDetail.staffNo }}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="success">{{ employeeDetail.statusName }}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="姓名">{{ employeeDetail.staffName }}</el-descriptions-item>
          <el-descriptions-item label="出生年月">{{ employeeDetail.staffBirthday }}</el-descriptions-item>
          <el-descriptions-item label="身份证号">
            {{ employeeDetail.staffIdCard }}
          </el-descriptions-item>
          <el-descriptions-item label="所/中心/部门">
            {{ employeeDetail.deptName }}
          </el-descriptions-item>

          <el-descriptions-item label="家庭住址">
            {{ employeeDetail.staffAddress }}
          </el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ employeeDetail.dateOfJoining }}</el-descriptions-item>

          <el-descriptions-item label="文化程度">{{ employeeDetail.highestDegree }}</el-descriptions-item>
          <el-descriptions-item label="从事岗位">{{ employeeDetail.staffJob }}</el-descriptions-item>

          <el-descriptions-item label="本岗位工龄">{{ employeeDetail.jobSeniority }}年</el-descriptions-item>
          <el-descriptions-item label="技术等级">{{ employeeDetail.technicalLvl }}级</el-descriptions-item>

          <el-descriptions-item label="职称">{{ employeeDetail.professionalTitle }}</el-descriptions-item>
          <el-descriptions-item label="照片">
            <img :src="employeeDetail.staffImg" v-if="employeeDetail.staffImg" alt="" />
            <div class="photo-placeholder" v-else></div>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 底部 Tab 区 -->
      <el-card shadow="never">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <el-tab-pane label="填写说明" :name="0" />
          <el-tab-pane label="入院三级安全教育" :name="1" />
          <el-tab-pane label="安全生产继续教育" :name="2" />
          <el-tab-pane label="特种作业培训考核" :name="3" />
          <el-tab-pane label="特种作业复训考核" :name="4" />
          <el-tab-pane label="安全生产培训记录卡管理规定" :name="5" />
        </el-tabs>

        <!-- Tab 内容 -->
        <div class="tab-content">
          <el-card shadow="never">
            <FillDesc v-if="activeTab === 0" />

            <CommonTable :id="employeeDetail.id" :index="activeTab" v-if="activeTab >= 1 && activeTab <= 2" />
            <CommonTable2 :id="employeeDetail.id" :index="activeTab" v-if="activeTab >= 3 && activeTab <= 4" />
            <ManageRule v-if="activeTab === 5" />
          </el-card>
        </div>
      </el-card>

      <div class="footer">
        <el-button @click="back">取消</el-button>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
  import { computed, onMounted, ref, reactive } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import {
    getEducationStaffTrainingCardDetail,
    getEmployeeDetailTableList,
    type EmployeeTableType,
  } from '@/api/employee-training-record-card-management';
  import FillDesc from './fillDesc.vue';
  import CommonTable from './commonTable.vue';
  import CommonTable2 from './commonTable2.vue';
  import ManageRule from './manageRule.vue';

  const activeTab = ref(0);

  const router = useRouter();
  const route = useRoute();

  const operate = computed(() => (route.query.operate as string) || 'inventory-create');
  const currentId = computed(() => Number(route.query.id));

  const handleTabChange = (name) => {
    activeTab.value = Number(name);
  };
  const back = ()=>{
    router.push({name:'employeeTrainingRecordCardManagement'})
  }
  let employeeDetail = reactive({}) as EmployeeTableType;
  const getDetail = async () => {
    if (!currentId.value) return;
    try {
      const res = await getEducationStaffTrainingCardDetail(currentId.value);
      if (res) {
        // 映射接口字段到表单字段
        Object.assign(employeeDetail, res);
      }
    } catch (e) {
      console.error('获取物品库存详情失败:', e);
      ElMessage.error('获取详情失败');
    }
  };

  onMounted(() => {
    getDetail();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;

  .page-container {
    padding: 16px;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .meta {
    margin-top: 16px;
    font-size: 13px;
    color: #666;
    display: flex;
    gap: 24px;
  }

  .photo-placeholder {
    width: 80px;
    height: 80px;
    border: 1px solid #dcdfe6;
    background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fff 10px, #fff 20px);
  }

  .tab-content {
    margin-top: 16px;
  }

  .footer {
    margin-top: 24px;
    display: flex;
    justify-content: flex-end;
  }
</style>
