<template>
  <section class="document-paper-shell" :class="toneClass">
    <div class="document-paper-stack document-paper-stack-back" aria-hidden="true"></div>
    <div class="document-paper-stack document-paper-stack-mid" aria-hidden="true"></div>

    <article class="document-paper-sheet">
      <div class="document-paper-clip" aria-hidden="true">
        <span class="document-paper-clip-bar"></span>
        <span class="document-paper-clip-jaw"></span>
      </div>

      <div class="document-paper-binder" aria-hidden="true">
        <span
          v-for="hole in binderHoles"
          :key="hole"
          class="document-paper-binder-hole"
        ></span>
      </div>

      <div class="document-retained-mark" aria-label="ERP留存联">ERP留存联</div>

      <header class="document-paper-header">
        <p class="document-company-name">{{ companyName }}</p>
        <h1 class="document-paper-title">{{ title }}</h1>
        <div class="document-number-stamp" :aria-label="documentNo ? `单据编号 ${documentNo}` : '单据编号未填写'">
          <span class="document-number-label">NO.</span>
          <strong>{{ documentNo || "待生成" }}</strong>
        </div>
      </header>

      <div class="document-paper-body">
        <slot />
      </div>

      <footer class="document-signature-footer" aria-label="签核栏">
        <div
          v-for="label in signatureLabels"
          :key="label"
          class="document-signature-cell"
        >
          <span class="document-signature-label">{{ label }}</span>
          <span class="document-signature-line"></span>
        </div>
      </footer>

      <div class="document-paper-action-host" data-warehouse-document-action-host></div>
    </article>
  </section>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  documentNo: {
    type: String,
    default: ""
  },
  companyName: {
    type: String,
    default: "嘉恒仓库 ERP"
  },
  tone: {
    type: String,
    default: "red"
  },
  signatureLabels: {
    type: Array,
    default: () => ["制单", "审核", "仓库", "财务"]
  }
});

const binderHoles = [1, 2, 3, 4, 5];

const toneClass = computed(() => ({
  "document-paper-tone-red": props.tone !== "green",
  "document-paper-tone-green": props.tone === "green"
}));
</script>
