<script setup lang="ts">
import { Html5QrcodeScanner } from "html5-qrcode";
import { nextTick } from 'vue';

const props = defineProps<{
    qrbox: Number,
    fps: Number,
}>()

const emit = defineEmits(['decodedCode'])

var config: any = { fps: props.fps ? props.fps : 10 };
let nowresult = "";
if (props.qrbox) {
    config['qrbox'] = props.qrbox;
}

let html5QrcodeScanner: Html5QrcodeScanner = null!;

function onScanSuccess(decodedText: string, decodedResult: any) {
    // $this.$root.$emit('decodedCode', decodedText, decodedResult);
    if (nowresult === decodedText) {
        return;
    }
    nowresult = decodedText;
    emit('decodedCode', decodedText, decodedResult);
}

function onScanError(decodedText: string, decodedResult: any) {
    // $this.$root.$emit('decodedCode', decodedText, decodedResult);
}

async function onLoad(): Promise<void> {
    // 这里获取DOM的是旧值
    await nextTick()
    // nextTick 后获取DOM的是更新后的值
    html5QrcodeScanner = new Html5QrcodeScanner(
        "qr-code-full-region", config, undefined);
    html5QrcodeScanner.render(onScanSuccess, onScanError);
}
onLoad();
</script>

<template>
    <div id="qr-code-full-region"></div>
</template>
