<template>
    <div>
    <!-- 打印发货单 -->
      <div class="pdfBox">
        <div
          class="page pdfidCalss"
          id="pdfid"
          :index="i"
          v-for="(item,i) in big_arrs"
          :key="i"
        >
          <div class="top_title">
            <img :src="printOrderTitle"/>
          </div>

          <div class="supplier_info">
            <table>
              <tr>
                <td>
                  <img :src="orderInfo.brandLogo?orderInfo.brandLogo +'?x-oss-process=image/resize,h_60,w_60':''" />
                  {{orderInfo.brandName}}发货单</td>
              </tr>
            </table>
          </div>
          <div class="order_info"><span class="order_number">订单编号：{{orderInfo.orderCode}}</span><span>订单日期：{{orderInfo.addDate}}</span></div>

          <div
            class="div_info"
            style="border-bottom:none"
          >
            <div class="left_info">
              <h4>收货方</h4>
              <p>
                <span class="til_span tesu_span">收&nbsp;货&nbsp;人：</span><span class="text_span">{{orderInfo.receiver}}</span>
              </p>
              <p>
                <span class="til_span">收货电话：</span><span class="text_span">{{orderInfo.phone}}</span>
              </p>
              <p><span class="til_span">收货地址：</span><span class="text_span text_span_add">{{orderInfo.address}}</span></p>
            </div>
            <div class="right_info">
              <h4>寄货方</h4>
              <p>
                <span class="til_span">公司名称：</span><span class="text_span">{{orderInfo.receiver}}</span>
              </p>
              <p>
                <span class="til_span">售后电话：</span><span class="text_span">{{orderInfo.receiver}}</span>
              </p>
              <p><span class="til_span">售后地址：</span><span class="text_span text_span_add">{{orderInfo.receiver}}</span></p>
            </div>
          </div>
          <div
            class="div_info"
            style="border-top:none;padding-bottom:.5cm;"
          >
            <div class="left_info">
              <h4>经销商(市代要求发送物流)</h4>
              <p>
                <span class="til_span">物流公司名称:</span>
                <span class="text_span">{{orderInfo.logisticsCompanyName}}</span>
              </p>
              <p>
                <span class="til_span">物流公司电话:</span>
                <span class="text_span">{{orderInfo.logisticsMobilePhone}}</span>
              </p>
              <p>
                <span class="til_span">物流公司地址:</span>
                <span class="text_span text_span_add text_span_add1">{{orderInfo.logisticsAddress}}</span>
              </p>
              <p>
                <span class="til_span">物流备注:</span>
                <span class="text_span text_span_add">{{orderInfo.logisticsRemarks}}</span>
              </p>
            </div>
            <div class="right_info">
              <h4>供货商实发物流</h4>
              <p>
                <span class="til_span">物流公司:</span>
                <span class="text_span">{{orderInfo.logisticsName}}</span>
              </p>
              <p>
                <span class="til_span">物流单号:</span>
                <span class="text_span">{{orderInfo.invoiceNo}}</span>
              </p>
              <p>
                <span class="til_span">发货件数:</span>
                <span class="text_span">{{orderInfo.deliverQty}}</span>
              </p>
            </div>
          </div>
          <div class="table_wrap">
            <table>
              <thead>
                <tr>
                  <th class="t-1">序号</th>
                  <th class="t-2">图片</th>
                  <th class="t-3">商品信息</th>
                  <th class="t-4">商品备注</th>
                  <th class="t-5">数量</th>
                </tr>
              </thead>
              <tbody>
                  <tr
                    v-for="(subItem,index) in item"
                    :key="i+'-'+index"
                  >
                    <td
                      class="t-1"
                      v-text="(index + 1+(5*i))"
                    ></td>
                    <td class="t-2">
                      <img :src="subItem.goodsImg?subItem.goodsImg+'?x-oss-process=image/resize,h_60,w_60' :''" />
                    </td>
                    <td class="t-3">
                      <span v-text="subItem.goodsInfo"></span>
                    </td>
                    <td class="t-4">
                      <span v-text="subItem.remark"></span>
                    </td>
                    <td class="t-5">
                      <span v-text="subItem.count"></span>
                    </td>
                  </tr>
                  <tr
                    v-for="(subItem,index) in (item.length%5==0?0:5-item.length%5)"
                    :key="index"
                  >
                    <td
                      class="t-1"
                      v-text="(index+item.length%5)+1+(5*i)"
                    ></td>
                    <td class="t-2"></td>
                    <td class="t-3">
                      <span></span>
                    </td>
                    <td class="t-4"><span></span></td>
                    <td class="t-5"></td>
                  </tr>
                <tr>
                  <td colspan="4">本页小计</td>
                  <td>{{item | orderCounTotal}}</td>
                </tr>
                <tr>
                  <td
                    colspan="5"
                    class="remark"
                  >
                    <em>订单备注：</em>
                    <span>
                    </span>
                  </td>
                </tr>
                <tr>
                  <td
                    colspan="5"
                    class="count"
                  >商品数量合计：<span class="pad_right">{{orderInfo.details.length}}</span>件</td>
                </tr>
              </tbody>
            </table>

          </div>
          <div class="footer_div">
            本页为第<span>{{i + 1}}</span>页<em></em>共<span>{{big_arrs.length>0?big_arrs.length:''}}</span>页
          </div>
        </div>

      </div>
    </div>
