<template>
  <layout-card>
    <div v-for="item in 2" :key="item" :id="item === 2 ? 'printContent' : ''">
      <slot></slot>
    </div>
    <div class="tc mt-10" v-if="print">
      <el-button
        type="primary"
        v-print="printObj"
        v-show="false"
        ref="buttonRef"
      >
        打印
      </el-button>
      <el-button type="primary" @click="fnPrint">打印</el-button>
    </div>
    <div v-html="PRINT_STYLE" v-if="direction === 'horizontal'" />
  </layout-card>
</template>

<script setup>
import usePrint from "@/assets/js/usePrint.js";
import { ref } from "vue";
import { PRINT_STYLE } from "@/assets/js/constant.js";

defineOptions({
  name: "LayoutPrintTablePackage",
});
const props = defineProps({
  print: {
    type: Boolean,
    default: true,
  },
  direction: {
    type: String,
    default: "vertical",
    validator: (value) => {
      if (["vertical", "horizontal"].includes(value)) {
        return true;
      } else {
        throw new Error('direction必须是"vertical"或"horizontal"');
      }
    },
  },
});
const width = ref(props.direction === "vertical" ? "210mm" : "297mm");
const { fnPrint, printObj, buttonRef } = usePrint();
</script>

<style lang="scss" scoped>
#printContent {
  width: v-bind(width);
  margin: auto;
  height: 0;
  overflow: hidden;
  position: relative;
  top: 200px;
}

@media print {
  #printContent {
    top: 0;
  }
}

:deep {
  table {
    border-collapse: collapse;
    width: 100%;

    td,
    th {
      border: 1px solid var(--el-border-color);
      padding: 8px 12px;
      font-size: 14px;
    }

    .title {
      background: var(--el-fill-color-light);
      width: 200px;
      text-align: center;
    }
  }
}
</style>
