<template>
	<view class="wrapper">
		<restrictedTip ref="restrictedTip"/>
		<view v-if="loginType=='resetpw' || goBack" @click="rpsdlogin()" class="psdlogin">
			<view class="iconfont icon-youjiantou zuojiantou"  style="top:18rpx;color: #fff;"></view>
				<!-- <image style="width: 40rpx;height: 40rpx;" src="../../static/rpsloging.png" mode=""></image> -->
		</view>
		<view class="logo">
			<image :src="imgSrc" alt="logo" srcset="" class="iconBox" mode="widthFix"></image>
			<view>欢迎使用{{companyName}}</view>
		</view>
		<view class="content">
			<form>
				<view class="inputItem" v-if="loginType!=='agentlogin'">
					<input type="number" 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="form.account" maxlength="11"/>
				</view>
				<view class="inputItem" v-if="loginType === 'codelogin' || loginType==='register' || loginType === 'resetpw'">
					<input class="uni-input codeBtn" name="code" placeholder="输入验证码" v-model="form.code" type="number" maxlength="6"/>
					<text style="font-size: 28rpx;" @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="protol">
				<view class="empty" v-if="!agreeFlag" @click="agreeFlag=true"></view>
				<text v-else class="iconfont icon-icon_duihao-mian" @click="agreeFlag=false"></text>
				<text style="color: #666;">我已阅读并同意</text>
				<text  style="color: #20269B;" @click="getFile(1)">服务协议</text>
				<text style="color: #666666;">和</text>
				<text  style="color: #20269B;" @click="getFile(2)">隐私条款</text>
			</view>
			<view class="login_btn" @click="loginInCheck()" v-if="loginType!='resetpw'">
				
				登录 / 注册
			</view>
			<view class="login_btn" v-if="loginType=='resetpw'" @click="loginInCheck()">
				保存
			</view>
			
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';
	import common from '../../common/common';
	import {companyInfo} from "@/environments/environment";
	export default {
			data() {
				return {
					companyType : companyInfo.companyType,
					companyName : companyInfo.appName,
					loginType: 'codelogin',
					passwordFlag:false,
					loginTypeName:'验证码登录',
					remainTimes:60,
					sendCodeHtml:'获取验证码',
					//用户输入信息
					form:{
						mobile:null,
						// code:'250106',
						code:null,
						password:null,
					},
					disabledSendBtn:false,
					invitation_code:null,
					account:null,
					doublePassword:null,
					agreeFlag:false,
					userId:null,
					imgSrc:companyInfo.companyLogo,
					fileType:null,
					goBack:true
				}
			},
			methods: {
				c_agreeFlag(){
					this.agreeFlag=!this.agreeFlag;
				},
				rpsdlogin() {
				  if (this.loginType == 'resetpw') {
				    this.loginType = 'codelogin';
				    return;
				  }
				  
				  this.loginType = 'visitor';
				  this.initForm();
				  
				  // 获取跳转来源
				  const pages = getCurrentPages();
				  const currentPage = pages[pages.length - 1];
				  const from = currentPage.options.from;
				  
				  // 统一处理tabbar页面的返回
				  const tabbarPages = ['index', 'personalCenter', 'courselist', 'product'];
				  
				  if (from && tabbarPages.includes(from)) {
				    // 从tabbar页面跳转过来，使用switchTab返回
				    uni.switchTab({
				      url: `/pages/${from}/${from}`
				    });
				  } else if (pages.length > 1) {
				    // 从普通页面跳转过来，直接返回
				    uni.navigateBack({ delta: 1 });
				  } else {
				    // 默认返回首页
				    uni.switchTab({
				      url: '/pages/index/index'
				    });
				  }
				},
				
				getFile(type){
					uni.navigateTo({
						url:`/myPackageA/ruleAndContract/clause?type=${type}`
					})
				},
				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",
						source: "cffp"
					}
					if(common.mobileNoValid(this.form.mobile)){
						if(!this.disabledSendBtn){
							api.verificationCode(params).then((res)=>{
								if(res['success']){
									this.delayTime()
								}else{
									common.errorDialog(2,res['message'])
								}
							})
						}
					}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,urlType){
					uni.showLoading({
					  title: '加载中...'
					});
					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.setStorageSync('loginType',this.loginType);
							uni.setStorageSync('uni-token', res.data['token']);
							
							if(urlType == 'personalCenter'){
								uni.switchTab({
									url:'/pages/personalCenter/personalCenter'
								})
							}else {
								uni.switchTab({
									url:'/pages/index/index'
								})
							}
							
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
						uni.hideLoading()
					})
				},
				registerIn(){
					const params = {
						inviterInvitationCode:this.invitation_code,
						...this.form
					}
					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.setStorageSync('uni-token', res.data['token']);
							uni.switchTab({
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								title: res['message'],
								duration: 2000,
								icon: 'none'					
							})
						}
					})
				},
				resetPassword(){
					const params = {
						...this.form
					}
					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.form.account){
							common.errorDialog(1,'请输入账号');
							return false;
						}
						if(!common.passwordValid(this.form.account)){
							common.errorDialog(2,'账号为6-12位数字字母组合');
							return false;
						}
						if(!this.agreeFlag){
							uni.showToast({
								title: '请阅读并勾选'+`${companyInfo.companyFullName}`+'服务协议和隐私条款',
								duration: 5000,
								icon: 'none'					
							})
							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 && this.loginType !='resetpw'){
						uni.showToast({
							title: '请阅读并勾选'+`${companyInfo.companyFullName}`+'服务协议和隐私条款',
							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,
					}
				},
				checkToken(){
					api.checkToken().then(res=>{
						if(res['success']){}else{
							api.obtainToken().then(res=>{
								if(res.success){
									uni.setStorageSync('uni-token',res.data['token']);
								}
							})
						}
					})
				},
				
			},
			onShow() {
				this.checkToken();
			},
			destroyed() {
				uni.hideToast();
			}
		}
