<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="false" :border="true" title="会员注册" @left="onBackHome"></el-navbar>
		
		<view class="the-form">
			
			<form @submit="formSubmit">
				<view class="form-item">
					<view class="form-item-body form-item-border">
						<view class="form-item-icon">
							帐号名称
						</view>
						<view class="form-item-input">
							<input type="text" name="username" placeholder="请输入帐号名称" placeholder-class="form-item-placeholder" />
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body form-item-border">
						<view class="form-item-icon">
							设置密码
						</view>
						<view class="form-item-input">
							<input :type="pass == 1 ? 'password' : 'text'" name="password" placeholder="请输入密码" placeholder-class="form-item-placeholder" />
						</view>
						<view class="form-item-right">
							<uni-icons :type="pass == 1 ? 'eye' : 'eye-slash'" size="20" color="#9fa3ab" @click="pass = pass == 1 ? 0 : 1"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body form-item-border">
						<view class="form-item-icon">
							确认密码
						</view>
						<view class="form-item-input">
							<input :type="cpass == 1 ? 'password' : 'text'" name="confirm_password" placeholder="请输入确认密码" placeholder-class="form-item-placeholder" />
						</view>
						<view class="form-item-right">
							<uni-icons :type="cpass == 1 ? 'eye' : 'eye-slash'" size="20" color="#9fa3ab" @click="cpass = cpass == 1 ? 0 : 1"></uni-icons>
						</view>
					</view>
				</view>
				
				<view class="form-item" v-if="appStore.users_agree == 1">
					<view class="form-item-body">
						<view class="form-item-text">
							<el-checkbox v-model="agreement" shape="circle" activeColor="var(--ui-bg-color)"></el-checkbox>
							<view class="agreement-box">
								已阅读并同意 <text @click="navigateTo('pages/user/agreement?type=service')">《服务协议》</text> 和 <text @click="navigateTo('pages/user/agreement?type=privacy')">《隐私协议》</text> 
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body">
						<button class="form-item-button" form-type="submit">注 册</button>
					</view>
				</view>
				
			</form>
			
		</view>
		
	</el-layout>
</template>

<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { useAppStore } from "@/store/app";
	import { useUserStore } from "@/store/user";
	import { inArray,isMobile,browser,isEmpty } from "@/el-ui/libs/check";
	
	const userStore = useUserStore();
	const appStore  = useAppStore().getApp();
	const avatar    = ref(appStore.avatar);
	const pass      = ref(1);
	const cpass     = ref(1);
	let agreement   = ref(false);
	
	onLoad((options)=>{
		// if(userStore.isLogin){
		// 	navigateTo("pages/index/ucenter");
		// }
		
		if(browser().isWechat){
			if(options.code != undefined && !isEmpty(options.code)){
				let params = { scene: "wechat", code: options.code };
				uni.$http.post("wechat.auth/login",params).then(value=>{
					userStore.login(value.data.token);
					userStore.getUser();
					if(value.data.is_bind){
						navigateTo("pages/user/bind");
					}else{
						navigateTo("pages/index/ucenter");
					}
				});
			}
		}
	});
	
	const onBackHome = ()=>{
		navigateTo(uni.$config.get("tabBar.defaultHome","pages/index/index"));
	}
	
	const onChangeLogin = (value)=>{
		type.value = value;
	}
	
	const formSubmit = async (ev)=>{
		if(!agreement.value){
			uni.$layer.showToast("请勾选已阅读并同意《服务协议》和《隐私协议》");
			return false;
		}
		
		let data = ev.detail.value;
		if(data.username.length <= 0){
			uni.$layer.showToast("请输入帐号名称");
			return false;
		}else if(data.password.length <= 0){
			uni.$layer.showToast("请输入密码");
			return false;
		}else if(data.confirm_password.length <= 0){
			uni.$layer.showToast("请输入确认密码");
			return false;
		}
		
		let uid = uni.$storage.get("uid",0);
		if(uid > 0){
			data.uid = uid;
		}
		
		uni.$http.post("user/register",data).then(res=>{
			if(res.code){
				if(browser().isWechat){
					uni.$http.get("wechat.auth/config").then(config=>{
						if(config.code){
							location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.data.appid}&redirect_uri=${config.data.domain}/pages/user/login&response_type=code&scope=snsapi_base&state=${config.data.state}#wechat_redirect`;
						}
					})
				}else if(browser().isMini){
					wx.login({
						success: function (res){
							let params = { scene: "miniprogram", code: res.code };
							uni.$http.post("wechat.auth/login",params).then(value=>{
								if(value.code){
									userStore.login(value.data.token);
									userStore.getUser();
									if(value.data.is_bind){
										navigateTo("pages/user/bind");
									}else{
										navigateTo("pages/index/ucenter");
									}
								}else{
									uni.$layer.showToast(value.msg);
								}
							});
						},
						fail:function (error){
							uni.$layer.showToast("微信登录失败");
						}
					});
				}else{
					userStore.login(res.data);
					userStore.getUser();
					navigateTo("pages/index/ucenter");
				}
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
		
	}
	
</script>

<style lang="scss" scoped>
	page { background-color: #fff; }
	.avabar-box {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
		flex-direction: column;
		view {
			&:nth-child(2){
				font-weight: bold;
				font-size: 32rpx;
				margin-top: 30rpx;
			}
		}
	}
	
	.the-form {
		width: 100%;
		margin-top: 60rpx;
		.oauth-box {
			width: 100%;
			margin-top: 50rpx;
			.oauth-list{
				display: flex;
				justify-content: center;
				margin-top: 40rpx;
				.oauth {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					&.weixin {
						background-color: #41b035;
					}
				}
			}
		}
		
		.form-item {
			width: 90%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			.form-item-body{
				display: flex;
				flex-direction: row;
				padding: 35rpx 0;
				color: #555;
				box-sizing: border-box;
				position: relative;
				&.form-item-border::after {
					content: " ";
					position: absolute;
					left: 0;
					top: 0;
					pointer-events: none;
					box-sizing: border-box;
					transform-origin: 0 0;
					width: 199.8%;
					height: 199.7%;
					transform: scale(0.5, 0.5);
					border-bottom: 1px solid #e5e5e5;
					z-index: 2;
				}
				
				.form-item-icon {
					margin-right: 15rpx;
					display: inline-flex;
					flex-direction: row;
					align-items: center;
					font-size: 28rpx;
				}
				
				.form-item-placeholder {
					color: #9fa3ab;
					font-size: 30rpx;
				}
				
				.form-item-input {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: row;
					padding: 0px;
					border-color: rgb(220, 223, 230);
					width: 90%;
					input {
						color: #333;
						font-size: 30rpx;
						width: 100%;
					}
				}
				
				.form-item-right {
					color: #888;
					font-size: 26rpx;
					padding-left: 30rpx;
					padding-right: 10rpx;
					position: relative;
				}
				
				.form-item-button {
					width: 100%;
					color: #ffffff;
					border-color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					background: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					height: 40px;
					line-height: 40px;
					border-radius: 35rpx;
					font-size: 32rpx;
					&.active {
						background-color: #ccc;
						color: #fff;
						border-color: #ccc;
					}
				}
				
				.form-item-text {
					font-size: 24rpx;
					display: flex;
					align-items: center;
					.agreement-box {
						padding-left: 10rpx;
					}
					text {
						color: linear-gradient(90deg, var(--ui-bg-color-light), var(--ui-bg-color));
					}
				}
				
				.form-item-login-box {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: #666;
				}
			}
		}
	}
</style>