<template>
    <div class="ep-qrcode-wrap">
        <el-image :src="url" :preview-src-list="previewSrcList" :style="imgStyle"></el-image>
    </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
    props: {
        //二维码的值
        value: {
            type: String,
            default: ""
        },
        //默认展示的尺寸
        size: {
            type: Number,
            default: 200
        },
        //可否点击预览
        preview: {
            type: Boolean,
            default: false
        },
        //预览后弹窗展示的尺寸
        previewSize: {
            type: Number,
            default: 400
        }
    },
    data() {
        return {
            url: "",//预览图地址
        }
    },
    created(){
        //将二维码转换成图片
        QRCode.toDataURL(this.value, {
            width: this.previewSize, 
            color: {
                dark: "#000000",
                light: "#ffffff",
            },
            errorCorrectionLevel: "M",//low, medium, quartile, high or L, M, Q, H
        }, (err, url)=>{
            if(err){
                console.log(err)
                return
            }
            //保存图片链接
            this.url = url
        })
    },
    computed: {
        //默认的图片宽度
        imgStyle(){
            return {
                width: this.size + 'px',
                height: this.size + 'px'
            }
        },
        //图片预览地址
        previewSrcList(){
            return this.preview? [this.url]: []
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>