<template>
<div>
    <el-button
        type="warning"
        plain
        icon="el-icon-download"
        size="mini"
        @click="handleQrCodeExport"
        v-hasPermi="['basic:device:export']"
        >导出二维码</el-button>

    <div style="background-color: transparent" ref="qrCodeAll">
        <div
            id="qrCode"
            v-for="(codeItem, codeIndex) in checkboxModel"
            :key="codeIndex"
            class="captureId"
            v-show="codeId"
            ref="QrcodePage"
            style="
                z-index: -1111111;
                position: absolute;
                top: 10px;
                left: -99999;
                width: 450px;
                height: 475px;
                background-size: cover;
            "
        ></div>
    </div>
</div>
</template>
     
<script>
  import html2canvas from 'html2canvas'
  import QRCode from 'qrcodejs2'
  import JSZip from 'jszip'
  import FileSaver from 'file-saver'
export default {
    name: "qrCodeUpload",
    data() {
        return {
            codeId: true,
            qrcodeArr:[]
        }
    },
    props: {
        checkboxModel: {
            type: Array,
            default: function() {
                return []
            }
        },
    }, 
    computed: {
        
    },
    methods: {
        // this.$emit('update:uploadList',this.fileList)
        // this.$emit('picturePreview', file)
        //标签下载
        async handleQrCodeExport() {
            this.codeId = true;
            console.log('checkboxModel', this.checkboxModel)
            const msg = this.$modal.loading('批量生成中，请稍候...')
            let that = this
            try {
                
                let captureId = document.getElementsByClassName('captureId')
                for (let i = 0; i < this.checkboxModel.length; i++) {
                    const element = this.checkboxModel[i]
                    captureId[i].innerHTML = ''
                    let shareContent = that.$refs['QrcodePage'][i],
                        width = shareContent.offsetWidth,
                        height = shareContent.offsetHeight
                    const maCodeText = document.createElement('div')
                    maCodeText.innerHTML = '编码:' + element
                    maCodeText.style =
                        'font-size=18px; width:100%;text-align:center;margin:10px;'
                    shareContent.appendChild(maCodeText)
                    console.log(element)
                    new QRCode(captureId[i], {
                        width: width,
                        height: height,
                        text: element+'',
                        colorDark: '#000',
                        colorLight: '#fff',
                    })
                    let canvas = document.createElement('canvas'),
                        scale = 1.2
                    canvas.width = width * scale
                    canvas.height = height * scale
                    canvas.style.width =
                        (shareContent.clientWidth * scale) / 100 + 'rem'
                    canvas.style.height =
                        (shareContent.clientHeight * scale) / 100 + 'rem'
                    canvas.getContext('2d').scale(scale, scale)
                    let opts = {
                        scale: scale,
                        canvas: canvas,
                        logging: false,
                        width: width,
                        height: height,
                        useCORS: true,
                    }
                    await html2canvas(shareContent, opts)
                        .then(function (canvas) {
                            const qrContentImage = canvas.toDataURL(
                                'image/jpeg',
                                1.0,
                            )
                            if (i <= that.checkboxModel.length - 1) {
                                that.qrcodeArr.push({
                                    url: qrContentImage,
                                    name: element,
                                })
                            }
                        })
                        .catch(function (reason) {
                            console.log(reason)
                            this.$emit('clearCheck')
                            that.$modal.closeLoading()
                        })
                }
                await new Promise((resolve) => setTimeout(resolve, 1000))
                that.packageImages()
                setTimeout(msg, 1000)
                that.$modal.closeLoading()
            } catch (error) {
                setTimeout(msg, 1000)
                // that.getList()
                this.$emit('clearCheck')
                that.$modal.closeLoading()
            }
        },
        //打包压缩
        packageImages() {
            let that = this
            const zip = new JSZip()
            const cache = {}
            let arr = that.qrcodeArr
            arr.forEach((item, index) => {
                let fileName = item.name
                zip.file(fileName + '.png', item.url.substring(22), {
                    base64: true,
                })
                cache[fileName] = item.url
            })
            zip.generateAsync({ type: 'blob' }).then((content) => {
                FileSaver.saveAs(content, '二维码.zip')
            })
            // that.getList()
            this.$emit('clearCheck')
            that.qrcodeArr = []
            that.codeId = false;
        },

 
    },
}
</script>

<style lang="scss" scoped>
 
</style>