<script setup>
import {onMounted} from 'vue';
import UQRCode from 'uqrcodejs';
import {v4} from "uuid";

const {size, content, qrSize} = defineProps({
    size: {
        type: String,
        default: '160rpx'
    },
    qrSize: {
        type: Number,
        default: 80
    },
    content: {
        type: String,
        default: 'https://www.baidu.com'
    },
});

const ID = v4();

onMounted(() => {
    const qr = new UQRCode();
    qr.data = content;
    qr.size = qrSize;
    qr.make();
    const canvasContext = uni.createCanvasContext(ID, this);
    qr.canvasContext = canvasContext;
    qr.drawCanvas();
});
</script>

<template>
    <view id="QRCode">
        <canvas
            :id="ID"
            type="2d"
            :canvasId="ID"
            className='!w-full !h-full'>
        </canvas>
    </view>
</template>

<style lang="scss" scoped>
#QRCode {
    width: v-bind(size);
    height: v-bind(size);
}
</style>
