/*
 * @Description: 忘记/设置/修改密码表单组件
 * @Author: wanqian, fengal
 * @Date: 2022-04-11 14:43:52
 */
<template>
	<view class="body">
		<view>
			<u-form :model="form" :rules="rules" label-width="0" ref="form" 
				:error-type="errorType">
				<u-form-item v-if="mode == 'forget'" required prop="mobile">
					<u-input maxlength="11" placeholder="请输入手机号" v-model="form.mobile"
						placeholder-style="color: #666" type="number" />
				</u-form-item>
				<u-form-item v-else required>
					<u-input :disabled="true" v-model="form.mobile" />
				</u-form-item>
				<u-form-item required prop="vcode">
					<u-input style="position: relative" v-model="form.vcode" maxlength="6" 
						placeholder="请输入短信验证码" type="number" placeholderStyle="#999999">
					</u-input>
					<text @click="handleGetVcode" class="code-btn">{{codeBtn.codeText}}</text>
				</u-form-item>
				<u-form-item required prop="newPassword">
					<u-input maxlength="16" placeholder="请输入新密码" v-model="form.newPassword"
						placeholder-style="color: #999" type="password" />
				</u-form-item>
				<u-form-item required prop="againPassword">
					<u-input maxlength="16" placeholder="请确认新密码" v-model="form.againPassword"
						placeholder-style="color: #999" type="password" />
				</u-form-item>
			</u-form>
		</view>
		<view class="view-limit-describe">密码长度8-16位，应包含数字、大小写字母及特殊字符</view>
		<view class="view-bottom">
			<u-button class="submit-btn" @click="handleConfirm" type="primary" shape="circle">
				确 认
			</u-button>
		</view>
		<view class="mask" v-show="sliderVerifyFlag"></view>
		<view class="pt-images-verification">
			<pt-images-verification  v-show="sliderVerifyFlag" :vcodeImg="vcodeImg" 
				:validate="handleValidate" @refresh="refreshImage" @success="handleValidSuccess" />
		</view>
	</view>
</template>

<script>
import SlideBlockVcode from '../slideblockvcode/SlideBlockVcode.vue';
	
export default {
	props: {
		mode: {type: String, default: 'set'},

		mobile: {type: String, default: ''},
		desensMobile: {type: String, default: ''},

		vcodeType: {type: String, default: ''},
	},
	
	components: {
		'pt-images-verification': SlideBlockVcode, 
	},
	
	data() {
		return {
			errorType: ['toast'],
			sliderVerifyFlag: false,
			imgWidth: 0,
			vcodeImg: {backgroundImg: '', slideBlockImg: '', height: 0},
			//验证码按钮
			codeBtn: {
			    codeTime: 60,
			    codeText: "获取验证码",
			    codeStatus: true
			},

			form: {},
			rules: {
				mobile: [
					{required: true, message: '请输入手机号', trigger: ['change', 'blur'],},
					{
						max: 11,
						message: '请输入正确的手机号'
					},
					{
						validator: (_rule, value, callback) => {
							if (!this.commonUtil.validateMobile(value)) {
								callback(new Error('请输入正确的手机号'))
							} else {
								callback();
							}
						},
						required: true,
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
				],
				vcode: [
					{
						required: true, message: '请输入验证码', trigger: ['change', 'blur'],
					},
					{
						max: 10,
						message: '输入验证码最多10位'
					},
				],
				newPassword: [
					{
						validator: (_rule, _value, callback) => {
							if (!this.form.newPassword) callback(new Error('请输入密码'))
							if (this.commonUtil.validatePassword(this.form.newPassword)) {
								callback(new Error(this.commonUtil.validatePassword(this.form.newPassword)))
							} else {
								callback();
							}
						},
						required: true,
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
				],
				
				againPassword: [
					{
						required: true, 
						message: '请再次确认密码',
						trigger: ['change', 'blur'],
					},{
						validator: (_rule, _value, callback) => {
							if (this.form.newPassword != this.form.againPassword) {
								callback(new Error('两次输入的密码不一致'))
							} else {
								callback();
							}
						},
						required: true,
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					},
				],
			},
			isDisable : false,
		}
	},
	
	methods: {
		//获取验证码按钮点击事件
		handleGetVcode() {
			if (this.isDisable) return;
			let mobile = this.mobile ? this.mobile : this.form.mobile;
			if (!this.commonUtil.validateMobile(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();
		},
		
		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) {
					this.vcodeImg = result.data;
				}
			});
		},
		
		handleValidate(offsetX) {
			return new Promise((resolve, _reject) => {
				let mobile = this.mobile ? this.mobile : this.form.mobile;
				let requestData = {
					method: 'POST',
					url: this.commonUtil.fillUrlArgments(this.commonUrl.URL_COMMON_SM_VCODE, this.vcodeType),
					param: {
						mobile: mobile,
						imageVcode: offsetX, 
					},
					contentType: this.commonConst.CNTYPE_URLENCODED,
					sendSessionid: true,
				};
				this.uniRequest(requestData).then(result => {
					if (result != null) {
						resolve(result.data)
					}
				});
			});
		},

		// 图形验证码验证成功
		handleValidSuccess() {
			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 codeCountDownTime = this.codeBtn.codeTime;
				codeCountDownTime--;
				this.codeBtn.codeTime = codeCountDownTime;
				this.codeBtn.codeText = '倒计时' + codeCountDownTime + "s";
				if (codeCountDownTime < 1) {
					clearInterval(timerId);
					this.isDisable = false;
					this.codeBtn.codeText = "重新获取";
					this.codeBtn.codeTime = 60;
					this.codeBtn.codeStatus = true;
				} else {
					this.isDisable = true;
				}
			}, 1000);
		},
		
		handleConfirm() {
			this.$refs.form.validate(valid => {
				if (!valid) return;
				let mobile = this.mobile ? this.mobile : this.form.mobile;
				let param = { 
						'mobile': mobile, 
						'vcode': this.form.vcode,
						'newPassword': this.form.newPassword,
					}
				this.$emit('submit', param)
			})
		},
	},

	watch: {
		desensMobile: {
			handler(newVal) {
				this.$set(this.form, 'mobile', newVal);
			},
			immediate: true,
		}
	},
	
	created() {
		this.$nextTick(()=>{
			if(!this.$refs.form) return;
			this.$refs.form.setRules(this.rules);
		})
	},
}
</script>

<style scoped lang="scss">
.body {
	padding: 0 50rpx;
	.code-btn {
		width: 236rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #178CFF;
		border-radius: 17px;
		text-align: center;
		font-size: 14px;
		color: #FFFFFF;
	}
	.view-limit-describe {
		margin-top: 26rpx;
		font-size: 13px;
		color: #EFA746;
		line-height: 18px;
	}
	.view-bottom {
		margin-top: 90rpx;
		.submit-btn {
			background-color: #3377FF;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
		}
	}
	.mask {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,.5);
		z-index: 9;
	}
	.pt-images-verification {
		position: absolute;
		top: 250rpx;
		width: 640rpx;
		margin: 0 auto;
		z-index: 99;
	}
}
</style>
<style>
page {
	background-color: #FFFFFF;
	width: 100%;
	height: 100%;
}
</style>