<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: '',
		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
		})
		console.log(formInfo.shopInfo)
		if (res) {
			formInfo.url = res;
			nextTick(() => {
			    const barcodeText = '1234567890';
			    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, barcodeText, {
			            width: 2,
			            height: 100,
			            displayValue: true,
			            fontOptions: 'bold',
			            font: 'monospace',
			            textAlign: 'center',
			            textPosition: 'bottom',
			            textMargin: 2,
			            fontSize: 20,
			            background: '#ffffff',
			            lineColor: '#000000'
			          });
			        }
			      });
			  });
		}
	})
</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>