<template>
	<view class="container">
		<view class="header">
			<text class="t"></text>
		</view>
		<view class="code-wrap">
			<view class="num-wrap">
				<text class="t">账户余额：</text>
				<text class="num">{{formInfo.shopInfo.amount || '0'}}</text>
			</view>
			<view class="line-code">
				<canvas id="barcodeCanvas" style="width: 300px; height: 100px;"></canvas>
			</view>
			<view class="ewm-wrap">
				<!-- <tki-qrcode  show :size="qrcodeSize"></tki-qrcode> -->
				<up-qrcode size="200" :val="formInfo.url" background="#fff" foreground="#000"></up-qrcode>
			</view>
			<view class="name">
				<text>使用门店：{{formInfo.shopInfo.shopName || '--'}}</text>
			</view>
			<view class="line"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		watch,
		nextTick
	} from 'vue';

	import JsBarcode from "jsbarcode";

	import {
		APIshopUsercode
	} from '@/common/api/member.js'


	const formInfo = reactive({
		shopInfo:uni.cache.get('orderVIP'),
		url: '',
		shopId: ''
	})

	onMounted(async () => {
		// 获取当前页面栈
		const pages = getCurrentPages();
		// 获取当前页面实例
		const currentPage = pages[pages.length - 1];
		// 获取页面参数
		const pageParams = currentPage.options;
		// formInfo.shopInfo = JSON.parse(decodeURIComponent(pageParams.shopInfo))
		formInfo.shopId = pageParams.shopId
		let res = await APIshopUsercode({
			shopId: pageParams.shopId
		})
		if (res) {
			formInfo.url = res;
			try {
				// nextTick(() => {
				// 	const query = uni.createSelectorQuery();
				// 	query.select('#barcodeCanvas')
				// 		.fields({
				// 			node: true,
				// 			size: true
				// 		})
				// 		.exec((res) => {
				// 			if (res[0]) {
				// 				const canvas = res[0].node;
				// 				const ctx = canvas.getContext('2d');
				// 				const dpr = uni.getSystemInfoSync().pixelRatio;
				// 				canvas.width = res[0].width * dpr;
				// 				canvas.height = res[0].height * dpr;
				// 				ctx.scale(dpr, dpr);

				// 				JsBarcode(canvas, formInfo.url, {
				// 					width: 2,
				// 					height: 100,
				// 					displayValue: true,
				// 					fontOptions: 'bold',
				// 					font: 'monospace',
				// 					textAlign: 'center',
				// 					textPosition: 'bottom',
				// 					textMargin: 2,
				// 					fontSize: 20,
				// 					background: '#ffffff',
				// 					lineColor: '#000000'
				// 				});
				// 			}
				// 		});
				// });
			} catch (error) {
				//TODO handle the exception
			}
		}
	})
</script>

<style>
	page {
		background-color: #eb6c37;
	}
</style>
<style scoped lang="scss">
	.container {
		padding: 40upx;
	}

	.header {
		display: flex;
		padding-bottom: 40upx;

		.t {
			color: #fff;
			font-size: 32upx;
			padding-bottom: 20upx;
			position: relative;

			&::after {
				content: '';
				width: 100%;
				border-bottom: 1upx solid #fff;
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}

	.code-wrap {
		background-color: #fff;
		border-radius: 20upx;
		padding: 40upx;
		position: relative;

		&::before,
		&::after {
			content: '';
			background-color: #eb6c37;
			border-radius: 50%;
			position: absolute;
			top: 42%;
			z-index: 2;
		}

		&::before {}

		&::after {}

		.num-wrap {
			display: flex;
			align-items: flex-end;

			.num {
				font-size: 42upx;
				position: relative;
				top: 8upx;
			}
		}

		.line-code {
			padding: 40upx 0;
			display: flex;
			justify-content: center;
		}

		.ewm-wrap {
			display: flex;
			justify-content: center;
			padding: 40upx 0;
		}

		.line {
			width: 100%;
			border-bottom: 1px dashed #ececec;
			position: absolute;
			top: calc(42% + 20upx);
			left: 0;
			z-index: 1;
		}
	}
</style>