<template>
  <div style="background: #ffffff">
    <div class="button-container">
    <el-button  v-print="'#printMe'" type="primary">打印</el-button>
    <el-button  @click="yulandayin" type="primary">打印预览</el-button>
    </div>
    <div id="printMe" v-for="(kw3,groupIndex) in kwfenzu" :key="groupIndex"  class="group-container">
      <div
        v-for="k2 in kw3"
        class="label-item" >
        <table class="label-table">
          <tr>
            <td  class="td-item" style="width:45mm" colspan="3">纳所/品番</td>
            <td  class="td-item-value" colspan="9">{{ k2.ns }}</td>
            <td  class="td-item" colspan="3">箱种</td>
            <td  class="td-item-value" colspan="2">{{ k2.xz }}</td>
          </tr>
          <tr>
            <td class="td-item" colspan="3">品名</td>
            <td  class="td-item-value" colspan="9">{{ k2.pm }}</td>
            <td  class="td-item" colspan="3">收容数</td>
            <td  class="td-item-value" colspan="2">{{ k2.srs }}</td>
          </tr>
          <tr style="height: 13mm">
            <td class="td-item" colspan="3">材库</td>
            <td  class="td-item-value" colspan="4">{{ k2.hw }}</td>
            <td  class="td-item" colspan="2">制库</td>
            <td  class="td-item-value" colspan="4">{{ k2.hw }}</td>
            <td  class="td-item" colspan="2">税别</td>
            <td  class="td-item-value" colspan="2">{{ k2.bonded }}</td>
          </tr>
          <tr>
            <td class="td-item" colspan="3">供应商</td>
            <td  class="td-item-value" colspan="14">{{ k2.supplier }}</td>

          </tr>
          <tr style="height: 13mm">
            <td class="td-item"  colspan="3">适用机型</td>
            <td  class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[0] }}</td>
            <td  class="td-item" style="width:45mm"  colspan="2">{{ k2.jxs[1] }}</td>
            <td  class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[2] }}</td>
            <td  class="td-item" style="width:45mm"  colspan="2">{{ k2.jxs[3] }}</td>
            <td  class="td-item" style="width:45mm" colspan="2">{{ k2.jxs[4] }}</td>
            <td  class="td-item" colspan="4" rowspan="2" style="width: 40mm;height: 20mm;">
              <vue-qrcode
                :value="getQrContent(k2)"
                :options="qrOptions"
                tag="img"
                class="qr-code"
              />
            </td>
          </tr>
          <tr style="height: 13mm">
            <td class="td-item" colspan="3">使用数量</td>
            <td  class="td-item" colspan="2">{{ k2.tyls[0] }}</td>
            <td  class="td-item" colspan="2">{{ k2.tyls[1] }}</td>
            <td  class="td-item" colspan="2">{{ k2.tyls[2] }}</td>
            <td  class="td-item" colspan="2">{{ k2.tyls[3] }}</td>
            <td  class="td-item" colspan="2">{{ k2.tyls[4] }}</td>

          </tr>
        </table>

      </div>
    </div>

  </div>
</template>

<script>
import { vPrint } from 'vue-print-next';
import { VuePrintNext } from 'vue-print-next';
import {bomPrintBiaoQianList} from "@/api/bomAccount";

import VueQrcode from '@chenfengyuan/vue-qrcode';

export default {
  name: 'PointPrint',
  components: {
    VueQrcode
  },
  directives: {
    print: vPrint
  },
  computed: {

  },

  data() {
    return {
      kkkk2: [],
      kwfenzu: [],
      qrOptions: {
        width: 60,          // 二维码宽度
        margin: 0,          // 边距
        errorCorrectionLevel: 'H' // 容错级别（高）
      },
      qrSize: 120, // 二维码尺寸
      // 示例数据 - 实际应用中可从API获取


    }
  },
  mounted() {
    this.getPrintList();
  },
  methods: {
    getQrContent(location) {
      // 自定义二维码内容，这里用箱种和品番组合
      return `${location.ewm}`;

      // 如果只需要箱种，可以直接用：
      // return location.boxType;
    },
    //获取点位表的数据
    yulandayin(){
      new VuePrintNext({
        el: '#printMe', /* 其他参数 */
        popTitle: '打印拣货单',
        preview: true,// 启用打印预览
        paperSize: 'A4'
      });
    },
     getPrintList(){
      bomPrintBiaoQianList().then(res => {
        console.log(res)
        this.kkkk2=res;

        this.kwfenzu=[]
        for (let i = 0; i < this.kkkk2.length; i += 3) {
          this.kwfenzu.push(this.kkkk2.slice(i, i + 3));
        }

      });
    }

  }
}


</script>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Microsoft YaHei', sans-serif;
}
body {
  background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
  padding: 20px;
  min-height: 100vh;
}
.button-container {
  padding-top: 20px;
  display: flex;
  justify-content: center; /* 水平居中 */
}
.group-container{
  padding-top: 10mm;
  box-shadow: none;margin-bottom:0;padding: 0;border-radius: 0;
  page-break-after: always;
  break-after: page;
}
.label-item {
  display: flex;
  flex-wrap: wrap;

  background: #ffffff;
  justify-content: center;
}
.td-item{
  text-align: center;
  border: #000000 2px solid;
}

.td-item-value{
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
  border: #000000 2px solid;
}

.qr-code {
  padding: 1mm;
  width: 28mm;   /* 控制显示大小 */
  height: 28mm;
  image-rendering: crisp-edges; /* 保持清晰度 */
  display: block;
  margin: 0 auto;
}

.label-table {
  margin-top: 5mm;
  margin-bottom: 5mm;

  width: 200mm;
  height: 80mm;
  background: #ffffff;
  border-collapse: collapse;
  font-size: 13px;
}

</style>
