/*
 * @Description: 验证码登录页面
 * @Author: fengal
 * @Date: 2024-01-02 17:43:52
 */
<template>
	<view class="body">
		<image style="width: 124rpx; height: 124rpx;" :src="options.instLogo" 
		    mode="aspectFill">
		</image>
		<view class="code-title" >欢迎进入{{options.platformAlias || ''}}</view>
		<view style="margin-top: 76rpx; width: 100%;">
			<u-form :model="userForm" :rules="rules" ref="userForm" :error-type="errorType">
				<u-form-item prop="mobile">
					<u-input  v-model="userForm.mobile" placeholderStyle="#999999"
						placeholder="请输入手机号" type="number" >
					</u-input>
				</u-form-item>
				<u-form-item prop="smsCode">
					<view class="view-code">
						<u-input maxlength="6" v-model="userForm.smsCode" placeholderStyle="#999999"
							placeholder="请输入短信验证码" type="number">
						</u-input>
						<view @click.stop="handleMobileCode" class="code-begin-style" :style="options.buttonCustomStyle">
							{{codeBtn.codeText}}
						</view>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<view class='bottom'>
			<view class='bottom-text'>
				<u-checkbox shape="circle" size="16px" color="rgba(51, 119, 255, 1)" 
				    @change="handleChangeCheckBox" v-model="checked">
				</u-checkbox>
				<view>
					<text>我已阅读并同意</text>
					<text class="agreement-text" :style="{color: options.textFontColor}" @click="handleServiceAgreement">
						《用户协议》
					</text>
					<text>及</text>
					<text class="agreement-text" :style="{color: options.textFontColor}" @click="handlePrivacyAgreement">
						《隐私权政策》
					</text>
					<text>并授权本平台获取本机手机</text>
				</view>
			</view>
		</view>
		<button type="primary" @click="handleCodeLoginThrottle" class="login" :style="options.buttonCustomStyle">登 录</button>
		<view class="view-bottom">
			<view class="view-bottom-item left" :style="{color: options.textFontColor}" v-if="options.useUniLoginProcess" 
				@click="handleUniLogin">一键登录</view>
			<view class="view-bottom-item right" :style="{color: options.textFontColor}"  v-if="options.usePasswardLogin" 
				@click="handlePasswardLogin">账号密码登录</view>
		</view>
		<view class="mask" v-show="sliderVerifyFlag"></view>
		<view class="pt-images-verification">
			<slide-block-vcode v-show="sliderVerifyFlag" :vcodeImg="vcodeImg" 
				:validate="handleValidate" @refresh="refreshImage" 
				@success="handleSuccess" />
		</view>
	</view>
</template>

<script>
import SlideBlockVcode from '../../slideblockvcode/SlideBlockVcode.vue';

