<template>
  <el-row>
    <div v-html="contentHtml" id="html2canvas-container" class="contentHtml"></div>
    <el-row v-if="currRow.status === 2 && type === 'previewBill'" style="text-align: center;">
      <el-button type="primary" @click="download">{{$t('下载')}}</el-button>
      <el-button type="primary" @click="print">{{$t('打印')}}</el-button>
      <el-button type="primary" @click="update">{{$t('刷新提单文件')}}</el-button>
    </el-row>
  </el-row>
</template>

<script>
import lodop from "@/utils/lodop";
import * as _BOX from "@/api/ecw/box";
import FileSaver from "file-saver";
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";
import {uploadFile} from '@/api/infra/file'
import {updateAirBill} from "@/api/ecw/box";

export default {
  name: "previewBill",
  props: {
    contentHtml: String,
    currRow: Object,
    type: String,
    // 是否是空运
    air: Boolean,
  },
  methods: {
    // 刷新提单
    update(){
      if(this.air){
        let loading = this.$loading()
        return updateAirBill(this.currRow.orderId).then(res => {
          this.$message.success(this.$t('刷新成功'))
        }).finally(() => {
          loading.close()
        })
      }
      this.createPdf()
    },
    download() {
      _BOX["downloadBillService"]({ id: this.currRow.id }).then((res) => {
        if (res.data && res.data.imgUrl) {
          FileSaver.saveAs(res.data.imgUrl + '?' + Math.random(), res.data.imgUrl.split('/').pop());
        }
      });
    },
    createPdf(){
      let loading = this.$loading()
      const doc = new jsPDF('p','pt','a4',true);
      html2canvas(document.querySelector("#html2canvas-container"), {dpi:144, useCORS: true}).then(canvas => {
        const imgWidth = canvas.width
        const imgHeight = canvas.height
        let _w = 595.28;
		    let _h = 595.28/imgWidth*imgHeight;
        if(_h>841.89){
          _h = 841.89;
          _w = _h/imgHeight*imgWidth
        }
        const _left = (595.28-_w)/2;
        doc.addImage(canvas, 'PNG', _left, 0, _w,_h, '', 'FAST');

        return _BOX["downloadBillService"]({ id: this.currRow.id })

      }).then(res => {
        let form = new FormData()
        let pathname = (new URL(res.data.imgUrl)).pathname
        let fileName = pathname.substring(pathname.lastIndexOf('/')).substring(1)
        let selfNo = fileName.split('-')[0]
        form.append('file', new File([doc.output('arraybuffer')], fileName, {type: 'application/pdf'}))
        form.append('path', `admin/shipment/${selfNo}/pdf/${fileName}`) // 最前面不能有/，否则返回的url会有两个/

        return uploadFile(form)
      }).then(res => {
        _BOX['updateUrl']({id: this.currRow.id, imgUrl: res.data})
      }).finally(res => {
        loading.close()
      })
    },
    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(this.$t("请检查LODOP打印控件是否安装并启动"));
        });
    },
  },
};
</script>

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