<template>
  <div>
    <div refs="printPages" v-for="(item, inx) in printList" :key="inx" class="print-area" :class="'item_' + item.OrdersId" style="width:180px;">
      <div style="padding:0px 10px 5px;border-bottom:2px solid #cccccc;">
        <div style="display:inline-block;">
          <img class="topIcon" style="display:block;width:60%;margin:0 0 20px 0px;" src="http://jingcheng-resourceplat.oss-cn-shanghai.aliyuncs.com/upload/111101940020.png" alt="">
          <span style="display:block;font-size:20px;font-weight:700;text-align: center;"> <img width='30px' :src='item.AreaIconWhite' alt=""> {{item.AreaName + item.TableNo}}</span>
        </div>
      </div>
      <div style="padding:10px 10px 5px;border-bottom:1px solid #cccccc;" v-for='(item1,index1) in item.Goods' :key='index1'>
        <div style="font-size:12px;"><span style="display:inline-block;width:75%;text-align:left;">{{item1.GoodsName}}</span><span style="display:inline-block;width:22%;text-align:right;font-size:12px;" v-if='!item1.SpecName'>× {{item1.Number}}</span></div>
        <div style="margin-top:8px;" v-if='item1.SpecName'>
          <span style="display:inline-block;width:75%;text-align:left;color:#cccccc;font-size:12px;">{{item1.SpecName}}</span>
          <span style="display:inline-block;width:20%;text-align:right;font-size:12px;">× {{item1.Number}}</span>
        </div>
      </div>
      <div style="padding:10px 10px 5px;border-bottom:1px solid #cccccc;">
        <div style="font-size:12px;">下单人：{{item.UserName}}</div>
        <span style="display:block;margin-top:10px;font-size:12px;">下单时间：{{toolClass.dateFormat(item.CreateDate)}}</span>
      </div>
      <div style="padding:10px 10px;font-size:12px;">备注：{{item.Remark}}</div>
      <div style="text-align: right;font-size: 12px;">城的空间.城咖啡</div>
      <div style="height:10px"></div>
    </div>
  </div>
</template>

<script>
import { getLodop } from '@/util/LodopFuncs'

export default {
  name: 'orderPrintList',
  props: [
    'printList',
  ],
  data () {
    return {
      lodop: null
    }
  },
  mounted () {
    this.print()
  },
  methods: {
    print () {
      this.lodop = getLodop()
      this.lodop.PRINT_INIT('城咖啡订单')
      this.lodop.SET_PRINT_PAGESIZE(3, 480, 40, '')
      let top = 0
      if (this.printList && this.printList.length > 0) {
        this.printList.forEach((orders) => {
          const el = document.getElementsByClassName('item_' + orders.OrdersId)[0]
          this.lodop.ADD_PRINT_HTM(top, 0, el.offsetWidth, el.offsetHeight, el.innerHTML)
          top = top + el.offsetHeight + 40
        })

        this.lodop.PRINT()

        this.$emit('printed')
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "page.scss";
</style>
