<template>
    <div>
        <!--        <div :id="componentId"></div>-->
    </div>
</template>

<script>

import DateUtil from "../../../util/pattern/date";
import CanvasUtil from "../../../util/pattern/dom/canvas";

let loadJsPromise;
export default {
    name: 'jrCode',
    props: {
        option: {
            text: '',
            width: 256,
            imgSrc: ''
        }
    },
    data() {
        return {
            defaultOption: {
                text: '',
                width: 256,
                imgSrc: ''
            }
        }
    },
    // async mounted() {
    //     await this.init();
    // },
    methods: {
        async init() {
            this.componentId = DateUtil.getUUID('qrcode');
            loadJsPromise = loadJsPromise || ResUtil.loadResources([
                'https://www.niceloo.com/zt4ird/@qdyfb/common/js-plugin/barQrCode/jquery.qrcode.js',
                'https://www.niceloo.com/zt4ird/@qdyfb/common/js-plugin/barQrCode/qrcode.js'
            ]);
            await loadJsPromise;
            this.render();
        },
        /**
         * 下载二维码图片
         */
        downloadPng(fileName) {
            CanvasUtil.downCanvasImage(this.$el.getElementsByTagName('canvas')[0], fileName || "downloadQr.png");
        },
        render() {
            let _option = {
                ...this.defaultOption,
                ...this.option || {}
            };
            if (this.$el && _option.text) {
                $(this.$el).html('').qrcode({
                    width: _option.width,
                    height: _option.width,
                    // foreground: "#C00",
                    imgWidth: _option.width / 4,
                    imgHeight: _option.width / 4,
                    background: "#FFF",
                    text: _option.text,
                    src: _option.imgSrc
                });
            }
        },
    },
    watch: {
        option: {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                this.init();
            }
        }
    }
}

</script>
