<template>
	<view style="display: flex;height: 100vh;align-items: center;flex-direction: column;">
		<uni-nav-bar 
			style="width: 100%;"
			statusBar
			left-icon="left" 
			@clickLeft="goto(1)"
			right-icon="more-filled"  
			@clickRight="scan"
			:border="false"
			backgroundColor="transparent"
			title=""
			>
		</uni-nav-bar>
		<view style="flex:1;display: flex;flex-direction: column;align-items: center;justify-content: center;">
			<view class="info_card">
				<my-avatar :src="userInfo.faceURL" :desc="userInfo.nickname" size="64" />
				<view class="id_row">
					<text class="nickname">{{ userInfo.nickname }}</text>
					<view class="id_row_copy" @click="copy">
						<text class="id">{{ userInfo.userID }}</text>
						<image style="width: 32rpx; height: 32rpx" src="@/static/images/id_copy.png" mode="" />
					</view>
				</view>
			</view>
			<canvas canvas-id="qrcode_canvas" id="qrcode_canvas" style="width: 600rpx; height: 600rpx"></canvas>
			<view style="color: #b4b4b4;">扫一扫上面的二维码图案，加我为朋友</view>
		</view>
		<view style="width: 80%;display: flex;align-items: center;justify-content: center;height: 20%;">
			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2" @click="scan">扫一扫</u-button>
			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">换个样式</u-button>
			<u-button type="default" plain :hairline="false" iconColor="#9aa2b2">保存图片</u-button>
		</view>
	</view>
</template>

<script>
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import QRCode  from "@/components/qrcode.js";
	import UserBase from '@/components/User.vue';
	import util from "@/util";
	export default {
		mixins:[UserBase],
		components: {
			MyAvatar,
		},
		data() {
			return {
				
			}
		},
		onLoad() {
			console.log(this.userInfo)
			this.createQrcode();
		},
		methods: {
			...util,
			createQrcode() {
				const _this = this;
				return new Promise((resolve, reject) => {
					new QRCode({
						context: _this, // 上下文环境
						canvasId: 'qrcode_canvas', // canvas-id
						usingComponents: true, // 是否是自定义组件
						showLoading: false, // 是否显示loading
						loadingText: "", // loading文字
						text: "/pages/common/invite_register?code=", // 生成内容
						size: 320, // 二维码大小
						background: "#fff", // 背景色
						foreground: '#000000', // 前景色
						pdground: '#000000', // 定位角点颜色
						correctLevel: 3, // 容错级别
						image: "", // 二维码图标
						imageSize: 40, // 二维码图标大小
						cbResult: function(res) { // 生成二维码的回调
							//_this.qrcode_src = (res)
							//resolve(res);
						},
					});
				});
			},
		}
	}
</script>

<style scoped lang="scss">
		.info_card {
			width: 600rpx;
			height: 196rpx;
			border-radius: 6px;
			background: #fff;
			margin: 0 auto 0 auto;
			padding: 0 36rpx;
			color: #0c1c33;
			display: flex;
			align-items: center;

			.id_row {
				@include vCenterBox();
				display: flex;
				//height: 46px;
				margin-left: 16rpx;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				flex: 1;
				font-size: 28rpx;

				&_copy {
					@include vCenterBox();
				}

				.nickname {
					@include nomalEllipsis();
					max-width: 400rpx;
					font-weight: 500;
					font-size: 34rpx;
				}

				.id {
					color: #8e9ab0;
				}
			}

			img {
				width: 18px;
				height: 18px;
			}
		}

</style>