<template>
  <div class="productOrderSpecification">
      <div class="titles1" >
        <div class="cdbh">PartNo:{{templateData.itemCode}}</div>
        <div class="cdbh">S/N:{{templateData.qrcode}}</div>
        <div class="cdbh">Part Name:</div>
        <div class="cdbh1">{{templateData.specification}}</div>
      </div>
      <div class="titles">
        <canvas :id="'barcode' + index" style="width: 100%;height: 100%;"></canvas>
      </div>
      <div style="page-break-after:always"></div>
  </div>
</template>

<script>


import dayjs from 'dayjs'
import * as bwipjs from 'bwip-js'

export default {
  props: ['templateData', 'index'],
  dicts: ['pro_requisition_type'],
  data() {
    return {
      date: dayjs().format('YYYY-MM-DD'),
      // templateData: {itemCode: '', qrcode: '', specification: ''},
      mytable: {
  }
    }
  },
  mounted() {
    // if (this.$refs.qrCodeDiv) {
    //   this.$refs.qrCodeDiv.innerHTML = '';
    // }
    // new QRCode(this.$refs.qrCodeDiv, {
    //   text: "1234", // 需要转换为二维码的内容
    //   width: 37, //宽度
    //   height: 37, //高度
    //   colorDark: '#000000', //二维码方块颜色
    //   colorLight: '#ffffff', //背景颜色
    //   correctLevel: QRCode.CorrectLevel.Q, //容错率：L M Q H 依次递减
    // });
    console.log('this.templateData.qrcode', this.templateData.qrcode)
    let options = {
        bcid: 'datamatrix',       // Barcode type
        text: this.templateData.qrcode,    // Text to encode
        scale: 3,               // 3x scaling factor
        height: 4,
        width: 4,              // Bar height, in millimeters
        includetext: false,            // Show human-readable text
        textxalign: 'center',        // Always good to set this
    }
    bwipjs.toCanvas('barcode' + this.index, options);
  },
  computed: {
  }
}
</script>

<style scoped lang="scss">
.productOrderSpecification{
  font-family: "Arial narrow2";
  margin: 0;
  position: relative;
  display: flex;
  width: 35.6mm;
  height: 12.7mm;
  padding: 2px 0 0 4px;
  font-size: 8px;
  color: black;
  font-weight: bold;
}
@media print {
  @page {
    size: 35.6mm 12.7mm;
    margin: 0; /* 设置上下左右页边距都为1厘米，可根据需求调整具体数值 */
  }
  #print-content {
    background-color: white; /* 通常将背景设为白色，避免打印出不必要的背景色等 */
  }
}

.cdbh{
  height: 6px;
}
.titles{
  padding-top: 2px;
  width: 37px;
  height: 37px;
  overflow: hidden;
}
.titles1{
  font-size: 6px;
  line-height: 6px;
  width: 23mm;
}

[text-center]{
  text-align: center;
}
.text-left {
  text-align: left !important;
}
.color000{
  color: #000;
  font-weight: 400 !important;
  td {
    word-wrap:break-word;
    word-break:break-all
  }
}
</style>

