<template>
	<view class="wrapper">
		<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">
			<!-- <view class="login_title">
				{{loginTypeName}}
			</view> -->
			<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="agree" v-if="loginType!='resetpw'">
				<label  class="radio"><radio  @click="c_agreeFlag" :checked="agreeFlag" /></label>
				<text>已阅读并同意</text>
				<text class="file" @click="getFile(1)">服务协议</text>
				<text>和</text>
				<text class="file" @click="getFile(2)">隐私政策</text>
			</view>
			<view class="login_btn" @click="loginInCheck()" v-if="loginType!='resetpw'">
				<!-- {{loginType=='register'?'注册':'登录'}} -->
				登录 / 注册
			</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>
				</view>
			</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; // 获取 url 中的 from 参数
					// 从 TabBar 页跳转过来，用 switchTab 返回
				    if (from === 'index') {
				     uni.switchTab({
				     	url:'/pages/index/index'
				     })
				    } else if (from === 'personalCenter') {
						
						this.loginIn(1,'personalCenter')
						// uni.switchTab({
						// 	url:'/pages/personalCenter/personalCenter'
						// })
				    } else if (pages.length > 1) {
						
				      // 从普通页跳转过来，且页面栈中有上一页，直接返回
				      uni.navigateBack({ delta: 1 });
					  this.loginIn(1,'')
				    }else {
				      // 默认情况（如直接打开登录页），跳转到首页
				      uni.switchTab({
				        url: '/pages/index/index'
				      });
				    }
				  },
				getFile(type){
					uni.navigateTo({
						url:`/components/clause/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){
					console.log('loginType',loginType);
					console.log('this.loginType',this.loginType);
					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;
			// min-height: 65%;
			.login_title{
				text-align: center;
				font-size: 40rpx;
				margin-bottom: 60rpx;
			}
			form{
				.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>