<template>
	<canvas v-if="value" :type="type" :style="{width: size + 'px', height: size + 'px'}" :canvas-id="canvasId"
		ref="qrcodeCanvas"></canvas>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';
	import {
		uqrcode
	} from 'uqrcodejs'

	const props = defineProps({
		// 二维码内容（必填，如链接/文本）
		value: {
			type: String,
			default: ''
		},
		// 尺寸（默认300px）
		size: {
			type: [Number, String],
			default: 300
		},
		// 二维码颜色
		color: {
			type: String,
			default: '#000000'
		},
		// 背景色
		backgroundColor: {
			type: String,
			default: '#ffffff'
		},
		// logo图片地址
		logo: {
			type: String,
			default: ''
		},
		// logo大小（占二维码比例）
		logoSize: {
			type: Number,
			default: 0.2
		},
		// canvas 类型（小程序需指定）
		type: {
			type: String,
			default: '2d'
		},
		// canvas ID（避免重复）
		canvasId: {
			type: String,
			default: 'uqrcode'
		}
	});

	const emit = defineEmits(['success', 'fail']);
	const qrcodeCanvas = ref(null);

	// 生成二维码核心方法
	const createQRCode = async () => {
		if (!props.value) return;

		try {
			// 引入uQRCode核心库
			const uQRCode = require('uqrcodejs');

			// 获取canvas上下文
			const query = uni.createSelectorQuery().in(getCurrentInstance());
			const res = await query.select(`#${props.canvasId}`).fields({
				node: true,
				size: true
			}).exec();
			const canvas = res[0].node;
			const ctx = canvas.getContext('2d');

			// 设置canvas尺寸
			const dpr = uni.getSystemInfoSync().pixelRatio;
			canvas.width = props.size * dpr;
			canvas.height = props.size * dpr;
			ctx.scale(dpr, dpr);

			// 生成二维码
			await uQRCode.default.draw({
				canvas: canvas,
				componentInstance: getCurrentInstance(),
				text: props.value,
				width: props.size,
				color: props.color,
				background: props.backgroundColor,
				logo: props.logo,
				logoSize: props.logoSize
			});

			// 生成临时图片（可选，用于分享/保存）
			uni.canvasToTempFilePath({
				canvasId: props.canvasId,
				success: (res) => emit('success', res.tempFilePath),
				fail: (err) => emit('fail', err)
			}, getCurrentInstance());
		} catch (err) {
			emit('fail', err);
		}
	};

	// 监听value变化，重新生成
	watch(() => props.value, () => createQRCode(), {
		immediate: true
	});
	onMounted(() => createQRCode());
</script>