<template>
  <el-row>
    <div v-html="contentHtml" class="contentHtml"></div>
    <el-row v-if="currRow.status === 2 && type === 'previewBill'" style="text-align: center;">
      <el-button type="primary" @click="download">下载</el-button>
      <el-button type="primary" @click="print">打印</el-button>
    </el-row>
  </el-row>
</template>

<script>
import { downloadBillService } from "@/api/ecw/box";
import lodop from "@/utils/lodop";
import FileSaver from "file-saver";

export default {
  name: "previewBill",
  props: {
    contentHtml: String,
    currRow: Object,
    type: String,
  },
  methods: {
    download() {
      downloadBillService({ id: this.currRow.id }).then((res) => {
        let blob = new Blob([res], { type: "application/pdf" });
        FileSaver.saveAs(blob, this.currRow.orderNo + ".pdf");
      });
    },
    print() {
      lodop()
        .then((LODOP) => {
          LODOP.PRINT_INIT();
          LODOP.SET_PRINT_STYLE("FontSize", 18);
          LODOP.SET_PRINT_STYLE("Bold", 1);
          // LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
          // var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
          var htmlContent =
            "<body>" + document.getElementById("print").innerHTML + "</body>";
          LODOP.ADD_PRINT_HTM(
            "6mm",
            "6mm",
            "RightMargin:6mm",
            "BottomMargin:6mm",
            htmlContent
          );
          LODOP.PRINT();
        })
        .catch((err) => {
          console.error("lodop异常", err);
          alert("请检查LODOP打印控件是否安装并启动");
        });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .contentHtml {
  > table {
    width: 96% !important;
    margin-left: 2%;
  }
}
</style>
