<template>
  <div class="personnel-detail">
    <div class="header">
      <el-button @click="goBack"> 返回 </el-button>
      <h2 class="title">报名人员详情</h2>
    </div>
    <el-card v-loading="loading">
      <template v-if="detail">
        <div class="detail-list">
          <div class="detail-item">
            <div class="detail-label">所属活动 : {{ detail.activityName || "-" }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">用户昵称 : {{ detail.nickName || "-" }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">姓名 : {{ detail.signupName || "-" }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">联系方式 : {{ detail.signupPhone || "-" }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">报名时间 : {{ formatTime(detail.signupTime) }}</div>
          </div>
          <div class="detail-item">
            <div class="detail-label">审核状态 : {{ getAuditStatusText(detail.status) }}</div>
          </div>
          <!-- 审核通过：显示审核时间 -->
          <template v-if="detail.status == 2">
            <div class="detail-item">
              <div class="detail-label">审核时间 : {{ formatTime(detail.auditTime) }}</div>
            </div>
          </template>
          <!-- 审核拒绝：显示审核拒绝原因和审核时间 -->
          <template v-if="detail.status == 1">
            <div class="detail-item">
              <div class="detail-label">审核拒绝原因 : {{ detail.rejectReason || "-" }}</div>
            </div>
            <div class="detail-item">
              <div class="detail-label">审核时间 : {{ formatTime(detail.auditTime) }}</div>
            </div>
          </template>
        </div>
      </template>
      <el-empty v-else-if="!loading" description="暂无数据" />
    </el-card>
  </div>
</template>

<script setup lang="ts" name="personnelDetail">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getPersonnelDetail } from "@/api/modules/operationManagement";

const route = useRoute();
const router = useRouter();
const loading = ref(false);
const detail = ref<any>(null);

const id = computed(() => route.query.id as string);

const goBack = () => {
  router.push({ path: "/operationManagement/personnel" });
};

const formatTime = (time: string | null | undefined) => {
  if (!time) return "-";
  try {
    const date = new Date(time);
    const y = date.getFullYear();
    const m = String(date.getMonth() + 1).padStart(2, "0");
    const d = String(date.getDate()).padStart(2, "0");
    const h = String(date.getHours()).padStart(2, "0");
    const min = String(date.getMinutes()).padStart(2, "0");
    const s = String(date.getSeconds()).padStart(2, "0");
    return `${y}/${m}/${d} ${h}:${min}:${s}`;
  } catch {
    return time;
  }
};

// 审核状态相关函数（状态值：0-待审核, 1-拒绝, 2-通过）
const getAuditStatusText = (status: number | string) => {
  if (status == "2") return "通过";
  if (status == "1") return "拒绝";
  return "待审核";
};

const getAuditStatusType = (status: number | string) => {
  if (status == "2") return "success";
  if (status == "1") return "danger";
  return "info";
};

onMounted(async () => {
  if (!id.value) return;
  loading.value = true;
  try {
    const res = await getPersonnelDetail({ id: Number(id.value) });
    detail.value = res?.data ?? res ?? null;
  } catch {
    detail.value = null;
  } finally {
    loading.value = false;
  }
});
</script>

<style scoped lang="scss">
.personnel-detail {
  min-height: 100%;
  padding: 16px;
  background: #ffffff;
}
.header {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.detail-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-label {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}
.detail-value {
  font-size: 14px;
  color: #303133;
  word-break: break-all;
}
</style>
