<template>
	<view class="wrapper">
		<view class="logo">
			<img src="/static/cffp_logo.jpg" alt="logo" srcset="">
			<view>欢迎登录使用CFFP</view>
		</view>
		<view class="content">
			<view class="login_title">
				{{loginTypeName}}
			</view>
			<form>
				<view class="inputItem" v-if="loginType==='register'">
					<input class="uni-input" name="invitationCode" placeholder="输入邀请码(非必填)" v-model="invitation_code"/>
				</view>
				<view class="inputItem" v-if="loginType!=='agentlogin'">
					<input class="uni-input" name="mobileNo" placeholder="输入手机号" v-model="form.mobile" maxlength="11"
					/>
				</view>
				<view class="inputItem" v-if="loginType==='agentlogin'">
					<input class="uni-input" name="mobileNo" placeholder="输入账号" v-model="account" maxlength="11"
					/>
				</view>
				<view class="inputItem" v-if="loginType === 'codelogin' || loginType==='register' || loginType === 'resetpw'">
					<input class="uni-input" name="code" placeholder="输入验证码" v-model="form.code" type="number" maxlength="6"/>
					<text @click="sendMessage()" :class="{'grey':disabledSendBtn}">{{sendCodeHtml}}</text>
				</view>
				<view class="inputItem" v-if="loginType === 'pwlogin' || loginType==='register' || loginType==='agentlogin'">
					<input class="uni-input" type="text" name="password" placeholder="输入密码" v-if="!passwordFlag" v-model="form.password"/>
					<input class="uni-input" type="text" password name="password" placeholder="输入密码" v-if="passwordFlag" v-model="form.password"/>
					<text v-if="!passwordFlag" @click="passwordFlag=true">显示密码</text>
					<text v-if="passwordFlag" @click="passwordFlag=false">不显示密码</text>
				</view>
				<!--重置密码-->
				<view v-if="loginType === 'resetpw'">
					<view class="inputItem" >
						<input class="uni-input" type="text" password name="password" placeholder="密码(6-20位字母数字组合)" v-model="form.password"/>
					</view>
					<view class="inputItem" >
						<input class="uni-input" type="text" password name="password" placeholder="再次确认密码" v-model="doublePassword"/>
					</view>
				</view>
			</form>
			<view class="agree" v-if="loginType!='resetpw'">
				<label class="radio"><radio :checked="agreeFlag" @click="agreeFlag=!agreeFlag"/>选中</label>
				<text>已阅读并同意</text><a href="#">银盾保险经纪服务协议</a><text>和</text><a href="">隐私政策</a>
			</view>
			<view class="login_btn" @click="loginInCheck()" v-if="loginType!='resetpw'">
				{{loginType=='register'?'注册':'登录'}}
				
				{{loginType}}
			</view>
			<view class="login_btn" v-if="loginType=='resetpw'" @click="loginInCheck()">
				保存
			</view>
			<view class="login_type" v-if="loginType!='resetpw'">
				<text @click="getLoginType()">{{(loginType=='pwlogin' || loginType=='register')?'验证码登录':'密码登录'}}</text>
				<text v-if="loginType==='codelogin'" @click="loginType='register';loginTypeName='注册'">立即注册</text>
				<text v-if="loginType!=='codelogin'" @click="loginType='resetpw';loginTypeName='重置密码'">忘记密码</text>
			</view>
			<view v-if="loginType!='resetpw'">
				<view class="other_login">
					<text class="text_line"></text>
					<text style="margin: 0 40rpx;position: relative;top: 10rpx;">其他登录</text>
					<text class="text_line"></text>
				</view>
				<view class="login_type">
					<text @click="loginType='visitor';initForm();loginIn(1)">游客</text>
					<text @click="loginType = 'agentlogin';loginTypeName = '管理账号登录';">代理商</text>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	
	export default {
			data() {
				return {
					// 登陆方式初始化为验证码登录
					loginType: 'codelogin',
					passwordFlag:false,
					loginTypeName:'验证码登录',
					remainTimes:60,
					sendCodeHtml:'获取验证码',
					//用户输入信息
					form:{
						mobile:null,
						code:null,
						password:null,
					},
					disabledSendBtn:false,
					invitation_code:null,
					account:null,
					doublePassword:null,
					agreeFlag:false,
					userId:null
				}
			},
			methods: {
				getLoginType(){
					this.loginType==='codelogin'?this.loginType='pwlogin':this.loginType='codelogin';
					this.loginTypeName = this.loginType =='codelogin'?'验证码登录':'密码登录';
					this.loginType==='codelogin'?this.form.password=null:this.form.code=null;
				},
				sendMessage(){
					const params = {
						mobileNo:this.form.mobile,
						type:"1"
					}
					if(common.mobileNoValid(this.form.mobile) && !this.disabledSendBtn){
						api.verificationCode(params).then((res)=>{
							console.log(res)
							if(res['success']){
								this.delayTime()
							}
						})
					}else{
						common.errorDialog(2,'手机号校验错误')
					}
					
					
				},
				delayTime() {
					this.disabledSendBtn = true;
					this.timer = setInterval(() => {
					  this.remainTimes--;
					  this.sendCodeHtml = `${this.remainTimes}(S)`;
					  if (this.remainTimes <= 0) {
					    this.sendCodeHtml = '获取验证码';
					    this.remainTimes = 60;
					    this.disabledSendBtn = false;
					    clearInterval(this.timer);
					  }
					}, 1000);
				  },
				loginIn(loginType){
					const params = {
						loginType:loginType,
						...this.form
					}
					api.loginVerification(params).then((res)=>{
						if(res['success']){
							this.userId = String(res['data']['userId']);
							uni.setStorageSync('isLogin','1')
							uni.setStorageSync('cffp_userId',this.userId)
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
					})
				},
				registerIn(){
					const params = {
						invitation_code:this.invitation_code,
						...this.form
					}
					console.log(params)
					api.register(params).then((res)=>{
						if(res['success']){
							this.userId = String(res['data']['userId']);
							uni.setStorageSync('isLogin','1')
							uni.setStorageSync('cffp_userId',this.userId)
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
					})
				},
				resetPassword(){
					const params = {
						...this.form
					}
					console.log(params)
					api.resetPassword(params).then((res)=>{
						if(res['success']){
							uni.showToast({
								title: '密码重置成功，请重新登录',
								duration: 5000,
								icon: 'none'					
							})
							//重置密码后需要密码登录
							this.loginType = 'pwlogin';
							this.loginTypeName = '密码登录';
							this.form = {
								mobile:null,
								code:null,
								password:null,
							}
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
					})
				},
				loginInCheck(){
					//只有代理商登录不需要填写手机号
					if(this.loginType !== 'agentlogin'){
						if(!this.form.mobile){
							common.errorDialog(1,'请输入手机号');
							return false;
						}
						if(!common.mobileNoValid(this.form.mobile)){
							common.errorDialog(2,'手机号格式填写错误');
							return false;
						}
						if(this.loginType === 'codelogin' || this.loginType === 'register' || this.loginType ==='resetpw'){
							if(!this.form.code){
								common.errorDialog(1,'请输入验证码');
								return false;
							}
						}
						if(this.loginType === 'pwlogin' || this.loginType === 'register' || this.loginType ==='resetpw'){
							if(!this.form.password){
								common.errorDialog(1,'请输入密码');
								return false;
							}
							if(!common.passwordValid(this.form.password)){
								common.errorDialog(2,'请输入6-12位数字字母组合');
								return false;
							}
						}
						if(this.loginType ==='resetpw'){
							if(this.form.password !== this.doublePassword){
								common.errorDialog(2,'两次密码不一致');
								return false;
							}
						}
					}else{
						if(!this.account){
							common.errorDialog(1,'请输入账号');
							return false;
						}
						if(!common.passwordValid(this.account)){
							common.errorDialog(2,'账号为6-12位数字密码组合');
							return false;
						}
						if(!this.form.password){
							common.errorDialog(1,'请输入密码');
							return false;
						}else if(!common.passwordValid(this.form.password)){
								common.errorDialog(2,'请输入6-12位数字密码组合');
								return false;
							}
						//代理商登录
						this.loginIn(4)
					}
					if(!this.agreeFlag){
						uni.showToast({
							title: '请阅读并勾选银盾保险经纪服务协议和隐私条款',
							duration: 5000,
							icon: 'none'					
						})
						return false;
					}
					if(this.loginType === 'codelogin'){
						//验证码登录
						this.loginIn(3)
					}else if(this.loginType === 'pwlogin'){
						//密码登录
						this.loginIn(2)
					}else if(this.loginType === 'register'){
						//注册
						this.registerIn()
					}else if(this.loginType === 'resetpw'){
						//重置密码
						this.resetPassword()
					}
				},
				initForm(){
					this.form = {
						mobile:null,
						code:null,
						password:null,
					}
				},
				
			},
			mounted() {
			}
		}
</script>

<style lang="scss">
	.wrapper{
		background: #20279B;
		overflow: auto;
		height: 100%;
		.logo{
			text-align: center;
			color: #fff;
			padding: 60rpx 0;
			view{
				margin-top: 40rpx;
				font-size: 40rpx;
			}
			img{
				border-radius: 15rpx;
			}
		}
		.content{
			background-color: #fff;
			margin:0 20rpx;
			border-radius: 30rpx;
			padding: 40rpx 60rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			min-height: 65%;
			.login_title{
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 60rpx;
			}
			form{
				.inputItem{
					position: relative;
					margin-bottom: 30rpx;
					.uni-input{
						height: 80rpx;
						line-height: 80rpx;
					}
					.uni-input:after{
						content: " ";
						position: absolute;
						left: 0;
						bottom: 0;
						right: 0;
						height: 1px;
						border-bottom: 1px solid rgba(0,0,0,.1);
						color: #CECECE;
						transform-origin: 0 100%;
						transform: scaleY(.5);
						z-index: 2;
					}
					text{
						position: absolute;
						right: 0;
						top: 20rpx;
						color: #20279B;
					}
					.grey{
						color: #CECECE;
					}
				}
			}
			.agree{
				font-size: 28rpx;
				color:#666;
				text-align: center;
				a{
					color: #20279B;
					text-decoration: none;
				}
			}
			.login_btn{
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				margin: 40rpx auto;
				color: #fff;
				background: #20279B;
				border-radius: 80rpx;
			}
			.login_type{
				display: flex;
				justify-content: space-between;
				margin: 30rpx;
			}
			.other_login{
				text-align: center;
				color: #20279B;
				position: relative;
				.text_line{
					display: inline-block;
					height: 1px;
					background: #20279B;
					width: 30%;
				}
			}
		}
	}
		
</style>