<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>
        <thead>
          <tr height="16">
            <th colspan="2" style="font-size: 12px" />
            <th colspan="4" align="center" style="font-size: 12px">东旭达集团淮安麦禾田新材料科技有限公司</th>
            <th
              v-if="item.id !== undefined"
              colspan="2"
              align="center"
              valign="center"
            >
              <VueQr
                :text="item.id"
                :binarize="true"
                :size="50"
                :margin="5"
              />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr height="16">
            <td align="right" colspan="2">批次号:</td>
            <td colspan="6">{{ item.boxSn }}</td>
          </tr>
          <tr height="16">
            <td align="right" colspan="2">客户订单号:</td>
            <td colspan="3">{{ item.cusOrderNo }}</td>
            <td align="right">物料号:</td>
            <td colspan="2">{{ item.cusMaterialCode }}</td>
          </tr>
          <tr height="16">
            <td align="right" colspan="2">物料名称:</td>
            <td colspan="2">{{ item.cusMaterialName }}</td>
            <td align="right" colspan="2">供应商名称:</td>
            <td colspan="2">麦禾田</td>
          </tr>
          <tr height="16">
            <td align="right" colspan="2">包装数量:</td>
            <td>{{ item.boxQty }}</td>
            <td align="right" colspan="3">版本号:</td>
            <td colspan="2" />
          </tr>
          <tr height="16">
            <td align="right" colspan="2">生产日期:</td>
            <td colspan="2">{{ parseTime(item.createTime) }}</td>
            <td align="right" colspan="3">保质期:</td>
            <td colspan="1" />
          </tr>
          <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: 600px;
  margin: 0 auto;
  border: 1px solid #000000;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border: 1px solid #000000;
}
</style>
