<template>
	<u-popup :show="show" closeable @close="show = false">
		<view class="w-wx-login">
			<view class="h2 bold">获取您的昵称、头像</view>
			<view class="h3">获取用户头像、昵称，主要用于向用户提供具有辨识度的用户中心界面</view>
			<view class="form">
				<view class="input-item" hover-class="w-hover" open-type="chooseAvatar">
					<view class="label">头像 :</view>
					<view class="info">
						<image mode="aspectFill" class="avatar" :src="form.avatar || props.defaultAvatar"></image>
					</view>
					<u-icon name="arrow-right" size="1rem" color="var(--w-bg-dark-1)"></u-icon>
					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="(event)=>{form.avatar=event.detail.avatarUrl;}"></button>
				</view>
				<view class="input-item" hover-class="w-hover">
					<view class="label">昵称 :</view>
					<view class="info">
					</view>
					<input class="input" v-model="form.nickname" type="nickname" placeholder="请输入昵称" @change="(event)=>{form.nickname = event.detail.value;}" />
				</view>
				<view class="input-item" hover-class="w-hover">
					<view class="label">邀请码 :</view>
					<view class="info">
					</view>
					<input class="input" style="padding-left: 5rem;" type="password" autocomplete="off" v-model="form.regCode"  placeholder="请输入邀请码" />
				</view>
			</view>
			<view class="submit" hover-class="w-hover" @click="$u.throttle(submit())">{{props.text}}</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref,computed,toRaw } from 'vue'
	
	const props = defineProps({
		modelValue:{
			type:Boolean,
			default:false
		},
		defaultAvatar:{
			type:String,
			default:'data:image/svg+xml;base64,PHN2ZyB0PSIxNjg0ODk1MDkyNzA5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0NDciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZD0iTTkzOC41NTc0NCA3OTYuODY2NTZsLTIyNS45OTY4LTg4LjA3NDI0YzAgMC00My4xMDAxNi0xNi43MzIxNi01OS44NDI1Ni0zMy4xODc4NC0xMC43NjIyNC0xMC41Nzc5Mi05Ljk4NC0zNS41MzI4LTAuNDYwOC02Ny40MDk5MnMxMjUuMzc4NTYtMTYxLjQyMzM2IDEyNS4zNzg1Ni0yNzkuMTAxNDRDNzc3LjYzNTg0IDE0Ny4zNTM2IDY1OC4xNTU1MiAwIDUxMC43ODE0NCAwIDM2My40MTc2IDAgMjQzLjk0NzUyIDE0Ny4zNTM2IDI0My45NDc1MiAzMjkuMTAzMzZjMCAxMTIuNzExNjggMTAzLjIzOTY4IDI0Ny4wODA5NiAxMTUuOTc4MjQgMjcxLjUwMzM2IDEyLjc0ODggMjQuNDIyNCA5LjY0NjA4IDYxLjY0NDgtMC40MTk4NCA3Mi45MTkwNC0xNS4xMTQyNCAxNi45MzY5Ni03MC4zMzg1NiAzMy45MTQ4OC03MC4zMzg1NiAzMy45MTQ4OEw4NS40MzIzMiA3OTguMjM4NzJjLTQ3LjU5NTUyIDE3LjEwMDgtODQuODg5NiA2MS45OTI5Ni04NC44ODk2IDExMi42NGwwIDI0LjAyMzA0YzAgNTUuMjc1NTIgNDQuODkyMTYgODkuMDk4MjQgMTAwLjA2NTI4IDg5LjA5ODI0bDM0MS43MDg4IDAgMTE3LjEyNTEyIDAgMzYzLjkzOTg0IDBjNTUuMTgzMzYgMCAxMDAuMDc1NTItMzMuODIyNzIgMTAwLjA3NTUyLTg5LjA5ODI0bDAtMjQuMDIzMDRDMTAyMy40NTcyOCA4NjAuMjIxNDQgOTg2LjE2MzIgODEzLjk1NzEyIDkzOC41NTc0NCA3OTYuODY2NTZMOTM4LjU1NzQ0IDc5Ni44NjY1NnpNOTM4LjU1NzQ0IDc5Ni44NjY1NiIgZmlsbD0iI2ZmZmZmZiIgcC1pZD0iMjQ0OCI+PC9wYXRoPjwvc3ZnPg=='
		},
		text:{
			type:String,
			default:"注册登录"
		}
	});
	
	const emit = defineEmits(["submit","update:modelValue"])
	
	const show = computed({
		get(){
			return props.modelValue;
		},
		set(value){
			if(!value){
				form.value={nickname:'',avatar:'',code:'',regCode:''};
			}
			emit("update:modelValue",value);
		}
	});
	
	const login = async()=>{
		try{
			await authStore.login();
		}catch(e){
			// console.debug(e,e.message,e.cause);
			uni.$u.toast(e.cause.msg);
		}
	}
	const form = ref({nickname:'',avatar:'',code:'',regCode:''});
	const submit = ()=>{
		if(!form.value.nickname){
			uni.$u.toast("请输入昵称");
			return;
		}
		if(!form.value.avatar){
			uni.$u.toast("请选择头像");
			return;
		}
		if(!form.value.regCode){
			uni.$u.toast("请输入邀请码");
			return;
		}
		uni.login({
		    success(res){
				form.value.code = res.code
				emit("submit",toRaw(form.value));
				show.value = false;
			}
		});
	}
</script>


<style lang="scss" scoped>
	.w-wx-login{
		width: 100%;
		padding: 1rem;
		color: var(--w-main-dark);
		.h2{
			font-size: 1.2rem;
		}
		.h3{
			font-size: .8rem;
			color: var(--w-bg-dark-2);
			line-height: 1.4;
			padding:1rem 0;
		}
		.bold{
			font-weight: bold;
		}
		.form{
			
			&::before {
				content: '';
				display: block;
				background-color: var(--w-bg-dark);
				width: 100%;
				height: 1px;
				transform: scaleY(.5);
			}
			
			.input-item{
				padding: .5rem 0;
				display: flex;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					background-color: var(--w-bg-dark);
					width: 100%;
					height: 1px;
					bottom: 0;
					transform: scaleY(.5);
				}
				.label {
					font-size: 1rem;
					padding: .5rem;
					line-height: 1;
					
				}
				.input {
					position: absolute;
					width: 100%;
					height: 100%;
					top:0;
					left:0;
					box-sizing: border-box;
					padding-left: 4rem;
					border:none;
					outline: none;
					font-size: .95rem;
					background-color: #0000;
				}
				.info {
					flex:1;
					position: relative;
					.avatar {
						background-color: var(--w-bg-dark);
						position: absolute;
						width: 2.2rem;
						height: 2.2rem;
						transform: translate(.4rem,-.2rem);
						border: 1px solid var(--w-bg-dark-1);
						border-radius: .2rem;
					}
				}
				.avatar-btn {
					position: absolute;
					width: 100%;
					height: 100%;
					top:0;
					left:0;
					box-sizing: border-box;
					background-color: #0000;
					border: none;
					&::before,&::after {
						border: none;
					}
				}
			}
		}
		.submit{
			margin-top: 20px;
			width: 100%;
			border-radius: 0;
			text-align: center;
			line-height: 2.5;
			color: var(--w-bg);
			border-radius: .2rem;
			font-size: 1.1rem;
			letter-spacing: .2rem;
			background: var(--w-main);
			&.w-hover {
				background: var(--w-main-dark);
			}
		}
	}
</style>