<template>
  <div ref="mybox" class="print-box">
    <div style="padding: 20px 80px">
      <template v-for="(item, index) in order_list">
        <div
          :id="'print' + index"
          :key="index"
          style="page-break-after: always"
        >
          <PrintingPage :order-detail="item"></PrintingPage>
        </div>
      </template>
    </div>
    <div v-if="!is_print" style="text-align: center">
      <!-- v-print="'#printTest'"-->
      <el-button type="primary" @click="printConfirm">确认打印</el-button>
    </div>
  </div>
</template>

<script>
  import { getOrderInfoByIds } from "@/api/Order";
  // import { PrintNumPrintIncr } from "@/api/common";
  import PrintingPage from "../components/PrintingPage.vue";
  export default {
    name: "OrderPrinting",
    components: {
      PrintingPage,
    },
    data() {
      return {
        is_print: false,
        order_list: [],
        tableData: [],
        add_form: {},
        self_label: "",
        meal_id: 1,
        info_list: {},
        ids: "",
      };
    },
    created() {
      this.ids = this.$route.query.ids.split(",");
      this.getOrderInfoByIds();
    },
    methods: {
      printConfirm() {
        this.is_print = true;
        setTimeout(function () {
          window.print(); //打印
          window.close(); //关闭窗口
        }, 100);
      },
      async getOrderInfoByIds() {
        const data = await getOrderInfoByIds({
          ids: this.ids,
        });

        this.order_list = 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>
