<template>
  <main class="public-page">
    <section class="verify-page">
      <h1>证书核验</h1>
      <el-alert :title="message" :type="messageType" :closable="false" />
      <el-descriptions v-if="certificate" :column="1" border class="details">
        <el-descriptions-item label="核验结果">{{ certificate.status === "valid" ? "该证书真实有效" : "该证书已作废" }}</el-descriptions-item>
        <el-descriptions-item label="证书状态">{{ certificate.status }}</el-descriptions-item>
        <el-descriptions-item label="证书编号">{{ certificate.certificate_no }}</el-descriptions-item>
        <el-descriptions-item label="学员姓名">{{ certificate.learner_name }}</el-descriptions-item>
        <el-descriptions-item label="证书名称">{{ certificate.certificate_name }}</el-descriptions-item>
        <el-descriptions-item label="发证单位">{{ certificate.issuer_name }}</el-descriptions-item>
      </el-descriptions>
    </section>
  </main>
</template>

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

import { http, type PublicCertificate } from "../api";

const route = useRoute();
const token = String(route.params.token);
const certificate = ref<PublicCertificate | null>(null);
const message = ref("正在核验证书信息");
const messageType = ref<"success" | "warning" | "error" | "info">("info");

async function loadCertificate() {
  try {
    const { data } = await http.get<PublicCertificate>(`/public/certificates/token/${token}`);
    certificate.value = data;
    message.value = data.status === "valid" ? "该证书真实有效。" : "该证书已作废，请联系发证单位核实。";
    messageType.value = data.status === "valid" ? "success" : "warning";
  } catch (error: any) {
    message.value = error?.response?.data?.detail || "链接无效或已失效";
    messageType.value = "error";
  }
}

onMounted(loadCertificate);
</script>

<style scoped>
.public-page {
  min-height: 100vh;
  background: #f7f8fb;
  padding: 32px;
}

.verify-page {
  max-width: 680px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 28px;
}

h1 {
  margin: 0 0 20px;
  font-size: 24px;
}

.details {
  margin-top: 20px;
}
</style>
