<template>
  <div>
    <div class="con" v-if="numList.length">
      <div class="qr-section" v-for="(item, index) in numList" :key="index">
        <vue-qr ref="qrCode" :text="item" width="300" height="300"></vue-qr>
        <span class="num">{{ item }}</span>
      </div>
    </div>
  </div>
</template>
<script>
// 組件
import VueQr from 'vue-qr'
import html2canvas from 'html2canvas'

import JSZip from 'jszip'
import FileSaver from 'file-saver'

export default {
  name: 'Qrcode',
  components: {
    VueQr
  },
  props: {
    isBatch: {
      type: Boolean,
      default: false
    },
    numList: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return { imgZipList: '', imgList: [] }
  },
  watch: {
    isBatch: {
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            this.compressedDownload()
          })
        }
      },
      deep: true
    }
  },
  created () {},
  mounted () {},
  methods: {
    // 壓縮下載
    compressedDownload () {
      // // 創(chuàng)建一個code文件夾巾陕，文件里里創(chuàng)建一個images文件菜循，文件內(nèi)容為空
      this.zip = new JSZip()
      this.imgZipList = this.zip.folder('images')

      // 獲取每個二維碼的dom
      const canvasBoxList = document.querySelectorAll('.qr-section')
      canvasBoxList.forEach((item, index) => {
        // 處理生成待編碼的二維碼圖片
        html2canvas(item).then(canvas => {
          // 獲取圖片在線地址
          const dataURL = canvas.toDataURL('image/jpg')

          const that = this
          const total = canvasBoxList.length
          // ↓第一個參數(shù)是單張二維碼圖片的命名，第二個參數(shù)是二維碼的base64涡上，這里用replace把URL的前綴截掉僅保留純base64編碼
          that.imgZipList.file('二維碼_' + index + '.png', dataURL.replace(/^data:image\/(png|jpg);base64,/, ''), {
            base64: true
          })
          if (index === total - 1) {
            // 添加完下載
            this.zip.generateAsync({ type: 'blob' }).then(function (content) {
              // 使用file-saver保存下載zip文件浑玛，第二個參數(shù)是壓縮包命名
              FileSaver.saveAs(content, `二維碼.zip`)
              that.$emit('handleCancel')
            })
          }
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.con {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -10;
  display: flex;
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  img {
    width: 300px;
    height: 300px;
  }
  .num {
    color: #2a3030;
    line-height: 21px;
    text-align: center;
  }
}
.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
  height: 350px;
  margin: 10px auto;
  span {
    margin: 0 !important;
  }
}
</style>