</script>

<style lang="scss" scoped>
	.psdlogin{
		margin: 40rpx;
		width: 40rpx;
		height: 40rpx;
		
	}
	.wrapper{
		background: #20279B;
		position: relative;
		overflow: auto;
		height:100vh;
		padding-top: 50rpx;
		box-sizing: border-box;
		.logo{
			text-align: center;
			color: #fff;
			padding: 60rpx 0;
			view{
				margin-top: 40rpx;
				font-size: 40rpx;
			}
			.iconBox{
				border-radius: 15rpx;
				width: 20% !important;
			}
		}
		.content{
			background-color: #fff;
			margin:0 20rpx;
			border-radius: 30rpx;
			padding: 40rpx 60rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			.protol{
				// margin-top: 50rpx;
				// margin-left: 10rpx;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				.empty{
					width: 30rpx;
					height: 30rpx;
					border: 1rpx solid #20269B;
					border-radius: 50%;
					margin-right: 5rpx;
				}
				.icon-icon_duihao-mian{
					font-size: 30rpx;
					color: #20269B;
					margin-right: 5rpx;
				}
			}
			// min-height: 65%;
			.login_title{
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 60rpx;
			}
			form{
				margin-bottom: 20rpx;
				.inputItem{
					position: relative;
					margin-bottom: 30rpx;
					font-size: 28rpx;
					.codeBtn{
						width: 70%;
					}
					.uni-input{
						height: 80rpx;
						line-height: 80rpx;
						font-size: 28rpx;
					}
					.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;
			// 	.radio{
			// 		width: 30rpx;
			// 		height: 30rpx;
			// 	}
			// 	.file{
			// 		color: #20279B;
			// 		text-decoration: none;
			// 	}
			// }
			
			.login_btn{
				height: 100rpx;
				// line-height: 100rpx;
				// text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 40rpx auto;
				color: #fff;
				background: #20279B;
				border-radius: 80rpx;
				font-size: 28rpx;
			}
			.login_type{
				display: flex;
				justify-content: space-between;
				margin: 30rpx;
				font-size: 28rpx;
			}
			.other_login{
				text-align: center;
				color: #20279B;
				position: relative;
				font-size: 28rpx;
				.text_line{
					display: inline-block;
					height: 1px;
					background: #20279B;
					width: 30%;
				}
			}
		}
	}
		
</style>