<template>
	<view id="forget-password">
		<nav-bar :is-back="true" :background="'#fff'" :color="'#222'" :borderBottom="false" title="忘记密码" style="color: #222;"></nav-bar>
		<view class="list-box">
			<u-form :model="form" ref="uForm" label-position="top">
				<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" label="手机号" prop="phone" label-width="150">
					<u-input placeholder="请输入手机号" v-model="form.phone" type="number"></u-input>
				</u-form-item>
				<u-form-item label="验证码" prop="code" label-width="150">
					<u-input placeholder="请输入手机验证码" v-model="form.code" type="text"></u-input>
					<u-button class="codeBtn" slot="right" @click="getCode">{{codeTips}}</u-button>
				</u-form-item>
				<u-form-item label="新密码" prop="password">
					<u-input :password-icon="false" type="password" v-model="form.password" placeholder="请输入新密码"></u-input>
				</u-form-item>
				<u-form-item label="确认密码" label-width="150" prop="rePassword">
					<u-input :password-icon="false" type="password" v-model="form.rePassword" placeholder="请再次输入密码"></u-input>
				</u-form-item>
			</u-form>
		</view>
		<view class="btn">
			<button type="default" @click="submit">确认提交</button>
		</view>
		<u-verification-code seconds="30" ref="uCode" @change="codeChange"></u-verification-code>
	</view>
</template>

<script>
	import NavBar from '@/common/components/navbar/NavBar.vue'
	export default {
		data() {
			return {
				codeTips: '',
				form: {
					phone: '',
					code: '',
					password: '',
					rePassword: '',
				},
				rules: {
					phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['change','blur'],
						},
						{
							type: 'number',
							message: '验证码只能为数字',
							trigger: ['change','blur'],
						}
					],
					password: [
						{
							required: true,
							message: '请输入密码',
							trigger: ['change','blur'],
						},
						// {
						// 	// 正则不能含有两边的引号
						// 	pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]+\S{5,12}$/,
						// 	message: '需同时含有字母和数字，长度在6-12之间',
						// 	trigger: ['change','blur'],
						// }
					],
					rePassword: [
						{
							required: true,
							message: '请重新输入密码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.password;
							},
							message: '两次输入的密码不相等',
							trigger: ['change','blur'],
						}
					],
				}
			}
		},
		components: {
			NavBar
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode(){
				if(this.$u.test.mobile(this.form.phone)){
					if(this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						let opt = {
							url: '192.168.18.139'+'/prod-api/system/sms/send-message?phoneNumber=' + this.form.phone+'&sendMessageType='+'CHANGE_PWD_CODE'+'&expirationTime='+'300',
							method: "POST",
						}
						this.$request.basicRequest(opt,{}).then(res => {
							// console.log("获取验证码",res);
							
							if(res.code==200){
								uni.hideLoading();
								// 这里此提示会被this.start()方法中的提示覆盖
								this.$u.toast('验证码已发送');
								// 通知验证码组件内部开始倒计时
								this.$refs.uCode.start();
							}else{
								this.$u.toast(res.msg);
							}
						}, error => {
							this.$u.toast('服务器开小差了呢，请您稍后再试')
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('手机号码不正确');
				}
				
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// console.log('验证通过');
						let opt = {
							url: '192.168.18.139'+ '/prod-api/system/user/profile/reset-password',
							method: "PUT",
						}
						let params = {
							phoneNumber: this.form.phone,
							captcha: this.form.code,
							newPassword: this.form.password,
						}
						this.$request.basicRequest(opt,params).then(res => {
							// console.log("提交成功",res);
							if(res.code==200){
								this.$u.toast(res.msg);
							}else{
								this.$u.toast(res.msg);
							}
						}, error => {
							this.$u.toast('服务器开小差了呢，请您稍后再试')
						})
					} else {
						console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	#forget-password{
	}
	.list-box{
		padding: 0 60rpx;
		/deep/.u-form-item{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			.u-form-item--left__content__label{
				color: #010101;
			}
			.uni-input-wrapper{
				font-size: 32rpx;
			}
		}
	}
	.codeBtn{
		background: #fff;
		padding: 0;
		height: 30rpx;
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		color: #0092FF;
		line-height: 36rpx;
		&::after{ border: none;}
		&.u-default-hover{
			// font-weight: bold;
			background: #fff !important;
			color: #666 !important;
			border-color: #fff !important;
		}
	}
	.btn{
		display: flex;
		justify-content: center;
		height: 142rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		button{
			width: 590rpx;
			height: 85rpx;
			background: #3683FD;
			border-radius: 43rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
