<template>
  <ele-modal
    title="打印标签"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="800px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        style="
          width: 60mm;
          border: 1px solid #000;
          font-size: 6px;
          background-color: #fff;
          font-weight: 700;
          box-sizing: border-box;
          margin: 0 auto;
        "
      >
        <div
          style="
            padding: 10px 10px 0;
            position: relative;
            box-sizing: border-box;
          "
        >
          <p style="margin: 2px 0">产品名称：{{ productName }}</p>
          <p style="margin: 2px 0">规格型号：{{ specification }}</p>
          <p style="margin: 2px 0">产品数量：1套</p>
          <p style="margin: 2px 0">生产批号：{{ batchNo }}</p>
          <p style="margin: 2px 0">生产日期：{{ createDate }}</p>
          <p style="margin: 2px 0">失效日期：2029-11-11</p>
          <p style="margin: 2px 0"
            >医疗器械注册证编号：{{ enforceStandards }}</p
          >
          <p style="margin: 2px 0">生产许可证编号：湘药监械生产许20170012号</p>
          <p style="margin: 2px 0">注册人/生产企业：{{ enterpriseDTO.name }}</p>
          <p style="margin: 2px 0">
            注册人/生产企业住所：{{ enterpriseDTO.address }}
          </p>
          <canvas
            id="barCodeOne"
            style="
              position: absolute;
              right: 0;
              top: 0;
              margin: 15px 20px;
              width: 100px;
              height: 30px;
            "
          ></canvas>
        </div>

        <div
          style="
            text-align: center;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 0 5px;
            box-sizing: border-box;
          "
        >
          <canvas id="barCodeTwo" style="width: 80%; height: 50px"></canvas>
          <span
            style="
              font-size: 8px;
              padding: 2px;
              margin-left: 2px;
              box-sizing: border-box;
              border: 2px solid #333;
            "
            >合格</span
          >
        </div>

        <!-- <div class="size">标签尺寸：100*80</div> -->
        <!-- <hr /> -->

        <!-- <div class="footer">
      <p>有效期更改为 <strong>5</strong> 年</p>
    </div> -->
      </div>
    </div>
    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import JsBarcode from 'jsbarcode';
  export default {
    data() {
      return {
        QRvisible: false,
        batchNo: '', //批次号
        productName: '', //产品名称
        createDate: '', //生产日期
        enforceStandards: '', //执行标准
        warrantyPeriodUnit: '', //保质日期单位
        layBy: '', //贮藏
        specification: '', //规格
        purchaseOrigins: '', //产地
        notice: '', //注意
        enterpriseDTO: {},
        expiryDate: '' //失效日期
      };
    },

    methods: {
      open(item, shortBarcode, longBarcode) {
        this.batchNo = item.batchNo;
        this.productName = item.productName;
        this.createDate = item.createDate;
        this.enforceStandards = item.enforceStandards;
        this.warrantyPeriodUnit = item.warrantyPeriodUnit;
        this.layBy = item.layBy;
        this.specification = item.specification;
        this.notice = item.notice;
        this.enterpriseDTO = item.enterpriseDTO;

        this.QRvisible = true;
        this.$nextTick(() => {
          JsBarcode('#barCodeOne', shortBarcode, {
            format: 'CODE128',
            width: 2,
            height: 40,
            displayValue: true
          });

          JsBarcode('#barCodeTwo', longBarcode, {
            format: 'CODE128',
            width: 2,
            height: 40,
            displayValue: true
          });
        });
      },

      close() {
        this.QRvisible = false;
      },

      print() {
        const printSection = document.getElementById('printSection');

        const canvasOne = document.getElementById('barCodeOne');
        const imgOne = document.createElement('img');
        imgOne.src = canvasOne.toDataURL('image/png');
        imgOne.style.width = '100px';
        imgOne.style.height = '55px';

        // const tempOne = canvasOne.cloneNode(true);
        canvasOne.parentNode.replaceChild(imgOne, canvasOne);

        const canvasTwo = document.getElementById('barCodeTwo');
        const imgTwo = document.createElement('img');
        imgTwo.src = canvasTwo.toDataURL('image/png');
        imgTwo.style.width = '150px';
        imgTwo.style.height = '55px';

        // const tempTwo = canvasTwo.cloneNode(true);
        canvasTwo.parentNode.replaceChild(imgTwo, canvasTwo);

        // 创建打印任务
        const printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write('<html><head><title>打印预览</title>');
        printWindow.document.write(
          '<link rel="stylesheet" href="your-stylesheet-url.css" type="text/css" />'
        );
        printWindow.document.write('</head><body>');
        printWindow.document.write(printSection.innerHTML);
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        // printWindow.onload = function () {
        //   printWindow.print();
        // };

        // 4. 等待图片加载完再打印
        printWindow.onload = function () {
          setTimeout(() => {
            printWindow.print();
            // printWindow.close();
          }, 500);
        };
      }
    }
  };
</script>

<style scoped lang="scss">
  .label {
    width: 60mm;
    border: 1px solid #000;
    font-size: 6px;
    background-color: #fff;
    font-weight: 700;
    box-sizing: border-box;
    margin: 0 auto;
  }

  .product-info {
    padding: 10px 10px 0;
    position: relative;
    box-sizing: border-box;

    p {
      margin: 2px 0;
    }
    canvas {
      position: absolute;
      right: 0;
      top: 0;
      margin: 15px 20px;
      width: 100px;
      height: 30px;
    }
  }

  .barcode-box {
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 5px;
    box-sizing: border-box;

    canvas {
      width: 80%;
      height: 50px;
    }

    span {
      font-size: 8px;
      padding: 2px;
      margin-left: 2px;
      box-sizing: border-box;
      border: 2px solid #333;
    }
  }

  .status {
    border: 1px solid #000;
    width: 40px;
    text-align: center;
    padding: 2px 0;
    margin: 10px 0;
    font-weight: bold;
  }

  .size {
    text-align: center;
    font-size: 12px;
    font-weight: normal;
  }

  .footer {
    font-size: 16px;
    font-weight: normal;
    margin-left: 10px;

    p {
      margin: 0;
      padding: 0;
    }
  }
</style>
