<template>
  <div ref="mybox" class="print-box">
    <div style="padding: 20px 80px">
      <div id="printTest">
        <PrintingPage :order-detail="orderDetail"></PrintingPage>
      </div>
    </div>
    <div style="text-align: center">
      <el-button
        v-print="'#printTest'"
        type="primary"
        @click="PrintNumPrintIncr"
      >
        确认打印（已打印{{ orderDetail.printingNum || 0 }}次）
      </el-button>
    </div>
  </div>
</template>

<script>
  import { getOrderInfoById } from "@/api/Order";
  import { PrintNumPrintIncr } from "@/api/common";
  import PrintingPage from "../components/PrintingPage.vue";
  export default {
    name: "OrderPrinting",
    components: {
      PrintingPage,
    },
    data() {
      return {
        orderDetail: {
          goodsData: [],
        },
        tableData: [],
        add_form: {},
        self_label: "",
        form_obj: {
          basic: [],
          fiance: [],
          goods: [],
          other: [],
        },
        meal_id: 1,
        info_list: {},
      };
    },
    created() {
      this.getOrderInfoById();
    },
    methods: {
      async PrintNumPrintIncr() {
        const data = await PrintNumPrintIncr({
          objectNo: this.orderDetail.no,
          objectType: this.orderDetail.orderType,
        });
        this.orderDetail.printingNum += 1;
        setTimeout(() => {
          window.close();
        }, 1000);
      },
      async getOrderInfoById() {
        const data = await getOrderInfoById(this.$route.params.userCenterId, {
          orderId: this.$route.params.id,
        });

        this.orderDetail = data.data;
      },
    },
  };
</script>

<style scoped lang="scss">
  .tem-row {
    padding: 20px 80px;
    position: relative;
  }
  .tem-img {
    width: 100%;
  }
  .infomation {
    font-size: 14px;
  }
  .sign {
    margin-top: 6px;
    font-size: 14px;
  }
  .add_num {
    margin-right: 10px;
    font-size: 14px;
  }

  .print-tag {
    position: absolute;
    right: 190px;
    top: 0;
    img {
      width: 120px;
    }
  }
  .top_view {
    position: relative;
    height: 34px;
  }
  .time_view {
    position: absolute;
    left: 0;
    top: 0;
  }
  .name_view {
    text-align: center;
    font-size: 22px;
  }
  .num_view {
    position: absolute;
    right: 0;
    top: 0;
  }
</style>
