<template>
  <form class="warehouse-document-form" @submit.prevent="emit('submit')">
    <DocumentPaper
      :title="title"
      :document-no="documentNo"
      :company-name="companyName"
      :tone="tone"
    >
      <div class="warehouse-document-form-meta" aria-label="仓库单据基础信息">
        <span>仓库联单</span>
        <strong>{{ companyName }}</strong>
        <span>业务日期</span>
        <strong>{{ displayBusinessDate }}</strong>
      </div>

      <main class="warehouse-document-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: "嘉恒仓库"
  }
});

const emit = defineEmits(["submit"]);
const displayBusinessDate = computed(() => formatChineseDate(props.businessDate));
</script>
