<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :autoBack="false" @left="onBackHome" :border="true" title="会员登录"></el-navbar>
		
		<view class="avabar-box">
			<view>
				<el-avatar :src="avatar" :size="80"></el-avatar>
			</view>
			<view class="text">会员登录</view>
		</view>
		
		<view class="the-form">
			
			<form @submit="formSubmit">
				<template v-if="type == 'user'">
					
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<uni-icons type="person" size="20" color="#9fa3ab"></uni-icons>
							</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">
								<uni-icons type="locked" size="20" color="#9fa3ab"></uni-icons>
							</view>
							<view class="form-item-input">
								<input type="password" name="password" placeholder="请输入密码" placeholder-class="form-item-placeholder" />
							</view>
							<view class="form-item-right">
								<text @click="navigateTo('pages/user/forget')">忘记密码?</text>
							</view>
						</view>
					</view>
					
				</template>
				<template v-if="type == 'code'">
					<view class="form-item">
						<view class="form-item-body form-item-border">
							<view class="form-item-icon">
								<uni-icons type="person" size="20" color="#9fa3ab"></uni-icons>
							</view>
							<view class="form-item-input">
								<input type="text" name="username" @input="onMobile" 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">
								<uni-icons custom-prefix="iconfont" type="icon-code" size="17" color="#9fa3ab"></uni-icons>
							</view>
							<view class="form-item-input">
								<input type="text" name="code" placeholder="请输入验证码" maxlength="6" placeholder-class="form-item-placeholder" />
							</view>
							<view class="form-item-right">
								<view @click="onSendSms">
									<el-code v-model="isSendSms" ref="codeRef" color="#4173ff" activeColor="#666" fontSize="26rpx"></el-code>
								</view>
							</view>
						</view>
					</view>
				</template>
				
				<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" :class="{ 'active': isFormActive }" form-type="submit">登 录</button>
					</view>
				</view>
				
				<view class="form-item">
					<view class="form-item-body" style="padding: 0;">
						<view class="form-item-login-box">
							<view>
								<view v-if="type == 'user' && inArray('code',appStore.users_verify)" @click="onChangeLogin('code')">短信登录</view>
								<view v-if="type == 'code' && inArray('user',appStore.users_verify)" @click="onChangeLogin('user')">账号登录</view>
							</view>
							<view @click="navigateTo('pages/user/register')">注册账号</view>
						</view>
					</view>
				</view>
				
				<view class="oauth-box" v-if="appStore.users_oauth != undefined && appStore.users_oauth.length > 0 && browser().isMini">
					<el-divider>第三方登录</el-divider>
					<view class="oauth-list">
						<view class="oauth" v-for="(value,index) in appStore.users_oauth" :key="index">
							<view @click="navigateTo(`pages/user/oauth?type=${value}`)" class="oauth-icon" :class="{'weixin': value == 'weixin'}"><uni-icons :type="value" size="30" color="#ffffff"></uni-icons></view>
						</view>
					</view>
				</view>
			</form>
			
		</view>
		
	</el-layout>
</template>
 
<script setup>
	import { ref } from "vue";
	import { onLoad } from "@dcloudio/uni-app";
	import { navigateTo,redirectTo } 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";
	import storage from "@/el-ui/libs/storage";
	
	const userStore   = useUserStore();
	const appStore    = useAppStore().getApp();
	const codeRef     = ref(null);
	const avatar      = ref(appStore.avatar);
	const type        = ref(inArray("user",appStore.users_verify) ? "user" : "code");
	const agreement   = ref(false);
	const mobile      = ref('');
	const isSendSms   = ref(true);
	
	let pages  = getCurrentPages();
	let page   = pages.length >= 2 ? pages[pages.length - 2] : pages[pages.length - 1];
	
	onLoad((options)=>{
		// if(userStore.isLogin){
		// 	navigateTo("pages/index/ucenter");
		// }
		
		if(!checkPage(page.$page.fullPath)){
			storage.set("callback_routing",page.$page.fullPath);
		}
		
		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 checkPage = (value)=>{
		return inArray(value,["/pages/user/agreement","/pages/user/bind","/pages/user/change","/pages/user/forget","/pages/user/login","/pages/user/oauth","/pages/user/register","/pages/ucenter/user/setting"]);
	}
	
	const onBackHome = ()=>{
		navigateTo(uni.$config.get("tabBar.defaultHome","pages/index/index"));
		// if(checkPage(page.$page.fullPath)){
		// 	navigateTo(uni.$config.get("tabBar.defaultHome","pages/index/index"));
		// }else{
		// 	navigateTo(page.$page.fullPath);
		// }
	}
	
	const onChangeLogin = (value)=>{
		type.value = value;
	}
	
	const onSendSms = ()=>{
		if(!isSendSms.value){
			return false;
		}
		
		codeRef.value?.start();
		sendSms();
	}
	
	const onMobile = (ev)=>{
		mobile.value = ev.detail.value;
	}
	
	let isCode = ref(false);
	const sendSms = ()=>{
		if(mobile.value.length <= 0){
			uni.$layer.showToast("请输入手机号");
			return ;
		}else if(!isMobile(mobile.value)){
			uni.$layer.showToast("您填写的手机号不正确");
			return ;
		}
		
		uni.$http.post("sms/send",{ scene: "login", mobile: mobile.value }).then(res=>{
			if(!res.code){
				uni.$layer.showToast(res.msg);
				codeRef.value?.stop();
			}else{
				isCode.value = true;
			}
		});
	}
	
	let isFormActive = ref(false);
	const formSubmit = (ev)=>{
		if(isFormActive.value) return false;
		if(!agreement.value){
			uni.$layer.showToast("请勾选已阅读并同意《服务协议》和《隐私协议》");
			return false;
		}
		
		if(type.value == "code" && isCode.value === false){
			uni.$layer.showToast("请发送验证码");
			return false;
		}
		
		let data = ev.detail.value;
		data.scene = type.value;
		if(data.scene == "user"){
			if(data.username.length <= 0){
				uni.$layer.showToast("请输入帐号名称");
				return false;
			}else if(data.password.length <= 0){
				uni.$layer.showToast("请输入密码");
				return false;
			}
		}else{
			if(data.username.length <= 0){
				uni.$layer.showToast("请输入手机号");
				return false;
			}else if(!isMobile(data.username)){
				uni.$layer.showToast("您填写的手机号不合法");
				return false;
			}else if(data.code.length <= 0){
				uni.$layer.showToast("请输入验证码");
				return false;
			}
		}
		
		isFormActive.value = true;
		uni.$http.post("user/login",data).then(res=>{
			if(res.code){
				if(res.data.binding == 2){
					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("微信登录失败");
							}
						});
					}
				}
				
				if(res.data.binding != 2){
					userStore.login(res.data.token);
					userStore.getUser();
					if(res.data.is_bind){
						redirectTo("pages/user/bind");
					}else{
						if(storage.get("callback_routing",false)){
							navigateTo(storage.get("callback_routing"));
						}else{
							navigateTo("pages/index/ucenter");
						}
					}
				}
			}else{
				uni.$layer.showToast(res.msg);
				isFormActive.value = false;
			}
		});
	}
	
</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 {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					&:last-child {
						margin-right: 0;
					}
					.oauth-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						&.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;
				}
				
				.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;
					display: flex;
					align-items: center;
					justify-content: center;
					&::before {
						position: absolute;
						content: " ";
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						width: 1px;
						height: 16px;
						background-color: #dcd5d5;
					}
				}
				
				.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>