<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: 12px;padding:3pt 5pt;">
        <div class="storeName" style="text-align: center;margin: 2pt 0 4pt;">
          {{ nowData.dealerName }}
        </div>
        <div style="overflow: hidden;">
          <div style="float: left;width:65%;padding-top: 5pt;">
            <div class="shelfName" style="margin-bottom: 3pt;">
              {{ nowData.shelfInfo.shelfName }}
            </div>
            <div class="productCode" style="margin-bottom: 2pt;">{{ item.productCode }}</div>
            <div class="productName">{{ item.product.name }}</div>
            <div class="userName" style="margin-top: 4pt;">
              <span style="margin: 0 5pt 0 0;">{{ moment().format('YYYY-MM-DD HH:mm') }}</span>
              <span>{{ nowData.parintUser }}</span>
            </div>
          </div>
          <div style="float: right;width: 34%;">
            <div class="productSno" style="font-size: 15pt;text-align: center;">{{ item.shelfPlaceCode }}</div>
            <div class="qrcode" ref="qrCodeUrl" style="text-align: center;">
              <vue-qr :text="`${item.shelfSn}&${item.productCode}`" :margin="0" :size="70"></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++) {
        const htmlStr = printBox[i].outerHTML
        const item = this.list[i]
        this.list[i].qrCodeContent = `${item.shelfSn}&${item.productCode}`
        JGPrintTag(htmlStr, '60mm', '40mm', this.list[i])
      }
    },
    setData (nowData, list) {
      const dearInfo = this.$store.state.user.info
      this.nowData = nowData
      this.list = list
      this.nowData.dealerName = dearInfo.orgName
      this.nowData.dealerSn = dearInfo.orgSn
      this.nowData.parintUser = dearInfo.userNameCN
      console.log(this.list)
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.nowData = null
        this.list = []
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less">
.replenishmentManagement-printSticker-modal {
	.btn-cont {
		text-align: center;
		margin: 35px 0 10px;
	}
  .print-pages{
    border-bottom: 1px solid #eee;
  }
}
</style>
