<template>
  <div class="print">
    <!-- <div @click="pringPdf">打印测试</div> -->
    <div id="form1">
      <div style="font-size: 24px;font-weight: bold;text-align: center;">#{{printData.daySeq}}{{printData.orderSource}}</div>
      <!-- <div style="font-size: 18px;text-align: center;margin:10px 0;">{{printData.shopName}}</div>
      <div style="font-size: 18px;font-weight: bold;">期望09月15日 18:45送达</div>
      <div>------------------------------------</div>
      <div style="font-size: 13px;margin-bottom:5px;">下单时间：{{printData.createTime}}</div>
      <div style="font-size: 13px;">订单编号：{{printData.outOrderId}}</div>
      <div>----------------商品--------------</div>
      <div style="font-size: 20px; display: flex;flex-wrap:wrap;justify-content:space-between;" v-for="(v,i) in printData.orderGoodsDtoList" :key="i">
        <div>{{v.foodName}}</div>
        <div style="width:100%;text-align:right"><span style="margin-right:20px;">x{{v.quantity}}</span><span>{{v.price}}</span></div>
      </div>
      <div v-if="printData.taxpayerId || printData.invoiceTitle" style="margin-top: 5px;">----------------发票--------------</div>
      <div v-if="printData.invoiceTitle" style="font-size: 13px;">抬头: {{printData.invoiceTitle}}</div>
      <div v-if="printData.taxpayerId" style="font-size: 13px;">税号: {{printData.taxpayerId}}</div>
      <div>------------------------------------</div>
      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>配送费:</span><span>{{Number(printData.deliverFee)}}元</span></div>
      <div>------------------------------------</div>
      <div style="font-size: 13px;display:flex;justify-content: space-between;"><span>原价:</span><span>{{printData.originalPrice}}元</span></div>
      <div>------------------------------------</div>
      <div style="font-size: 18px;font-weight:bold;display:flex;justify-content: space-between;"><span>实付:</span><span>{{printData.totalPrice}}元</span></div>
      <div>------------------------------------</div>
      <div style="font-size: 18px;font-weight: bold;">地址: {{printData.recipientAddress}}</div>
      <div style="font-size: 13px;">{{printData.recipientName}}</div>
      <div style="font-size: 14px;">{{printData.recipientPhone}}</div> -->
      <div>----------------#{{printData.daySeq}}完--------------</div>
    </div>
  </div>
</template>

<script>
import { getLodop } from "./LodopFuncs.js";
export default {
  name: "UsbAutoPrint",
  props: { printNum: Number, printData: Object },
  data() {
    return {};
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},

  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    console.log("需要打印的内容：", this.content);
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (JSON.stringify(this.printData) !== "{}") {
      this.$nextTick(() => {
        this.pringPdf();
      });
    }
  },
  // 方法集合
  methods: {
    pringPdf() {
      this.CreateOneFormPage();
    },
    CreateOneFormPage() {
      LODOP = getLodop();
      LODOP.PRINT_INIT("订单小票");
      //选择操作系统中设为“默认”的打印机，“-1”代表默认打印机
      LODOP.SET_PRINTER_INDEX(-1);
      //设置打印份数是1份
      LODOP.SET_PRINT_COPIES(1);
      // 参数含义 http://www.c-lodop.com/demolist/PrintSample5.html
      LODOP.SET_PRINT_PAGESIZE(3, 570, 100, "");
      LODOP.ADD_PRINT_HTM(
        40,
        0,
        "53mm",
        "100%",
        document.getElementById("form1").innerHTML
      );
      LODOP.SET_PRINT_STYLEA(0, "Horient", 2);
      LODOP.PRINT();
      this.$emit("printOver", this.printNum);
      // LODOP.PRINT_DESIGN();
      // LODOP.PREVIEW();
    },
  },
};
</script>

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