<template>
  <div ref="qrCode" id="qrCode" style="display:none;"></div>
</template>

<script>
import QRCode from "qrcodejs2-fix";
import { getLodop } from "./LodopFuncs.js";
import { mapGetters } from "vuex";
export default {
  name: "UsbAutoPrint",
  // orderType: 1, // 1是新订单2是取消单
  props: {
    printNum: Number,
    printData: Object,
    orderType: Number,
    deviceName: String,
  },
  data() {
    return {
      printInfo: {},
      usbPrinterList: [],
    };
  },
  // 监听属性 类似于data概念
  computed: {
    ...mapGetters(["usbPrinter"]),
  },
  // 监控data中的数据变化
  watch: {
    printNum: {
      handler() {
        if (JSON.stringify(this.printData) !== "{}") {
          this.printInfo = this.printData;
          this.$refs.qrCode.innerHTML = "";
          if (this.printData.openQrCode) {
            let qrCode = new QRCode("qrCode", {
              width: 100,
              height: 100, // 高度
              text: this.printData.orderidView, // 二维码内容
            });
          }
          this.$nextTick(() => {
            this.usbPrinterList.forEach((e) => {
              if (this.deviceName) {
                if (e.deviceName === this.deviceName) {
                  this.pringPdf(e);
                }
              } else {
                this.pringPdf(e);
              }
            });
          });
        }
      },
    },
    usbPrinter: {
      handler(newVal) {
        this.usbPrinterList = newVal.filter((v) => {
          return v.status;
        });
      },
      deep: true,
      immediate: true,
    },
  },

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    
  },
  // 方法集合
  methods: {
    pringPdf(data) {
      if (
        (this.orderType === 1 && data.openOrderPrint) ||
        (this.orderType === 2 && data.openOrderCancelPrint)
      ) {
        setTimeout(() => {
          if (!data.printCustomerCount) return;
          this.CreateOneFormPage(
            1,
            data.deviceName,
            data.printCustomerCount,
            data.width,
            this.createHtml(1, data)
          );
        }, 500);
        setTimeout(() => {
          if (!data.printMerchantCount) return;
          this.CreateOneFormPage(
            2,
            data.deviceName,
            data.printMerchantCount,
            data.width,
            this.createHtml(2, data)
          );
        }, 550);
        setTimeout(() => {
          if (!data.printKitchenCount) return;
          this.CreateOneFormPage(
            3,
            data.deviceName,
            data.printKitchenCount,
            data.width,
            this.createHtml2(data)
          );
        }, 600);
      }
    },
    CreateOneFormPage(num, deviceName, printCount, width, html) {
      LODOP = getLodop();
      LODOP.PRINT_INIT("订单小票");
      //选择操作系统中设为“默认”的打印机，“-1”代表默认打印机
      LODOP.SET_PRINTER_INDEX(deviceName);
      //设置打印份数
      LODOP.SET_PRINT_COPIES(printCount);
      // 参数含义 http://www.c-lodop.com/demolist/PrintSample5.html
      if (width === 58) {
        LODOP.SET_PRINT_PAGESIZE(3, 580, 100, "");
        LODOP.ADD_PRINT_HTM(40, 40, "51mm", "100%", html);
      }
      if (width === 80) {
        LODOP.SET_PRINT_PAGESIZE(3, 800, 100, "");
        LODOP.ADD_PRINT_HTM(40, 80, "60mm", "100%", html);
      }
      LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
      // LODOP.PRINT_DESIGN();
      // LODOP.PREVIEW();
      LODOP.PRINT();
      // 新订单第三联打完，出去打印下一单
      if (this.orderType === 1 && num === 3) {
        this.$emit("printOver", true);
      }
      // 取消单打印
      if (this.orderType === 2) {
        this.$emit("printOver", true);
      }
    },
    createHtml(num, data) {
      let pageWidth = data.width === 58 ? 1 : 2;
      let printInfo = this.printInfo;
      let html1 = `<div id="form1">
      <div style="font-size: 20px;font-weight: bold;text-align: center;">#${
        printInfo.daySeq
      }${printInfo.orderSource}${
        this.orderType === 1 && num === 1
          ? "(顾客联)"
          : this.orderType === 1 && num === 2
          ? "(商家联)"
          : ""
      }</div>
      <div style="display:${
        this.orderType === 2 ? "block" : "none"
      };font-size: 20px;font-weight: bold;text-align: center;">${
        this.orderType === 2 ? "取消单" : ""
      }</div>
      <div style="font-size: 12px;text-align: center;margin:5px 0;">${
        printInfo.shopName
      }</div>
      <div style="font-size: 16px;font-weight: bold;text-align: center;">${
        printInfo.deliveryTime === "0"
          ? "立即送达"
          : "期望" + printInfo.deliveryTime
      }</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "----------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 13px;margin-bottom:5px;">下单时间：${
        printInfo.createTime
      }</div>
      <div style="font-size: 13px;">订单编号：${printInfo.outOrderId}</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "---------------商品-------------"
          : "------------------商品----------------"
      }</div>`;
      let html2 = "";
      for (let index = 0; index < printInfo.orderGoodsDtoList.length; index++) {
        html2 += `<div style="font-size: 18px; display: flex;flex-wrap:wrap;justify-content:space-between;">
        <div>${printInfo.orderGoodsDtoList[index].foodName}</div>
        <div style="width:100%;text-align:right"><span style="margin-right:20px;">x${printInfo.orderGoodsDtoList[index].quantity}</span><span>${printInfo.orderGoodsDtoList[index].price}</span></div>
      </div>`;
      }
      let html3 = `<div  style="display:${
        printInfo.invoiceTitle || printInfo.taxpayerId ? "block" : "none"
      };margin-top: 5px; text-align: center;">${
        pageWidth === 1
          ? "---------------发票-------------"
          : "------------------发票----------------"
      }</div>
      <div style="display:${
        printInfo.invoiceTitle ? "block" : "none"
      };font-size: 13px;">抬头: ${printInfo.invoiceTitle}</div>
      <div style="display:${
        printInfo.taxpayerId ? "block" : "none"
      };font-size: 13px;">税号: ${printInfo.taxpayerId}</div>
      <div style="display:${
        printInfo.caution ? "block" : "none"
      };margin-top: 5px;text-align: center;">${
        pageWidth === 1
          ? "---------------备注-------------"
          : "------------------备注----------------"
      }</div>
      <div style="cautionfont-size: 20px;font-weight: bold;">${
        printInfo.caution
      }</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "------------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 12px;display:flex;justify-content: space-between;"><span>配送费:</span><span>${Number(
        printInfo.deliverFee
      )}元</span></div>
      <div style="font-size: 12px;display:flex;justify-content: space-between;"><span>餐盒费:</span><span>${Number(
        printInfo.boxFee
      )}元</span></div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "------------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 12px;display:flex;justify-content: space-between;"><span>原价:</span><span>${
        printInfo.originalPrice
      }元</span></div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "------------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 20px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>${
        printInfo.totalPrice
      }元</span></div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "------------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 20px;font-weight: bold;">地址: ${
        printInfo.recipientAddress
      }</div>
      <div style="font-size: 13px;">${printInfo.recipientName}</div>
      <div style="font-size: 14px;">${printInfo.recipientPhone}</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "---------------#" + printInfo.daySeq + "完-------------"
          : "------------------#" + printInfo.daySeq + "完----------------"
      }</div><div style="display:flex;justify-content: center;align-items: center;">${
        num === 1 ? this.$refs.qrCode.innerHTML : ""
      }</div>    </div>`;
      return html1 + html2 + html3;
    },
    createHtml2(data) {
      let pageWidth = data.width === 58 ? 1 : 2;
      let printInfo = this.printInfo;
      let html1 = `<div id="form1">
      <div style="font-size: 20px;font-weight: bold;text-align: center;">#${
        printInfo.daySeq
      }${printInfo.orderSource}${this.orderType === 1 ? "(厨房联)" : ""}</div>
      <div style="display:${
        this.orderType === 2 ? "block" : "none"
      };font-size: 20px;font-weight: bold;text-align: center;">${
        this.orderType === 2 ? "取消单" : ""
      }</div>
      <div style="font-size: 12px;text-align: center;margin:5px 0;">${
        printInfo.shopName
      }</div>
      <div style="font-size: 16px;font-weight: bold;text-align: center;">${
        printInfo.deliveryTime === "0"
          ? "立即送达"
          : "期望" + printInfo.deliveryTime
      }</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "------------------------------------"
          : "----------------------------------------"
      }</div>
      <div style="font-size: 13px;margin-bottom:5px;">下单时间：${
        printInfo.createTime
      }</div>
      <div style="font-size: 13px;">订单编号：${printInfo.outOrderId}</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "---------------商品-------------"
          : "------------------商品----------------"
      }</div>`;
      let html2 = "";
      for (let index = 0; index < printInfo.orderGoodsDtoList.length; index++) {
        html2 += `<div style="font-size: 18px; display: flex;flex-wrap:wrap;justify-content:space-between;">
        <div>${printInfo.orderGoodsDtoList[index].foodName}</div>
        <div style="width:100%;text-align:right"><span style="margin-right:20px;">x${printInfo.orderGoodsDtoList[index].quantity}</span><span>${printInfo.orderGoodsDtoList[index].price}</span></div>
      </div>`;
      }
      let html3 = `<div style="display:${
        printInfo.caution ? "block" : "none"
      };margin-top: 5px;text-align: center;">${
        pageWidth === 1
          ? "---------------备注-------------"
          : "------------------备注----------------"
      }</div>
      <div style="font-size: 20px;font-weight: bold;">${printInfo.caution}</div>
      <div style="text-align: center;">${
        pageWidth === 1
          ? "---------------#" + printInfo.daySeq + "完-------------"
          : "------------------#" + printInfo.daySeq + "完----------------"
      }</div>    </div>`;
      return html1 + html2 + html3;
    },
  },
};
</script>

<style lang="scss" scoped>
.print {
  display: none;
}
</style>