<template>
  <div v-show="false" id="packing-label-prinit-template">
    <div v-for="item in printData" :key="item.id" class="print-item">
      <table>
        <colgroup>
          <col width="25">
          <col width="25">
          <col width="25">
        </colgroup>
        <tbody>
          <tr height="16">
            <td align="right">采购单号:</td>
            <td colspan="2">{{ item.purchaseOrderNo }}</td>
          </tr>
          <tr height="16">
            <td align="right">物料编码:</td>
            <td colspan="2">{{ item.materialNo }}</td>
          </tr>
          <tr height="16">
            <td align="right">物料名称:</td>
            <td
              colspan="2"
            >{{ item.materialName }}</td>
          </tr>
          <tr height="16">
            <td align="right">批号:</td>
            <td colspan="2">{{ item.materialLots }}</td>
          </tr>
          <tr height="16">
            <td align="right">规格:</td>
            <td colspan="2">{{ item.size }}</td>
          </tr>
          <tr height="16">
            <td align="right">数量:</td>
            <td class="qty">{{ item.qty }}</td>
            <td
              rowspan="2"
              align="left"
              valign="center"
            >
              <VueQr
                :text="item.qrCode"
                :binarize="true"
                :size="60"
                :margin="5"
              />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import VueQr from 'vue-qr'
export default {
  components: {
    VueQr
  },
  props: {
    printData: {
      type: Array,
      default: () => []
    }
  }
}
</script>

  <style scoped>
  table {
    width: 400px;
    margin: 0 auto;
    border: 1px solid #000000;
    border-collapse: collapse;
    table-layout: fixed;
  }

  th,
  td {
    border: 1px solid #000000;
  }
  td {
    width:100%;
    word-break:keep-all;/* 不换行 */
    white-space:nowrap;/* 不换行 */
    overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow:ellipsis;
  }
  /* 数量超出换行 */
 ::deep .qty {
    word-break: break-all !important;
    word-wrap: break-word !important;
    white-space: pre-wrap !important;
  }
  </style>
