<template>
  <section>
    <header class="page-head">
      <div>
        <h2>证书模板</h2>
        <p>查看系统可用模板及其动态填写内容。项目默认模板可在项目管理中设置。</p>
      </div>
    </header>

    <div class="template-list">
      <article v-for="item in templates" :key="item.code" class="template-item">
        <img :src="item.preview_url" :alt="item.name" />
        <div class="template-content">
          <div class="template-title">
            <h3>{{ item.name }}</h3>
            <el-tag type="success">启用</el-tag>
          </div>
          <p>{{ item.description }}</p>
          <dl>
            <dt>模板代码</dt>
            <dd>{{ item.code }}</dd>
            <dt>动态内容</dt>
            <dd>
              <el-tag v-for="field in item.dynamic_fields" :key="field" type="info">{{ field }}</el-tag>
            </dd>
          </dl>
        </div>
      </article>
    </div>
  </section>
</template>

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

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

const templates = ref<CertificateTemplate[]>([]);

async function loadTemplates() {
  const { data } = await http.get<CertificateTemplate[]>("/admin/certificate-templates");
  templates.value = data;
}

onMounted(loadTemplates);
</script>

<style scoped>
.template-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.template-item {
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: 8px;
  background: #fff;
}

.template-item img {
  display: block;
  width: 100%;
  aspect-ratio: 1.36;
  object-fit: contain;
  background: #f6f8f9;
  border-bottom: 1px solid var(--app-border);
}

.template-content {
  padding: 18px;
}

.template-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.template-title h3,
.template-content p,
.template-content dl {
  margin: 0;
}

.template-content p {
  min-height: 48px;
  margin-top: 8px;
  color: var(--app-muted);
  line-height: 1.6;
}

.template-content dl {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  margin-top: 16px;
}

.template-content dt {
  color: var(--app-muted);
}

.template-content dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}

@media (max-width: 1000px) {
  .template-list {
    grid-template-columns: 1fr;
  }
}
</style>
