<template>
  <ele-modal
    title="打印标签"
    :visible.sync="QRvisible"
    v-if="QRvisible"
    width="800px"
    :maxable="true"
  >
    <div id="printSection">
      <div
        style="
          width: 100mm;
          height: 72mm;
          box-sizing: border-box;
          font-weight: 700;
          font-size: 10px;
          color: #333;
          margin: 0 auto;
        "
      >
        <!-- 第一行信息 -->
        <div
          style="
            display: flex;
            flex-direction: row;
            padding: 0 45px;
            box-sizing: border-box;
          "
        >
          <div
            style="
              display: flex;
              flex: 1;
              flex-direction: column;
              flex-wrap: wrap;
            "
          >
            <div>产品名称：{{ productName }}</div>
            <div>生产批号：{{ batchNo }}</div>
            <div>生产日期：{{ createDate }}</div>
          </div>
          <div style="display: flex; flex: 1; flex-direction: column">
            <div>规格型号：{{ specification }}</div>
            <div>产品数量：5套</div>
            <div>失效日期：{{ expiryDate }}</div>
          </div>
        </div>

        <div
          style="
            display: flex;
            flex-direction: column;
            padding: 0 62px 0 45px;
            box-sizing: border-box;
          "
        >
          <p style="padding: 0; margin: 0">储存条件和维护方法：{{ layBy }}</p>
          <p style="padding: 0; margin: 0"
            >医疗器械注册证编号：{{ enforceStandards }}</p
          >
          <p style="padding: 0; margin: 0"
            >生产许可证编号：湘食药监械生产许20170012号</p
          >
          <p style="padding: 0; margin: 0"
            >注册人/生产企业名称：{{ enterpriseDTO.name }}</p
          >
          <p style="padding: 0; margin: 0">
            注册人/生产企业住址：{{ enterpriseDTO.address }}
          </p>
          <p style="padding: 0; margin: 0"> 生产地址：{{ purchaseOrigins }} </p>
        </div>

        <div
          style="
            display: flex;
            flex-direction: row;
            padding: 0 62px 0 45px;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
          "
        >
          <div
            style="
              width: 220px;
              display: flex;
              flex-direction: column;
              align-items: center;
            "
          >
            <canvas id="barCodeOne" style="width: 100px; height: 55px"></canvas>
            <p
              style="margin: 0; padding: 0; font-size: 9px; font-weight: normal"
              >联系电话：{{ enterpriseDTO.tel }}</p
            >
          </div>
          <div
            style="
              display: flex;
              width: 100%;
              justify-content: flex-end;
              flex-direction: column;
              align-items: center;
            "
          >
            <canvas id="barCodeTwo" style="width: 150px; height: 55px"></canvas>
            <p
              style="
                margin: 0;
                padding: 0;
                font-size: 10px;
                font-weight: normal;
              "
              >其他内容详见说明书</p
            >
          </div>
        </div>

        <!-- 图标与条码 -->
        <div
          style="
            display: flex;
            gap: 3px;
            padding: 0 62px 0 45px;
            margin-top: 10px;
            box-sizing: border-box;
            font-size: 8px;
          "
        >
          {{ notice }}
          <!-- <span>STERILE</span>
          <span>经环氧乙烷灭菌</span>
          <span>不得二次使用</span>
          <span>包装破损时切勿使用</span>
          <span>查阅使用说明</span> -->
        </div>

        <!-- 标签尺寸 -->
        <!-- <div class="size">标签尺寸：100*80</div> -->
        <!-- <hr /> -->
        <!-- 有效期 -->
        <!-- <div class="expiry">有效期变更为 <strong>5 </strong>年</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: '', //失效日期
        unit: '' //单位
      };
    },

    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.unit = item.unit;

        if (this.warrantyPeriodUnit) {
          const warrantyPeriod = item.warrantyPeriod;
          if (warrantyPeriod) {
            if (this.warrantyPeriodUnit == '3') {
              this.expiryDate = this.getEndDate(
                this.createDate,
                Number(warrantyPeriod)
              );
            } else if (this.warrantyPeriodUnit == '4') {
              this.expiryDate = this.getEndDateByMonths(
                this.createDate,
                Number(warrantyPeriod)
              );
            } else if (this.warrantyPeriodUnit == '5') {
              this.expiryDate = this.getEndDateByYears(
                this.createDate,
                Number(warrantyPeriod)
              );
            }
          }
        }

        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
          });
        });
      },

      getEndDate(startDateStr, days) {
        const startDate = new Date(startDateStr);
        startDate.setDate(startDate.getDate() + days);
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');

        return `${year}-${month}-${day}`;
      },

      getEndDateByMonths(startDateStr, months) {
        const startDate = new Date(startDateStr);
        startDate.setMonth(startDate.getMonth() + months);
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');

        return `${year}-${month}-${day}`;
      },

      getEndDateByYears(startDateStr, years) {
        const startDate = new Date(startDateStr);
        startDate.setFullYear(startDate.getFullYear() + years);
        const year = startDate.getFullYear();
        const month = String(startDate.getMonth() + 1).padStart(2, '0');
        const day = String(startDate.getDate()).padStart(2, '0');

        return `${year}-${month}-${day}`;
      },

      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 () {
        //   setTimeout(() => printWindow.print(), 2000);
        //   // printWindow.print();
        // };

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

        // 打印后恢复原canvas
        // imgOne.parentNode.replaceChild(tempOne, imgOne);
        // imgTwo.parentNode.replaceChild(tempTwo, imgTwo);
      }
    }
  };
</script>

<style scoped lang="scss">
  .label-container {
    width: 100mm;
    height: 72mm;
    box-sizing: border-box;
    font-weight: 700;
    font-size: 10px;
    color: #333;
    margin: 0 auto;
  }

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

  .label-info-right {
    display: flex;
    flex: 1;
    flex-direction: column;

    input {
      width: 8px;
      height: 8px;
    }
  }

  .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>
