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

        <div style="margin-left: 75px">
          <span style="display: inline-block; width: 70px; height: 19px">{{
            purchaseOrigins ? purchaseOrigins : ' '
          }}</span>
        </div>

        <div style="margin-left: 75px">
          <span style="display: inline-block; width: 70px; height: 19px">{{
            specification ? specification : ' '
          }}</span>
          <span
            style="
              display: inline-block;
              width: 70px;
              margin-left: 35px;
              height: 19px;
            "
            >{{ netWeight ? netWeight : ' '
            }}{{ weightUnit ? weightUnit : ' ' }}</span
          >
        </div>

        <div style="margin: 2px 0 0 130px">
          <span style="display: inline-block; height: 19px">{{
            level ? level : ' '
          }}</span>
        </div>

        <div style="margin: 3px 0 0 75px">
          <span style="display: inline-block; width: 60px; height: 19px">{{
            batchNo ? batchNo : ' '
          }}</span>

          <span
            style="
              display: inline-block;
              margin-left: 42px;
              width: 67px;
              height: 19px;
            "
            >{{ createDate ? createDate : ' ' }}</span
          >
          <span
            style="
              display: inline-block;
              margin-left: 42px;
              width: 60px;
              height: 19px;
            "
            >{{ warrantyPeriod ? warrantyPeriod : 0
            }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</span
          >
        </div>

        <div style="margin: 3px 0 0 75px">
          <span style="display: inline-block; height: 19px">{{
            notice ? notice : ' '
          }}</span>
        </div>

        <div style="margin: 3px 0 0 75px">
          <span style="display: inline-block; height: 19px">{{
            layBy ? layBy : ' '
          }}</span>
        </div>

        <div style="margin: 3px 0 0 75px">
          <span style="display: inline-block; height: 19px">{{
            enforceStandards ? enforceStandards : ' '
          }}</span>
        </div>

        <div
          style="
            position: absolute;
            top: -15px;
            right: 80px;
            width: 50px;
            height: 50px;
          "
        >
          <img style="width: 100%; height: 100%" :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;
        const {
          batchNo,
          createDate,
          enforceStandards,
          layBy,
          level,
          netWeight,
          notice,
          productName,
          purchaseOrigins,
          specification,
          warrantyPeriod,
          warrantyPeriodUnit,
          weightUnit
        } = item;

        this.productName = productName ? productName : '';
        this.batchNo = batchNo ? batchNo : '';
        this.createDate = createDate ? createDate : '';
        this.enforceStandards = enforceStandards ? enforceStandards : '';
        this.layBy = layBy ? layBy : '';
        this.level = level ? level : '';
        this.netWeight = netWeight ? netWeight : '';
        this.notice = notice ? notice : '';
        this.purchaseOrigins = purchaseOrigins ? purchaseOrigins : '';
        this.specification = specification ? specification : '';
        this.warrantyPeriod =
          warrantyPeriod && !warrantyPeriod ? warrantyPeriod : '';
        this.warrantyPeriodUnit = warrantyPeriodUnit ? warrantyPeriodUnit : '';
        this.weightUnit = weightUnit ? weightUnit : '';
        this.workOrderId = workOrderId ? workOrderId : '';

        if (this.warrantyPeriodUnit === '1') {
          this.warrantyPeriodUnit = '分钟';
        } else if (this.warrantyPeriodUnit === '2') {
          this.warrantyPeriodUnit = '小时';
        } else if (this.warrantyPeriodUnit === '3') {
          this.warrantyPeriodUnit = '日';
        } else if (this.warrantyPeriodUnit === '4') {
          this.warrantyPeriodUnit = '月';
        } else if (this.warrantyPeriodUnit === '5') {
          this.warrantyPeriodUnit = '年';
        } else {
          this.warrantyPeriodUnit = '';
        }

        this.qrCodeUrl =
          window.location.origin + `/traceability?id=${this.workOrderId}`;

        // this.qrCodeUrl = `http://192.168.1.22:9999/traceability?id=${this.workOrderId}`;

        // console.log(window.location.origin, 'window.location.origin');

        this.$nextTick(() => {
          this.generateQRCodes();
        });
      },

      generateQRCodes() {
        if (this.workOrderId) {
          QRCode.toDataURL(this.qrCodeUrl)
            .then((url) => {
              // item.qrcode = url;
              this.url = url;
              this.$forceUpdate();
            })
            .catch((err) => {
              console.error(err);
            });
        }
      },

      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.close();
        printWindow.onload = function () {
          printWindow.print();
        };
      }

      // 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.close();
      //   // printWindow.onload = function () {
      //   //   printWindow.print();
      //   // };
      // }
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    position: relative;
    width: 90mm;
    height: 70mm;
    box-sizing: border-box;
    font-size: 8px;
    color: green;
    margin: 0 auto;
    font-weight: 700;

    .ju_ren_one_level {
      display: flex;
      margin: 63px 0 0 64px;
      flex-direction: row;

      span {
        display: inline-block;
        width: 70px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 35px;
      }
    }

    .ju_ren_two_level {
      margin-left: 64px;

      span {
        display: inline-block;
        width: 70px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 35px;
      }

      .ju_ren_two_level_two {
        margin-left: 100px;
      }
    }

    .ju_ren_Three_level {
      margin: 2px 0 0 110px;

      span {
        display: inline-block;
        height: 19px;
      }
    }
    .ju_ren_four_level {
      margin: 3px 0 0 64px;

      span {
        display: inline-block;
        width: 60px;
        height: 19px;
      }

      .ju_ren_one_level_two {
        margin-left: 42px;
      }

      .ju_ren_two_level_two {
        margin-left: 42px;
      }

      .two_text {
        width: 65px;
      }
    }

    .ju_ren_five_level {
      margin: 3px 0 0 64px;

      span {
        display: inline-block;
        height: 19px;
      }
    }

    .qr_code {
      position: absolute;
      top: 0;
      right: 15px;
      width: 60px;
      height: 60px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
