<template>
    <div></div>
</template>

<script>
    import QRCode from 'qrcode-js-package/qrcode.js'
    export default {

        props: {
            text: {type: String, required: true},
            size: {type: Number, required: false, default: 256},
            color: {type: String, required: false, default: '#000'},
            bgColor: {type: String, required: false, default: '#FFF'},
            errorLevel: {
                type: String, 
                validator: function (value) {
                    return value === 'L' || value === 'M' || value === 'Q' || value === 'H'
                }, 
                required: false, 
                default: 'H'
            }
        },

        watch: {
            text: function () {
                this.clear();
                this.makeCode(this.text);
            }
        },

        data() {
            return{
                qrCode: {}
            }
        },

        mounted() {
            this.qrCode = new QRCode(this.$el, {
                text: this.text,
                width: this.size,
                height: this.size,
                colorDark : this.color,
                colorLight : this.bgColor,
                correctLevel : QRCode.CorrectLevel[this.errorLevel]
            });
        },

        methods: {
            clear: function () {
                this.qrCode.clear();
            },
            makeCode: function (text) {
                this.qrCode.makeCode(text);
            }
        }
    }
</script>