<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">{{shopInfo.amount  || '0'}}</text>
			</view>
			<view class="line-code">
				<tki-barcode ref="tkiBarcode" show :opations="tkiOptions"></tki-barcode>
			</view>
			<view class="ewm-wrap">
				<tki-qrcode ref="tkiQrcode" show :size="qrcodeSize"></tki-qrcode>
				<!-- <uqrcode ref="uqrcode" canvas-id="qrcode" :value="createcardNo"></uqrcode> -->
			</view>
			<view class="name">
				<text>使用门店：{{shopInfo.shopName || '--'}}</text>
			</view>
			<view class="line"></view>
		</view>
	</view>
</template>

<script>
	
	import tkiBarcode from '@/components/tki-barcode/tki-barcode.vue';
	import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
	export default {
		components: {
			tkiBarcode,
			tkiQrcode,
		},
		data() {
			return {
				tkiOptions: {
					height: 210,
					fontSize: 28,
					textMargin: 14
				},
				qrcodeSize: 400,
				createcardNo: '4637700074809642',
				shopInfo: null
			};
		},
		onLoad(e) {
			this.shopInfo = JSON.parse(e.shopInfo)
		},
		mounted() {
			this.logincreateCardNo();
		},
		methods: {
			async logincreateCardNo() {
				let res = await this.api.logincreateCardNo({
					"shopId": this.shopInfo.shopId
				})
				console.log(res)
				if (res.code == 0) {
					this.createcardNo = res.data;
					console.log(this.$refs.tkiBarcode)
					this.$refs.tkiBarcode.setval(this.createcardNo) //操作属性
					this.$refs.tkiQrcode.setval(this.createcardNo) //操作属性
				}
			}
		}

	};
</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;
		$radiusSize: 40upx;

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

		&::before {
			left: $radiusSize / 2 * -1;
		}

		&::after {
			right: $radiusSize / 2 * -1;
		}

		.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>