<template>
  <ele-modal
    title="打印条码"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="1000px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        style="
          position: relative;
          width: 98mm;
          height: 70mm;
          font-size: 2.65mm;
          color: green;
          font-weight: 700;
          margin: 0 auto;
          box-sizing: border-box;
        "
      >
        <div
          style="
            display: flex;
            margin: 16.64mm 0 0 20.88mm;
            flex-direction: row;
          "
        >
          <span style="display: inline-block; width: 18.52mm; height: 5.03mm">{{
            productName ? productName : ' '
          }}</span>
          <span
            style="
              display: inline-block;
              margin-left: 9.79mm;
              width: 18.52mm;
              height: 5.03mm;
            "
            >{{ '123' }}</span
          >
        </div>

        <div style="margin-left: 20.88mm">
          <span style="display: inline-block; width: 18.52mm; height: 5.03mm">{{
            purchaseOrigins ? purchaseOrigins : ' '
          }}</span>
        </div>

        <div style="margin-left: 20.88mm">
          <span style="display: inline-block; width: 18.52mm; height: 5.03mm">{{
            specification ? specification : ' '
          }}</span>
          <span
            style="
              display: inline-block;
              width: 18.52mm;
              margin-left: 9.79mm;
              height: 5.03mm;
            "
            >{{ netWeight ? netWeight : ' '
            }}{{ weightUnit ? weightUnit : ' ' }}</span
          >
        </div>

        <div style="margin: 0.53mm 0 0 34.39mm">
          <span style="display: inline-block; height: 5.03mm">{{
            level ? level : ' '
          }}</span>
        </div>

        <div style="margin: 0.79mm 0 0 20.88mm">
          <span style="display: inline-block; width: 15.87mm; height: 5.03mm">{{
            batchNo ? batchNo : ' '
          }}</span>

          <span
            style="
              display: inline-block;
              margin-left: 11.64mm;
              width: 17.72mm;
              height: 5.03mm;
            "
            >{{ createDate ? createDate : ' ' }}</span
          >
          <span
            style="
              display: inline-block;
              margin-left: 10.84mm;
              width: 20mm;
              height: 5.03mm;
            "
            >{{ warrantyPeriod ? warrantyPeriod : 0
            }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</span
          >
        </div>

        <div style="margin: 0.79mm 0 0 20.88mm">
          <span style="display: inline-block; height: 5.03mm">{{
            notice ? notice : ' '
          }}</span>
        </div>

        <div style="margin: 0.79mm 0 0 20.88mm">
          <span style="display: inline-block; height: 5.03mm">{{
            layBy ? layBy : ' '
          }}</span>
        </div>

        <div style="margin: 0.79mm 0 0 20.88mm">
          <span style="display: inline-block; height: 5.03mm">{{
            enforceStandards ? enforceStandards : ' '
          }}</span>
        </div>

        <div
          style="
            position: absolute;
            top: -2mm;
            right: 11mm;
            width: 10mm;
            height: 10mm;
          "
        >
          <img
            style="width: 100%; height: 100%; object-fit: contain"
            :src="url"
          />
        </div>
      </div>
    </div>

    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  import QRCode from 'qrcode';
  export default {
    data() {
      return {
        batchNo: '',
        createDate: '',
        enforceStandards: '',
        layBy: '',
        level: '',
        netWeight: '',
        notice: '',
        productName: '',
        purchaseOrigins: '',
        specification: '',
        warrantyPeriod: '',
        warrantyPeriodUnit: '',
        weightUnit: '',
        url: '',
        workOrderId: '',
        qrCodeUrl: '',
        QRvisible: false
      };
    },
    mounted() {},

    methods: {
      open(item, workOrderId) {
        this.QRvisible = true;
        Object.assign(this, item);
        this.workOrderId = workOrderId || '';

        const unitMap = { 1: '分钟', 2: '小时', 3: '日', 4: '月', 5: '年' };
        this.warrantyPeriodUnit = unitMap[this.warrantyPeriodUnit] || '';

        this.qrCodeUrl = `${window.location.origin}/traceability?id=${this.workOrderId}`;
        this.$nextTick(this.generateQRCodes);
      },

      generateQRCodes() {
        if (this.workOrderId) {
          QRCode.toDataURL(this.qrCodeUrl, { width: 200, margin: 1 })
            .then((url) => {
              this.url = url;
            })
            .catch(console.error);
        }
      },

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

      print() {
        const printSection = document.getElementById('printSection');
        // 创建打印任务
        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.write(`
       <html>
  <head>
    <title>打印预览</title>
    <style>
      @media print {
        body {
          margin: 0;
          padding: 0;
        }
        #printSection {
          width: 98mm;
          height: 70mm;
          box-sizing: border-box;
          position: relative;
          overflow: visible !important;
        }
        #printSection span {
          white-space: nowrap; /* 避免换行 */
          overflow: visible !important;
        }
        #printSection img {
          object-fit: contain;
        }
      }
    </style>
  </head>
  <body>
    ${printSection.innerHTML}
  </body>
</html>
      `);

        printWindow.document.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }
    }
  };
</script>

<style scoped lang="scss"></style>
