<template>
  <form class="document-form-shell" @submit.prevent="emit('submit')">
    <DocumentPaper
      :title="title"
      :document-no="documentNo"
      :company-name="companyName"
      :tone="tone"
      :signature-labels="signatureLabels"
    >
      <div class="document-form-meta" :aria-label="metaAriaLabel">
        <span>{{ metaLabel }}</span>
        <strong>{{ companyName }}</strong>
        <span>{{ dateLabel }}</span>
        <strong>{{ displayBusinessDate }}</strong>
      </div>

      <main class="document-form-body">
        <slot />
      </main>
    </DocumentPaper>
  </form>
</template>

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

import DocumentPaper from "./DocumentPaper.vue";
import { formatChineseDate } from "../../utils/formatters";

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  documentNo: {
    type: String,
    default: ""
  },
  businessDate: {
    type: [String, Date],
    default: ""
  },
  tone: {
    type: String,
    default: "green"
  },
  companyName: {
    type: String,
    default: "宁波百华智能科技有限公司"
  },
  metaLabel: {
    type: String,
    default: "业务联单"
  },
  dateLabel: {
    type: String,
    default: "业务日期"
  },
  signatureLabels: {
    type: Array,
    default: () => ["制单", "经办", "审核", "财务"]
  }
});

const emit = defineEmits(["submit"]);

const displayBusinessDate = computed(() => formatChineseDate(props.businessDate));
const metaAriaLabel = computed(() => `${props.metaLabel}基础信息`);
</script>
