<template>
  <vxe-modal :value="value" width="600" title="标签打印" @close="close">
    <template #default>
      <div
        v-if="totalNum > 0"
        style="margin: 20px 0; max-height: 400px; overflow: auto"
      >
        <div
          v-for="(num, numi) in totalNum"
          :id="'printDiv' + totalNum + numi"
          :key="numi"
          style="page-break-after: always; margin-top: 4px"
        >
          <table
            border="1"
            style="
              margin: 0 auto;
              width: 70mm;
              border-collapse: collapse;
              color: #000000;
              border-color: #000000;
            "
          >
            <tr>
              <td style="width: 15mm">收货人</td>
              <td>
                <span v-if="order_detail.deliveryType === 2">
                  {{ order_detail.customerName }}
                </span>
                <span v-else>
                  {{ order_detail.receiveData.realName || "--" }}
                </span>
              </td>
            </tr>
            <tr>
              <td>地址</td>
              <td>
                <span v-if="order_detail.deliveryType === 2">上门自提</span>
                <span v-else-if="order_detail.receiveData.area">
                  {{ order_detail.receiveData.area.provinceName }}-{{
                    order_detail.receiveData.area.cityName
                  }}-{{ order_detail.receiveData.area.districtName }}-{{
                    order_detail.receiveData.address
                  }}
                </span>
              </td>
            </tr>
            <tr>
              <td>标签</td>
              <td>
                <span style="font-weight: bold">
                  {{ orderId }}-{{ totalNum }}-{{ numi + 1 }}
                </span>
              </td>
            </tr>
            <tr>
              <td colspan="2">
                <span>{{ enterprise.enterpriseName }}</span>
                <br />
                <span>客服电话:{{ order_detail.shopMobile }}</span>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div style="text-align: center">
        <!--        <el-button v-print="'#printid'" type="primary">打印</el-button>-->
        <el-button type="primary" @click="handlePrint">打印</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script>
  import { getOrderInfoById } from "@/api/Order";
  import { mapGetters } from "vuex";
  export default {
    name: "TagPrint",
    model: {
      prop: "value",
      change: "change",
    },
    props: {
      value: {
        type: Boolean,
        default: false,
      },
      orderId: {
        type: [Number, String],
        default: "",
      },
      userCenterId: {
        type: [Number, String],
        default: "",
      },
    },
    data() {
      return {
        order_detail: {
          goodsData: [],
        },
      };
    },
    computed: {
      ...mapGetters({
        enterprise: "MUser/enterprise",
      }),
      totalNum() {
        if (!this.order_detail.goodsData.length) {
          return 0;
        } else if (this.order_detail.goodsData.length === 1) {
          if (this.order_detail.goodsData[0].isEq === 5) {
            return (
              Number(this.order_detail.goodsData[0].u_1_buy) ||
              Number(this.order_detail.goodsData[0].otherNum)
            );
          } else {
            return Number(this.order_detail.goodsData[0].buyNum);
          }
        } else {
          let sum = 0;
          for (let i in this.order_detail.goodsData) {
            const item = this.order_detail.goodsData[i];
            //抄码商品 计算件
            if (item.isEq === 5) {
              sum = this.$NP.plus(sum, item.u_1_buy || item.otherNum);
            } else {
              sum = this.$NP.plus(sum, item.buyNum);
            }
          }
          return sum;
        }
      },
    },
    mounted() {
      this.getOrderInfoById();
    },
    methods: {
      close() {
        this.$emit("close");
      },
      async getOrderInfoById(row) {
        const { data } = await getOrderInfoById(this.userCenterId, {
          orderId: this.orderId,
        });
        this.order_detail = data;
      },
      handlePrint() {
        var newWin = window.open(""); //新打开一个空窗口
        for (var i = 0; i < this.totalNum; i++) {
          var imageToPrint = document.getElementById(
            "printDiv" + this.totalNum + i
          ); //获取需要打印的内容
          newWin.document.write(imageToPrint.outerHTML); //将需要打印的内容添加进新的窗口
        }
        const styleSheet = `<style>li{list-style:none}</style>`;
        newWin.document.head.innerHTML = styleSheet; //给打印的内容加上样式
        newWin.document.close(); //在IE浏览器中使用必须添加这一句
        newWin.focus(); //在IE浏览器中使用必须添加这一句
        setTimeout(function () {
          newWin.print(); //打印
          newWin.close(); //关闭窗口
        }, 100);
      },
    },
  };
</script>

<style scoped lang="scss">
  .prit-out {
    /*height: 50mm;*/
    text-align: center;
  }
  .prit-ul {
    border: 1px solid #000000;
    width: 70mm;
    height: 50mm;
    overflow: hidden;
    .prit-li {
      border-bottom: 1px solid #000000;
      &:last-child {
        border-bottom: 0;
      }
      line-height: 80px;
      .label {
        height: 10mm;
        line-height: 10mm;
        float: left;
        width: 30%;
        text-align: center;
        border-right: 1px solid #000000;
        vertical-align: middle;
      }
      .value {
        line-height: 10mm;
        height: 10mm;
        float: left;
        width: 70%;
        font-size: 14px;
        vertical-align: middle;
        padding: 0 10px;
      }
    }
  }
</style>