</template>
<script>
import html2Canvas from "html2canvas";
import jspdf from "jspdf";
export default {
    data(){
        return{
            pageurl:[],
        }
    },
    props:{
        big_arrs:{
            type:Array,
            default:[]
        },
        orderInfo:{
            type:Object,
            default:{}
        },
        printOrderTitle:{
            type:String,
            default:''
        }
    },
    methods:{
        makepdf() {
      for (
        var ii = 0;
        ii < document.body.querySelectorAll(".pdfidCalss").length;
        ii++
      ) {
        this.creatImg(document.body.querySelectorAll(".pdfidCalss")[ii], ii);
      }
    },
    creatImg(obj, ii) {
      var opts = {
        scale: 4,
        // dpi:300,
        useCORS: true
        // logging:true
        // allowTaint:true
      };
      html2Canvas(obj, opts).then(canvas => {
            var contentWidth = canvas.width;
            var contentHeight = canvas.height;
            var pageHeight = (contentWidth / 592.28) * 841.89;
            var leftHeight = contentHeight;
            //页面偏移
            var position = 0;
            //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
            var imgWidth = 595.28;
            var imgHeight = (595.28 / contentWidth) * contentHeight;

            var pageData = canvas.toDataURL("image/jpeg", 1.0);

            this.pageurl.push({ pageData: pageData, index: ii });
            if (
            this.pageurl.length ==
            document.body.querySelectorAll(".pdfidCalss").length
            ) {
            var pdf = new jspdf("", "pt", "a4");

            this.pageurl = this.pageurl.sort(function compare(a, b) {
                return a.index - b.index;
            });
            pdf.internal.scaleFactor = 1.33;

            for (var iii = 0; iii < this.pageurl.length; iii++) {
                pdf.addImage(
                this.pageurl[iii]["pageData"],
                "JPEG",
                0,
                position + 0,
                imgWidth,
                imgHeight
                );
                if (iii < this.pageurl.length - 1) {
                pdf.addPage();
                }
            }

            pdf.save(`发货单.pdf`);
            }
        });
        },
    },
    filters: {
        orderCounTotal: function(arr) {
            var sum = 0;
            for(var i=0;i<arr.length;i++){
            sum+=arr[i]['count'];
            }
        return sum;
        }
    },
}
</script>
<style lang="sass" scoped>
@import "@/assets/styles/printOrder.scss";
</style>
