<template>
  <div>
    <!-- 新订单 -->
    <div class="detail_cont">
      <template v-if="orderDetail.waimaiOrderId && orderDetail.detailItems">
        <div class="detail_title2">商品详情</div>
        <div class="shop_detail" v-for="(item,i) in orderDetail.detailItems" :key="i">
          <div class="info">
            <el-image v-if="item.foodPic" class="img" :src="item.foodPic" :preview-src-list="showPreview">
            </el-image>
            <img v-else class="img" src="../../../static/image/empty-img.png" alt="" srcset="">
            <div class="shop_title">{{item.foodName}}</div>
          </div>
          <div class="shop_num">x{{item.quantity}}</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="!orderDetail.waimaiOrderId">
        <div class="detail_title2">商品详情</div>
        <div class="info2 info4">
          <div class="title">物品类型：</div>
          <div class="cont">{{orderDetail.productName}}</div>
        </div>
        <div class="info2 info4">
          <div class="title">物品重量：</div>
          <div class="cont">{{orderDetail.weight}}KG</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="orderDetail.cardInfo">
        <div class="info2">
          <div class="title">贺卡内容：</div>
          <div class="cont cont1">{{initCardInfo(orderDetail.cardInfo)}}</div>
        </div>
        <div class="card" v-if="$store.state.userInfo.isOpenCardPrint">
          <div @click="showPrintCard" class="print-card">打印贺卡{{orderDetail.cardPrintNum ? `(${orderDetail.cardPrintNum})` : ''}}</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="orderDetail.caution || orderDetail.takeRemark">
        <div class="info2" v-if="orderDetail.caution">
          <div class="title">用户备注：</div>
          <div class="cont cont1">{{orderDetail.caution}}</div>
        </div>
        <div class="info2 info3" v-if="orderDetail.takeRemark">
          <div class="title">发单备注：</div>
          <div class="cont cont1">{{orderDetail.takeRemark}}</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="orderDetail.invoiceTitle || orderDetail.taxpayerId">
        <div class="detail_title2">发票信息</div>
        <div class="info2 info4" v-if="orderDetail.invoiceTitle">
          <div class="title">发票抬头：</div>
          <div class="cont">{{orderDetail.invoiceTitle}}</div>
        </div>
        <div class="info2 info4" v-if="orderDetail.taxpayerId">
          <div class="title">税号：</div>
          <div class="cont">{{orderDetail.taxpayerId}}</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="orderDetail.sendAddress || orderDetail.receiptAddress">
        <div class="detail_title2">地址信息</div>
        <div class="info2 info4" v-if="orderDetail.sendAddress">
          <div class="title">{{orderDetail.outOrderId ? '发货门店：' : '发货地址：'}}</div>
          <div class="cont">{{orderDetail.sendAddress}}</div>
        </div>
        <div class="info2 info4" v-if="orderDetail.receiptAddress">
          <div class="title">收货地址：</div>
          <div class="cont">{{orderDetail.receiptAddress}}</div>
        </div>
        <div class="detail_ine"></div>
      </template>
      <template v-if="orderDetail.receiptContactName">
        <div class="detail_title2">顾客信息</div>
        <div class="info2 info4">
          <div class="title">姓名：</div>
          <div class="cont">{{orderDetail.receiptContactName}}</div>
        </div>
        <template v-if="orderDetail.waimaiOrderId">
          <div class="info2 info4" v-if="orderDetail.receiptPhone">
            <div class="title">隐私号：</div>
            <div class="cont">{{orderDetail.receiptPhone}}</div>
          </div>
          <div class="info2 info4" v-if="orderDetail.receiptPrivacyPhone">
            <div class="title">手机号：</div>
            <div class="cont">{{orderDetail.receiptPrivacyPhone}}</div>
          </div>
        </template>
        <template v-else>
          <div class="info2 info4" v-if="orderDetail.receiptPhone">
            <div class="title">手机号：</div>
            <div class="cont">{{orderDetail.receiptPhone}}{{orderDetail.receiptExtension ? "_" + orderDetail.receiptExtension : ""}}</div>
          </div>
        </template>
      </template>
      <div class="detail_ine"></div>
      <div class="detail_title2">订单金额</div>
      <!-- <div class="info2 info4">
        <div class="title">商品金额：</div>
        <div class="cont">{{orderDetail.productAmount ? '¥' + orderDetail.productAmount : '--'}}</div>
      </div> -->
      <div class="info2 info4">
        <div class="title">顾客实付：</div>
        <div class="cont">{{orderDetail.productAmount ? '¥' + orderDetail.productAmount : '--'}}</div>
      </div>
      <!-- <div class="info2 info4">
        <div class="title">商户实收：</div>
        <div class="cont">{{orderDetail.productAmount ? '¥' + orderDetail.productAmount : '--'}}</div>
      </div> -->
      <div class="detail_ine"></div>
      <div class="detail_title2">订单信息</div>
      <div class="info2 info4" v-if="orderDetail.waimaiOrderId">
        <div class="title">期望送达时间：</div>
        <div class="cont cont2">{{ exceptTimeFn()}}</div>
      </div>
      <div class="info2 info4" v-if="orderDetail.deliveryTime && buttonStatus === 10 && !orderDetail.waimaiOrderId">
        <div class="title">预约发单时间：</div>
        <div class="cont cont2">{{ orderDetail.deliveryTime}}</div>
      </div>
      <div class="info2 info4" v-if="!orderDetail.waimaiOrderId && buttonStatus !== 10">
        <div class="title">取件时间：</div>
        <div class="cont cont2">{{ !orderDetail.takeType ? '立即取件' : orderDetail.takeTime}}</div>
      </div>
      <div class="info2 info4" v-if="orderDetail.waimaiOrderId">
        <div class="title">外卖下单时间：</div>
        <div class="cont">{{orderDetail.orderTime}}</div>
      </div>
      <div class="info2 info4" v-if="orderDetail.createTime && !orderDetail.waimaiOrderId">
        <div class="title">订单创建时间：</div>
        <div class="cont">{{orderDetail.createTime}}</div>
      </div>
      <div class="info2 info4" v-if="orderDetail.orderSn">
        <div class="title">订单编号：</div>
        <div class="cont">{{orderDetail.orderSn}}</div>
      </div>
      <div class="info2 info4" v-if="orderDetail.outOrderId">
        <div class="title">{{takeOUtType(orderDetail.orderType)}}订单编号：</div>
        <div class="cont">{{orderDetail.outOrderId}}</div>
      </div>
    </div>
    <!-- 打印贺卡 -->
    <div class="wrap-card" @click="dialogVisible=false" v-show="dialogVisible">
      <div @click.stop="" class="print-con" :style="`width:${this.params.cardWidth+10}mm;`">
        <div class="print-head">
          <div class="but-item" :class="[fontSize >= 50?'disabled':'']" @click="fontEnlarge">
            <img class="img" src="../../../static/image/icon-big.png" alt="">
            <div class="name">放大</div>
          </div>
          <div class="but-item" :class="[fontSize<=16?'disabled':'']" @click="fontNarrow">
            <img class="img" src="../../../static/image/icon-small.png" alt="">
            <div class="name">缩小</div>
          </div>
          <div class="but-item" @click="fontLeft">
            <img class="img" src="../../../static/image/icon-left.png" alt="">
            <div class="name">居左</div>
          </div>
          <div class="but-item" @click="fontCenter">
            <img class="img" src="../../../static/image/icon-center.png" alt="">
            <div class="name">居中</div>
          </div>
          <div class="but-item" @click="fontRight">
            <img class="img" src="../../../static/image/icon-right.png" alt="">
            <div class="name">居右</div>
          </div>
          <div class="but-item" @click="resetPrint">
            <img class="img" src="../../../static/image/icon-reset.png" alt="">
            <div class="name">恢复</div>
          </div>
          <div class="but-item" @click="print">
            <img class="img" src="../../../static/image/icon-print.png" alt="">
            <div class="name name1">打印</div>
          </div>
        </div>
        <div class="print-html">
          <i class="el-icon-arrow-down icon1" :style="`top:${params.paddingTop}mm;left:${params.paddingLeft}mm;`"></i>
          <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
          <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
          <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
          <div ref="html" v-html="printHtml"></div>
        </div>
      </div>
    </div>
  </div>

