<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="false" title="邀请好友"></el-navbar>
		
		<view class="wrapper">
			<view class="banner" :style="{'background-image': 'url('+domain+'/static/mobile/share/banner.jpg?v=1)'}"></view>
			<view class="content">
				<view class="avatar">
					<el-avatar v-if="user != undefined" size="60" :src="user.avatar"></el-avatar>
					<view class="username">{{ user.username }}</view>
				</view>
				
				<view class="qrcode">
					<view>
						<image :src="domain + '/api/common/qrcode' + ( '?u=' + user.id || '' )"></image>
					</view>
				</view>
				
				<view class="button">
					<view @click="copy">复制分享链接</view>
				</view>
				
			</view>
		</view>
	</el-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { storeToRefs } from 'pinia';
	import { useUserStore } from "@/store/user";
	
	const userStore 		 = useUserStore();
	const { isLogin,user }   = storeToRefs(userStore);
	const domain 			 = ref(uni.$http.getDomain());
	
	const copy = ()=>{
		uni.setClipboardData({
			data: domain.value + '/mobile'  + ( '?u=' + user.value.id || '' ),
			success: function () {
				uni.showModal({
					title: '复制成功',
					content: '内容已复制到粘贴板，可前往其他应用粘贴查看。', 
					showCancel:false,
					success: function(res) {
						if (res.confirm) {											 
							//console.log('用户点击确定');
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});
			}
		});
	}
	
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}
	.wrapper {
		width: 100%;
		background-color: #ffffff;
		.banner {
			width: 100%;
			height:400upx;
			background-size:100% ;
			background-position:center center;
		}
		.content {
			width: 100% ;
			background-color: #FFFFFF;
			border-radius: 60rpx 60rpx 0 0;
			margin-top: -60rpx;
			position: relative;
			.avatar {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 50rpx 0;
				.username {
					font-size: 32rpx;
					color: #555;
					margin-top: 15rpx;
				}
			}
			.qrcode {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				image {
					width: 300rpx;
					height: 300rpx;
				}
			}
			.button {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;
				view {
					width: 260rpx;
					height: 60rpx;
					line-height: 60rpx;
					margin: 0 auto;
					margin-top: 60rpx;
					border-radius: 40rpx;
					border: 0;
					font-size: 26rpx;
					outline: 0;
					background: #33b17b;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>