<template>
  <ele-modal
    title="打印条码"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="800px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        style="
          width: 90mm;
          height: 60mm;
          box-sizing: border-box;
          font-size: 10px;
          color: green;
          margin: 0 auto;
          font-weight: 700;
        "
      >
        <!-- 第一行信息 -->
        <div
          style="
            display: flex;
            flex-direction: row;
            padding: 0 45px;
            box-sizing: border-box;
          "
        >
          <div
            style="
              display: flex;
              flex-direction: column;
              flex-wrap: wrap;
              margin: 54px 0 0 62px;
            "
          >
            <div style="height: 17px">{{
              productName ? productName : ' '
            }}</div>
            <div style="height: 17px">{{
              purchaseOrigins ? purchaseOrigins : ' '
            }}</div>
            <div style="height: 17px">{{ batchNo ? batchNo : ' ' }}</div>
            <div style="height: 17px">{{
              specification ? specification : ' '
            }}</div>
            <div style="height: 17px">{{ createDate ? createDate : ' ' }}</div>
            <div style="height: 17px">{{ layBy ? layBy : ' ' }}</div>
            <div style="height: 17px">{{ notice ? notice : ' ' }}</div>
            <div style="height: 17px">{{
              enforceStandards ? enforceStandards : ' '
            }}</div>
          </div>

          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              margin: 37px 0 1px 30px;
            "
          >
            <div style="height: 17px">{{ level ? level : ' ' }}</div>
            <div style="height: 17px"
              >{{ netWeight ? netWeight : ' '
              }}{{ weightUnit ? weightUnit : ' ' }}</div
            >
            <div style="height: 17px"
              >{{ warrantyPeriod ? warrantyPeriod : ' '
              }}{{ warrantyPeriodUnit ? warrantyPeriodUnit : ' ' }}</div
            >
          </div>
        </div>
      </div>
    </div>
    <div slot="footer">
      <el-button @click="print">打印预览</el-button>
      <el-button @click="close">关闭</el-button>
    </div>
  </ele-modal>
</template>

<script>
  export default {
    data() {
      return {
        batchNo: '',
        createDate: '',
        enforceStandards: '',
        layBy: '',
        level: '',
        netWeight: '',
        notice: '',
        productName: '',
        purchaseOrigins: '',
        specification: '',
        warrantyPeriod: '',
        warrantyPeriodUnit: '',
        weightUnit: '',
        QRvisible: false
      };
    },

    mounted() {},

    methods: {
      open(item) {
        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 : '';

        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 = '';
        }
      },

      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();
        };
      }
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    // font-family: "Arial", "Helvetica", sans-serif;
    width: 90mm;
    height: 60mm;
    box-sizing: border-box;
    font-size: 10px;
    color: green;
    margin: 0 auto;
    font-weight: 700;
  }

  .label-title {
    display: flex;
    flex-direction: row;
    padding: 0 45px;
    box-sizing: border-box;
  }
  .label-info-left {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 54px 0 0 62px;

    div {
      height: 17px;
    }
  }

  .label-info-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 37px 0 1px 30px;

    .right-div {
      height: 17px;
    }
  }

  .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
  }

  .knife-table {
    border-collapse: collapse;
    width: 100%;
    margin: 8px 0;
    text-align: center;
  }

  .knife-table th,
  .knife-table td {
    border: 1px solid #000;
    padding: 4px;
  }

  .knife-table tbody {
    height: 30px;

    .knife-title {
      width: 60px;
    }
  }

  .knife-table img {
    height: 80px;
  }

  .info {
    display: flex;
    flex-direction: column;
    padding: 0 62px 0 45px;
    box-sizing: border-box;

    p {
      padding: 0;
      margin: 0;
    }
  }

  .phone-box {
    display: flex;
    flex-direction: row;
    padding: 0 62px 0 45px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    .phone-canvas-left-box {
      width: 220px;
      display: flex;
      flex-direction: column;
      align-items: center;
      canvas {
        width: 100px;
        height: 55px;
      }

      p {
        margin: 0;
        padding: 0;
        font-size: 9px;
        font-weight: normal;
      }
    }

    .phone-canvas-right-box {
      display: flex;
      width: 100%;
      justify-content: flex-end;
      flex-direction: column;
      align-items: center;
      canvas {
        width: 150px;
        height: 55px;
      }

      p {
        margin: 0;
        padding: 0;
        font-size: 10px;
        font-weight: normal;
      }
    }
  }

  .icons {
    display: flex;
    gap: 3px;
    padding: 0 62px 0 45px;
    margin-top: 10px;
    box-sizing: border-box;
    font-size: 8px;
  }

  .barcode {
    text-align: center;
  }

  .size {
    text-align: center;
    font-size: 8px;
    font-weight: normal;
    margin-top: 8px;
  }

  .expiry {
    display: flex;
    text-align: left;
    font-size: 14px;
    font-weight: normal;
    align-items: center;
  }
</style>