</template>
    
<script>
import { cloudPrint, printConfig } from "../../api/shop";
import bus from "../../common/bus.js";
export default {
  name: "OrderDetail",
  data() {
    return {
      dialogVisible: false,
      printContent: "",
      fontSize: 26,
      textAlign: "center",
      params: {
        cardWidth: 210,
        cardHeight: 297,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
        direction: 1, // 1：竖向 2：横向左 3：横向右
        fontFamily: "FangZhengKaiTi",
        shopIdList: [0],
        sizeType: 9, // 纸张尺寸
      },
    };
  },
  props: {
    buttonStatus: Number,
    orderDetail: Object,
  },
  computed: {
    showPreview() {
      return this.orderDetail.detailItems.map((v) => {
        return v.foodPic;
      });
    },
    printHtml() {
      return `<!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>提交三方打印任务html</title>
                  <style>
                      @font-face {
                          font-family: ${this.params.fontFamily};
                          src: url("https://h5.liebaoai.cn/font/${
                            this.params.fontFamily
                          }.woff2") format('woff2'),
                              url("https://h5.liebaoai.cn/font/${
                                this.params.fontFamily
                              }.woff") format('woff'),
                              url("https://h5.liebaoai.cn/font/${
                                this.params.fontFamily
                              }.ttf") format('truetype');
                          font-weight: normal;
                          font-style: normal;
                      }

                      body {
                          margin: 0;
                          box-sizing: border-box;
                      }

                      .page {
                          height: ${this.params.cardHeight}mm;
                          width: ${this.params.cardWidth}mm;
                          position: relative;
                          box-sizing: border-box;
                      }

                      .box {
                          position: absolute;
                          height: ${this.params.cardHeight}mm;
                          width: ${this.params.cardWidth}mm;
                          top: 0;
                          left: 0;
                          display:flex;
                          ${this.contentStyle(1)[0]}
                      }

                      .card-con {
                          margin-top: ${this.params.paddingTop}mm;
                          margin-right: ${this.params.paddingRight}mm;
                          margin-bottom: ${this.params.paddingBottom}mm;
                          margin-left: ${this.params.paddingLeft}mm;
                          text-align: ${this.textAlign};
                          outline:none;
                          font-family: ${this.params.fontFamily};
                          font-size:${this.fontSize}px;
                          line-height:${this.fontSize + 5}px;
                          ${this.contentStyle(1)[1]}
                      }
                  </style>
              </head>
              <body>
                  <div class="page">
                      <div class="box">
                          <div id="cardCon" class="card-con" contenteditable="true">
                              ${this.printContent}
                          </div>
                      </div>
                  </div>
              </body>
              </html>`;
    },
  },
  methods: {
    exceptTimeFn() {
      let con = this.orderDetail.exceptTime || this.orderDetail.takeDate;
      return con || "立即送达";
    },
    takeOUtType(type) {
      let name = "";
      switch (type) {
        case 1:
          name = "美团";
          break;
        case 2:
          name = "饿了么";
          break;
        case 3:
          name = "饿百";
          break;

        default:
          name = "美团";
          break;
      }
      return name;
    },
    initCardInfo(cardInfo) {
      let info = cardInfo.split("[其他备注]")[0].slice(6);
      return info;
    },
    async showPrintCard() {
      let res = await printConfig({ shopId: this.orderDetail.shopId });
      console.log(res);
      if (res.code !== 200) {
        this.$message.error(res.msg);
        return;
      }
      this.params = res.data;
      this.dialogVisible = true;
      this.printContent = this.initCardInfo(this.orderDetail.cardInfo);
    },
    print() {
      let text = document.getElementById("cardCon").innerText;
      let html = `<!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>提交三方打印任务html</title>
                  <style>
                      @font-face {
                          font-family: ${this.params.fontFamily};
                          src: url("https://h5.liebaoai.cn/font/${
                            this.params.fontFamily
                          }.woff2") format('woff2'),
                              url("https://h5.liebaoai.cn/font/${
                                this.params.fontFamily
                              }.woff") format('woff'),
                              url("https://h5.liebaoai.cn/font/${
                                this.params.fontFamily
                              }.ttf") format('truetype');
                          font-weight: normal;
                          font-style: normal;
                      }

                      body {
                          margin: 0;
                          box-sizing: border-box;
                      }

                      .page {
                          height: ${
                            this.params.direction === 1
                              ? this.params.cardHeight
                              : this.params.cardWidth
                          }mm;
                          width: ${
                            this.params.direction === 1
                              ? this.params.cardWidth
                              : this.params.cardHeight
                          }mm;
                          position: relative;
                          box-sizing: border-box;
                      }

                      .box {
                          position: absolute;
                          height: ${
                            this.params.direction === 1
                              ? this.params.cardHeight - 20
                              : this.params.cardWidth - 10
                          }mm;
                          width: ${
                            this.params.direction === 1
                              ? this.params.cardWidth - 5
                              : this.params.cardHeight - 10
                          }mm;
                          top: ${this.params.direction === 1 ? 2 : 8}mm;
                          left: 0mm;
                          display:flex;
                          ${this.contentStyle(1)[0]}
                      }

                      .card-con {
                          margin-top: ${
                            this.params.direction === 1 &&
                            ["z1", "z4", "z7"].includes(this.params.jpAutoAlign)
                              ? this.params.paddingTop - 10
                              : this.params.paddingTop
                          }mm;
                          margin-right: ${this.params.paddingRight}mm;
                          margin-bottom: ${this.params.paddingBottom}mm;
                          margin-left: ${this.params.paddingLeft}mm;
                          text-align: ${this.textAlign};
                          outline:none;
                          font-family: ${this.params.fontFamily};
                          font-size:${this.fontSize}px;
                          line-height:${this.fontSize + 5}px;
                          ${this.contentStyle(1)[1]}
                      }
                  </style>
              </head>
              <body>
                  <div class="page">
                      <div class="box">
                          <div id="card-con" class="card-con" contenteditable="true">
                              ${text}
                          </div>
                      </div>
                  </div>
              </body>
              </html>`;

      console.log("html:", html);
      let params = {
        orderId: this.orderDetail.orderId,
        shopId: this.orderDetail.shopId,
        jobFile: html,
      };
      cloudPrint(params).then((res) => {
        console.log("云盒打印信息", res);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: `成功发送云盒打印任务！`,
          });
          this.$emit("getDetailOrder");
          this.dialogVisible = false;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    fontEnlarge() {
      if (this.fontSize >= 50) return;
      this.printContent = document.getElementById("card-con").innerHTML;
      this.fontSize += 5;
    },
    fontNarrow() {
      if (this.fontSize <= 16) return;
      this.printContent = document.getElementById("card-con").innerHTML;
      this.fontSize -= 5;
    },
    fontLeft() {
      this.printContent = document.getElementById("card-con").innerHTML;
      this.textAlign = "left";
    },
    fontCenter() {
      this.printContent = document.getElementById("card-con").innerHTML;
      this.textAlign = "center";
    },
    fontRight() {
      this.printContent = document.getElementById("card-con").innerHTML;
      this.textAlign = "right";
    },
    resetPrint() {
      this.fontSize = 26;
      this.textAlign = "center";
    },
    contentStyle(direction) {
      let style = ``;
      let transform = ``;
      if (direction === 1) {
        switch (this.params.jpAutoAlign) {
          case "z1":
            style = `justify-content:flex-start;align-items:flex-start;`;
            break;
          case "z2":
            style = `justify-content:flex-start;align-items:center;`;
            break;
          case "z3":
            style = `justify-content:flex-start;align-items:flex-end;`;
            break;
          case "z4":
            style = `justify-content:center;align-items:flex-start;`;
            break;
          case "z5":
            style = `justify-content:center;align-items:center;`;
            break;
          case "z6":
            style = `justify-content:center;align-items:flex-end;`;
            break;
          case "z7":
            style = `justify-content:flex-end;align-items:flex-start;`;
            break;
          case "z8":
            style = `justify-content:flex-end;align-items:center;`;
            break;
          case "z9":
            style = `justify-content:flex-end;align-items:flex-end;`;
            break;
          default:
            break;
        }
      } else {
        switch (this.params.jpAutoAlign) {
          case "z1":
            style = `justify-content:flex-end;align-items:flex-start;`;
            transform = `transform: translateX(100%) rotate(90deg);transform-origin: left top;`;
            break;
          case "z2":
            style = `justify-content:center;align-items:flex-start;`;
            transform = `transform: translateX(50%) translateY(-50%) rotate(90deg);transform-origin: left;`;
            break;
          case "z3":
            style = `justify-content:flex-start;align-items:flex-start;`;
            transform = `transform: translateY(-100%) rotate(90deg);transform-origin: left bottom;`;
            break;
          case "z4":
            style = `justify-content:flex-end;align-items:center;`;
            transform = `transform: translateX(50%) rotate(90deg);transform-origin: center top;`;
            break;
          case "z5":
            style = `justify-content:center;align-items:center;`;
            transform = `transform: rotate(90deg);`;
            break;
          case "z6":
            style = `justify-content:flex-start;align-items:center;`;
            transform = `transform: translateX(-50%) rotate(90deg);`;
            break;
          case "z7":
            style = `justify-content:flex-end;align-items:flex-end;`;
            transform = `transform: translatey(100%) rotate(90deg);transform-origin: right top;`;
            break;
          case "z8":
            style = `justify-content:center;align-items:flex-end;`;
            transform = `transform: translateX(-50%) translateY(50%) rotate(90deg);transform-origin:right;`;
            break;
          case "z9":
            style = `justify-content:flex-start;align-items:flex-end;`;
            transform = `transform: translateX(-100%) rotate(90deg);transform-origin:right bottom;`;
            break;
          default:
            break;
        }
      }

      return [style, transform];
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="scoped">
.detail_cont {
  width: 100%;
  height: calc(100vh - 250px);
  overflow: auto;
  padding: 16px 16px 100px;
  box-sizing: border-box;
  .detail_title2 {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    margin-bottom: 15px;
  }
  .shop_detail {
    width: 100%;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
    .info {
      flex-grow: 1;
      display: flex;
      align-items: flex-start;
      .img {
        flex-shrink: 0;
        width: 47px;
        height: 47px;
        border-radius: 4px 4px 4px 4px;
        margin-right: 12px;
      }
      .shop_title {
        font-size: 12px;
        font-weight: 500;
        color: #333333;
        line-height: 18px;
      }
    }
    .shop_num {
      margin-left: 10px;
      color: #b1b1b1;
    }
  }
  .detail_ine {
    width: 100%;
    height: 1px;
    border-top: 2px dotted #f0f0f0;
    margin: 16px 0;
  }
  .card {
    display: flex;
    justify-content: flex-end;
    .print-card {
      font-size: 12px;
      width: 80px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      border: 1px solid #fc7200;
      background: #fc7200;
      color: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      margin-bottom: 10px;
    }
  }
  .info2 {
    width: 100%;
    display: flex;
    margin-bottom: 5px;
    .title {
      flex-shrink: 0;
      font-size: 14px;
      font-weight: 400;
      // width: 80px;
      color: #999999;
    }
    .cont {
      font-size: 14px;
      font-weight: 400;
      color: #333333;
      line-height: 20px;
      word-break: break-all;
      text-align: right;
    }
    .cont1 {
      text-align: left;
    }
    .cont2 {
      color: #fc7200;
    }
  }
  .info3 {
    margin-top: 10px;
  }
  .info4 {
    display: flex;
    justify-content: space-between;
  }
}

.wrap-card {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 2004;
  .print-con {
    border: 1px solid #ebe7e7;
    background: #fff;
    margin: 15vh auto 0;
    .print-head {
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #ebe7e7;
      padding: 10px 0;
      .disabled {
        opacity: 0.5;
        cursor: not-allowed !important;
      }
      .but-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        flex: 1;
        .img {
          width: 25px;
          height: 25px;
        }
        .name {
          font-size: 13px;
          font-weight: bold;
          color: #333333;
          margin-top: 5px;
        }
        .name1 {
          color: #fc7200;
        }
      }
    }
    .print-html {
      position: relative;
      padding: 5mm;
      /deep/ .el-icon-arrow-down {
        position: absolute;
        font-size: 30px;
      }
      .icon1 {
        top: 10mm;
        left: 10mm;
        transform: rotate(-45deg);
      }
      .icon2 {
        top: 10mm;
        right: 10mm;
        transform: rotate(45deg);
      }
      .icon3 {
        bottom: 10mm;
        left: 10mm;
        transform: rotate(-135deg);
      }
      .icon4 {
        bottom: 10mm;
        right: 10mm;
        transform: rotate(135deg);
      }
    }
  }
}
</style>
