import { getOrderDetail } from "@/api/order";
import { hiprint } from "vue-plugin-hiprint";
export default {
  methods: {
    // 内部打印
    async toPrintneibu(row, preView) {
      const { data } = await getOrderDetail({
        orderId: row.orderId,
      });
      // 初始化模板，否则生成的模板叠加
      hiprint.init();
      this.hiprintTemplate = new hiprint.PrintTemplate();
      // 使用 i-- 提升for效率
      this.$startLoading();
      try {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1; // 月份是从 0 开始计数的，所以要加 1
        let day = now.getDate();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        let totalAmount = data.orderDetails
          .map((item) => {
            return Number(item.num) * Number(item.price);
          })
          .reduce((prev, cur, index, arr) => {
            return prev + cur;
          }, 0);
        let yunfei = data.orderDetails
          .map((item) => {
            return Number(item.freight);
          })
          .reduce((prev, cur, index, arr) => {
            return prev + cur;
          }, 0);
        // 模板基础配置
        this.panel = this.hiprintTemplate.addPrintPanel({
          height: 140,
          width: 241,
          fontFamily: "黑体",
          fontSize: 13,
          paperFooter: 340,
          paperHeader: 10,
          paperNumberDisabled: true,
        });
        // 获取收款单模板和基础配置
        this.panel.addPrintHtml({
          options: {
            width: 633,
            top: 30,
            left: 20,
            fontFamily: "黑体",
            fontSize: 13,
            content: `
              <div style="font-family:'黑体';font-size: 16px;">
                <div style="display: flex;justify-content: center;align-items: center;position: relative;">
                  <h1 style="text-align:center;margin: 10px 0;">销售出货单</h1>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">订单编号: ${data.orderId || ""}</div>
                  <div style="width:50%">下单时间: ${
                    data.createTime || ""
                  }</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">收货人信息: ${
                    data.receUserName || ""
                  }</div>
                  <div style="width:50%">用户姓名: ${data.buyerName || ""}</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">收货地址: ${
                    data.province +
                    data.city +
                    data.area +
                    data.street +
                    data.receAddress +
                    data.houseNo
                  }</div>
                  <div style="width:50%">用户电话: ${
                    data.buyerMobile || ""
                  }</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">销售员: ${data.workerName || ""}</div>
                  <div style="width:50%">用户身份证: ${
                    data.buyerIdCard || ""
                  }</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">网点信息: ${
                    data.websitName || ""
                  }</div>
                  <div style="width:50%">云闪付订单号: ${
                    data.transactionId || ""
                  }</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div style="width:50%">下单渠道: ${data.source || ""}</div>
                  <div style="width:50%">国补金额: ${
                    data.couponMerchantContribute || ""
                  }</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div >支付方式: ${data.payType || ""}</div>
                </div>
                <div >
                  <table border=".5" cellspacing="0" width="856" style="border-color: rgb(0,0,0);border-collapse: collapse;border-style: none;border: 1px solid rgb(0,0,0);font-weight: normal;text-decoration: none;vertical-align: middle;box-sizing: border-box;word-wrap: break-word;word-break: break-all;">
                    <tr align="center">
                      <td>商品信息</td>
                      <td>单位</td>
                      <td>数量</td>
                      <td>单价</td>
                      <td>金额</td>
                      <td>运费</td>
                    </tr>
                    ${data.orderDetails.map((item) => {
                      return `
                      <tr align="center">
                        <td>${item.goodsName || ""}</td>
                        <td>台</td>
                        <td>${item.num}</td>
                        <td>${item.price}</td>
                        <td>${Number(item.num) * Number(item.price)}</td>
                        <td>${item.freight}</td>
                      </tr>
                    `;
                    })}
                    <tr>
                      <td colspan="4">小计: </td>
                      <td align="center">${totalAmount}</td>
                      <td align="center">${yunfei}</td>
                    </tr>
                    <tr>
                      <td colspan="6">备注: ${data.remark || ""}</td>
                    </tr>
                  </table>
                </div>
                <div style="display: flex;justify-content: flex-end;">
                </div>
                <div style="margin:100px 0 0 0">
                  <div></div>
                </div>
              </div>`,
          },
        });
      } catch (error) {
        this.$endLoading();
        return;
      }
      this.$endLoading();
      // 预览打印内容
      preView.show(this.hiprintTemplate, this.panel);
    },

    // 外部打印
    async toPrintwaibu(row, preView) {
      const { data } = await getOrderDetail({
        orderId: row.orderId,
      });
      // 初始化模板，否则生成的模板叠加
      hiprint.init();
      this.hiprintTemplate = new hiprint.PrintTemplate();
      // 使用 i-- 提升for效率
      this.$startLoading();
      try {
        let now = new Date();
        let year = now.getFullYear();
        let month = now.getMonth() + 1; // 月份是从 0 开始计数的，所以要加 1
        let day = now.getDate();
        let hours = now.getHours();
        let minutes = now.getMinutes();
        let seconds = now.getSeconds();
        let totalAmount = data.orderDetails
          .map((item) => {
            return Number(item.num) * Number(item.price);
          })
          .reduce((prev, cur, index, arr) => {
            return prev + cur;
          }, 0);
        let num = data.orderDetails
          .map((item) => {
            return Number(item.num);
          })
          .reduce((prev, cur, index, arr) => {
            return prev + cur;
          }, 0);
        let html = data.orderDetails.map((item) => {
          return `
          <tr align="center">
            <td>${item.goodsName || ""}</td>
            <td>${item.goodsSpecName || ""}</td>
            <td>台</td>
            <td>${item.num}</td>
            <td>${item.price}</td>
            <td>${Number(item.num) * Number(item.price)}</td>
          </tr>
        `;
        });
        // 模板基础配置
        this.panel = this.hiprintTemplate.addPrintPanel({
          height: 140,
          width: 241,
          fontFamily: "黑体",
          fontSize: 13,
          paperFooter: 340,
          paperHeader: 10,
          paperNumberDisabled: true,
        });
        // 获取收款单模板和基础配置
        this.panel.addPrintHtml({
          options: {
            width: 633,
            top: 30,
            left: 20,
            fontFamily: "黑体",
            fontSize: 13,
            content: `
              <div style="font-family:'黑体';font-size: 16px;">
                <div style="display: flex;justify-content: center;align-items: center;position: relative;">
                  <h1 style="text-align:center;margin: 10px 0;">
                    ${
                      JSON.parse(localStorage.getItem("greemall_user"))
                        ?.billTitle || data.companyName
                    }销售单
                  </h1>
                  <div style="position: absolute;right:0;">共 ${1}页 第 ${1} 页</div>
                </div>
                <div style="display: flex;justify-content: space-between;">
                  <div>打印日期: ${`${year}-${
                    month < 10 ? "0" + month : month
                  }-${day < 10 ? "0" + day : day} ${
                    hours < 10 ? "0" + hours : hours
                  }:${minutes < 10 ? "0" + minutes : minutes}:${
                    seconds < 10 ? "0" + seconds : seconds
                  }`}</div>
                  <div>单据日期: ${data.createTime}</div>
                  <div>单据编号: ${data.orderId}</div>
                </div>
                <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
                  <div>客户: ${data.receUserName}</div>
                  <div>摘要: ${data.payType}</div>
                </div>
                <div style="display: flex;font-size: 16px;margin-bottom: 10px;">
                  <div style="flex-shrink: 0;">联系电话: ${data.recePhone}</div>
                  <div style="margin-left: 50px;">收货地址: ${
                    data.province +
                    data.city +
                    data.area +
                    data.street +
                    data.receAddress +
                    data.houseNo
                  }</div>
                </div>
                <div >
                  <table border=".5" cellspacing="0" width="856" style="border-color: rgb(0,0,0);border-collapse: collapse;border-style: none;border: 1px solid rgb(0,0,0);font-weight: normal;text-decoration: none;vertical-align: middle;box-sizing: border-box;word-wrap: break-word;word-break: break-all;">
                    <tr align="center">
                      <td>商品名称</td>
                      <td>规格</td>
                      <td>单位</td>
                      <td>数量</td>
                      <td>单价</td>
                      <td>金额</td>
                    </tr>
                    ${html}
                    <tr align="center">
                      <td>小计: </td>
                      <td></td>
                      <td></td>
                      <td>${num}</td>
                      <td></td>
                      <td>金额总计: ${totalAmount}</td>
                    </tr>
                  </table>
                </div>
                <div style="display: flex;justify-content: space-between;font-size: 16px;margin: 10px 0;">
                  <div>制单人: ${
                    JSON.parse(localStorage.getItem("greemall_user"))
                      ?.nickName || ""
                  }</div>
                  <div>审核人: </div>
                  <div>业务员: </div>
                  <div>签收人: </div>
                </div>
                <div style="display: flex;justify-content: flex-end;">
                </div>
                <div style="margin:100px 0 0 0">
                  <div></div>
                </div>
              </div>`,
          },
        });
      } catch (error) {
        this.$endLoading();
        return;
      }
      this.$endLoading();
      // 预览打印内容
      preView.show(this.hiprintTemplate, this.panel);
    },
  },
};
