<template>
  <a-modal
    centered
    class="replenishmentManagement-printSticker-modal"
    :footer="null"
    :maskClosable="false"
    title="打印预览"
    v-model="isShow"
    @cancle="isShow = false"
    :width="400">
    <!-- 列表 -->
    <div id="print">
      <div
        v-for="(item,index) in list"
        :key="index"
        class="print-pages"
        style="font-size: 9px;padding:3pt 0 3pt 6pt;">
        <div class="storeName" style="text-align: center;font-weight: bold;margin: 2pt 0;">
          {{ nowData.outStockPersonName }}
        </div>
        <div style="overflow: hidden;">
          <div style="padding-right: 3pt;float: left;">
            <div class="shelfName" style="margin-bottom: 2pt;">
              {{ nowData.shelfInfo.shelfName }}
            </div>
            <div class="productCode" style="font-weight: bold;">{{ item.productCode }}</div>
            <div class="productName">{{ item.product.name }}</div>
            <div class="userName" style="margin-top: 2pt;font-size: 8px;">
              <span style="margin: 0 5pt 0 0;">{{ moment().format('YYYY-MM-DD HH:mm') }}</span>
              <!-- <span>王明</span> -->
            </div>
          </div>
          <div style="float: right;">
            <div class="productSno" style="font-size: 15pt;text-align: center;">{{ item.shelfPlaceCode }}</div>
            <div class="qrcode" ref="qrCodeUrl">
              <vue-qr text="dealerSn=1033242&shelfSn=342326735950757888&productCode=RPF2340&shelfPlaceCode=A01&shelfPlaceSn=123213" :margin="0" :size="60"></vue-qr>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-cont">
      <a-button type="primary" id="replenishmentManagement-printSticker-modal-save" @click="handleSave">确定打印</a-button>
      <a-button id="replenishmentManagement-printSticker-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
    </div>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import moment from 'moment'
import vueQr from 'vue-qr'
import { JGPrintTag } from '@/libs/JGPrint'
import { STable, VSelect } from '@/components'
export default {
  name: 'PrintStickerModal',
  components: { STable, VSelect, vueQr },
  mixins: [commonMixin],
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      isShow: false,
      nowData: null,
      list: []
    }
  },
  methods: {
    moment: moment,
    //  开始打印
    handleSave () {
      const printBox = document.querySelectorAll('.print-pages')
      console.log(printBox)
      for (let i = 0; i < printBox.length; i++) {
        JGPrintTag(printBox[i].outerHTML, '40mm', '30mm', this.list[i].printQty)
      }
    },
    setData (nowData, list) {
      this.nowData = nowData
      this.list = list
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less">
.replenishmentManagement-printSticker-modal {
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
}
</style>