export default {
	props: {
		loginUrl: {type: String, default: ''},

		options: {type: Object, default: function() {return {}}},

		agreementUrlList: {type: Object, default: function() {return {}}},
	},

	components: {
		'slide-block-vcode': SlideBlockVcode, 
	},

	data() {
		return {
			serviceUrl: '',//服务协议
			privacyUrl: '',//隐私权政策
			errorType: ['toast'],
			sliderVerifyFlag: false,
			//验证码按钮
			codeBtn: {
				codeTime: 60,
				codeText: "获取验证码",
				codeStatus: true
			},
			userForm:{
				mobile: '',
				smsCode: ''
			},
			isDisable : false,
			checked: false,
			imgWidth: 0,
			vcodeImg: {backgroundImg:'', slideBlockImg:'', height: 0},
			rules: {
				mobile: [{
					required: true, message: '请输入手机号', max: 11, 
					trigger: ['change', 'blur'],
				},{
					validator: (_rule, value, callback) => {
						if (!this.commonUtil.validateMobile(value)) {
							callback(new Error('请输入正确的手机号'))
						} else {
							callback();
						}
					},
					required: true,
					// 触发器可以同时用blur和change
					trigger: ['change', 'blur'],
				}],
				smsCode: [{
					required: true, message: '请输入正确的短信验证码', max:10, 
					trigger: ['change', 'blur'],
				}]
			},
			handleCodeLoginThrottle: this.interactionUtil.throttle(this.handleCodeLogin),
		}
	},
	
	methods: {
		//去往本机号码一键登录
		handleUniLogin() {
			this.$emit('uni-login');
		},
		
		//账号密码登录
		handlePasswardLogin() {
			this.$emit('show-passwd-login');
		},
		
		handleChangeCheckBox(item) {
			this.checked = item.value;
		},
		
		//获取验证码按钮点击计时事件
		handleMobileCode() {
			if(this.isDisable)return;
			if (!this.commonUtil.validateMobile(this.userForm.mobile)) {
				uni.showToast({icon: 'none', title: '请输入正确的手机号'});
				return;
			}
			this.sliderVerifyFlag = true;
			let obj = uni.createSelectorQuery().select('.pt-images-verification');
		   	obj.boundingClientRect(rect => {
		   		this.imgWidth = parseInt(rect.width);
		   		this.refreshImage();
		   	}).exec();
		},
		
		//跳转服务协议
		handleServiceAgreement() {
			this.$emit('show-service-agreement');
		},
		
		//跳转隐私协议
		handlePrivacyAgreement() {
			this.$emit('show-privacy-agreement');
		},
		
		async refreshImage() {
			let requestData = {
				method: 'GET',
				url: this.commonUtil.fillUrlArgments(this.commonUrl.URL_GET_SLIDE_IMAGE_VCODE, this.imgWidth),
				loadingMsg: '获取图片...',
				sendSessionid: true
			};
			await this.uniRequest(requestData).then(result => {
				if (result == null) {
					return;
				}
				this.vcodeImg = result.data;
			});
		},
			
		// 验证成功
		handleSuccess() {
			uni.showToast({icon: 'none', title: '验证成功'});
			this.refreshImage();
			this.isDisable = true;
			this.sliderVerifyFlag = false;
			if (!this.codeBtn.codeStatus) return false;

			this.codeBtn.codeStatus = false;
			let timerId = setInterval(() => {
				let codetime = this.codeBtn.codeTime;
				codetime--;
				this.codeBtn.codeTime = codetime;
				this.codeBtn.codeText = '倒计时'+ codetime + "s";
				if (codetime < 1) {
					clearInterval(timerId);
					this.isDisable = false;
					this.codeBtn.codeText = "重新获取";
					this.codeBtn.codeTime = 60;
					this.codeBtn.codeStatus = true;
				} else {
					this.isDisable = true;
				}
			}, 1000);
		},
			
		handleValidate(offsetX) {
			return new Promise((resolve, _reject) => {
				let requestData = {
					method: 'POST',
					url: this.commonUtil.fillUrlArgments(this.commonUrl.URL_COMMON_SM_VCODE, this.options.vcodeType),
					param: {
						mobile: this.userForm.mobile, 
						imageVcode: offsetX, 
					},
					contentType: this.commonConst.CNTYPE_URLENCODED,
					sendSessionid: true
				};
				this.uniRequest(requestData).then(result => {
					if (result != null) {
						resolve(result.data)
					}
				});
			});
		},
		
		//登录
		multipulLogin(mode, username, password) {
			if (this.options.encryptionKeyName && this.options.encryptionKey) {
				this.encryptionUnifiedLogin(mode, username, password, this.options.encryptionKeyName, this.options.encryptionKey);
			} else {
				this.unifiedLogin(mode, username, password);
			}
		},

		// 通用登陆
		unifiedLogin(mode, username, password) {
			this.commonUtil.unifiedLogin(mode, username, password, this.loginUrl).then(result => {
					if (result != null) {
							this.$emit('login', mode, username, password, result.data);
					}
			}).catch(err => {
					uni.showToast({icon: 'none', title: err.msg, duration: this.commonConst.TOAST_DURATION, mask: true});
			})
		},

		// 接口加密版--通用登陆
		encryptionUnifiedLogin(mode, username, password, keyName, key) {
			this.commonUtil.encryptionUnifiedLogin(mode, username, password, this.loginUrl, keyName, key).then(result => {
					if (result != null) {
							this.$emit('login', mode, username, password, result.data);
					}
			}).catch(err => {
					uni.showToast({icon: 'none', title: err.msg, duration: this.commonConst.TOAST_DURATION, mask: true});
			})
		},
		
		//登录
		handleCodeLogin() {
			this.$refs.userForm.validate(valid => {
				if (!valid) return;
				if (!this.checked){
					uni.showToast({icon: 'none', title: '请阅读并勾选协议', duration: this.commonConst.TOAST_DURATION, mask: true});
					return;
				} 
				
				this.multipulLogin(this.commonConst.LOIGN_PREFIX_VERIFY_CODE, this.userForm.mobile, this.userForm.smsCode);
			})
		},
	},
		
	created () {
		this.serviceUrl = this.agreementUrlList.serviceAgreement;
		this.privacyUrl = this.agreementUrlList.privacyAgreement;
	},
  
	mounted () {
		this.$refs.userForm.setRules(this.rules);
	}
}
</script>

<style>
page {
	background-color: #FFFFFF;
	position: relative;
	width: 100%;
	height: 100%;
}

.body {
	position: relative;
	width: 100%;
  height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 140px 50rpx 0 50rpx;
}

.code-title {
	font-size: 18px;
	font-weight: 500;
	color: #272727;
	margin-top: 36rpx;
}

.view-code {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.code-change {
	font-size: 13px;
	font-weight: 400;
	color: #0081FF;
	line-height: 18px;
	margin-top: 13px;
	margin-bottom: 62rpx;
}

.code-begin-style {
	width: 236rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #178CFF;
	border-radius: 17px;
	text-align: center;
	font-size: 14px;
	font-weight: 400;
	color: #FFFFFF;
}

.pt-images-verification {
	position: absolute;
	top: 250rpx;
	width: 640rpx;
	margin: 0 auto;
	z-index: 99;
}

.bottom {
	width: 100%;
	margin-top: 17px;
}

.bottom-text {
	display: flex;
	font-size: 22rpx;
	font-weight: 400;
	color: #999999;
}

.bottom-text .u-checkbox .u-checkbox__label {
	margin-left: -12rpx;
}

.bottom-text .agreement-text {
	color: rgba(51, 119, 255, 1);
}
.title-main {
	padding: 96rpx 60rpx;
	font-weight: 400;
	color: #9A9A9A;
	font-size: 13px;
	text-align: left;
}

.title-main .main-title {
	margin-bottom: 16rpx;
	font-weight: 600;
	color: #272727;
	font-size: 20px;
}
.login {
	width: 100%;
	height: 48px;
    background: #178CFF;
	border-radius: 22px;
	margin-top: 110rpx;
}

.mask {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.5);
	z-index: 9;
}

.view-bottom {
	width: 100%;
	margin-top: 50rpx;
}

.view-bottom-item {
	display: inline-block;
	width: 50%;
	height: 36rpx;
	line-height: 36rpx;
	font-size: 13px;
	font-weight: 400;
	color: #0081FF;
}
.view-bottom-item.left {
	float: left;
	text-align: left;
}
.view-bottom-item.right {
	float: right;
	text-align: right;
}
</style>