<template>
  <a-modal
    centered
    class="replenishmentManagement-printSticker-modal"
    :footer="null"
    :maskClosable="false"
    title="打印预览"
    v-model="isShow"
    @cancel="isShow = false"
    :width="400">
    <!-- 列表 -->
    <div id="print">
      <div
        v-for="(item,index) in list"
        :key="index"
        class="print-pages"
        style="font-size: 12px;padding:10pt 15pt;width:300px;margin:0 auto;">
        <div class="storeName" style="text-align: center;margin: 5pt 0 0;">
          {{ nowData.dealerName }}
        </div>
        <div class="storeName" style="text-align: center;margin: 0pt 0 10pt;">
          {{ nowData.shelfInfo.shelfName }}
        </div>
        <div style="overflow: hidden;">
          <div style="float: left;">
            <div class="qrcode" ref="qrCodeUrl" style="text-align: center;">
              <vue-qr :text="`${item.shelfSn}&${item.productCode}&${item.productSn}&${item.shelfPlaceSn}`" :margin="0" :size="70"></vue-qr>
            </div>
          </div>
          <div style="float: left;padding-left:10pt;width: 60%;">
            <div class="productSno" style="font-size: 30pt;height:30pt;line-height:30pt;">{{ item.shelfPlaceCode }}</div>
            <div class="productCode" style="margin-top: 2pt;font-size:12pt;">{{ item.productCode }}</div>
            <div style="margin: 2pt 0;">{{ moment().format('YYYY-MM-DD HH:mm') }}</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 () {
      for (let i = 0; i < this.list.length; i++) {
        const item = this.list[i]
        item.dealerName = this.nowData.dealerName
        item.qrCodeContent = `${item.shelfSn}&${item.productCode}&${item.productSn}&${item.shelfPlaceSn}`
        item.shelfName = this.nowData.shelfInfo.shelfName
        item.printTime = moment().format('YYYY-MM-DD HH:mm')
        JGPrintTag('60mm', '40mm', item)
      }
    },
    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>
