<style lang="scss" scoped>
	.register-ctn{
		width: 100%;
		height: 100%;
		padding: 0 60rpx;
		:not(not) {
			box-sizing: border-box;
		}
	}
	.register-form{
		background-color: #fff;
		border-radius: $uni-border-radius-lg;
		padding: 40rpx;
		box-shadow: $box-shadow;
		margin-top: 30rpx;
		margin-bottom: 40rpx;
	}
	.login-bg{
		width: 100%;
		height: 500rpx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: -1;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.login-header{
		text-align: center;
		&-img{
			width: 160rpx;
			height: 160rpx;
			margin-top: 40rpx;
		}
		&-text{
			font-size: 46rpx;
			font-family: Source Han Sans CN;
			font-weight: 800;
			color: #FFFFFF;
			margin-top: 20rpx;
		}
	}
	.login-function-ctn{
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		// padding: 30rpx 0rpx;
	}
	.login-form-title{
		text-align: center;
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 800;
		color: #262626;
	}
</style>

<template>
	<view class="register-ctn">
		<view class="login-bg">
			<image src="http://static.drgyen.com/app/hc-app-power/images/login-header.png" mode=""></image>
		</view>
		<view class="login-header">
			<view class="">
				<!-- #ifdef APP-PLUS -->
				<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-app-logo.png" mode=""></image>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<image class="login-header-img" src="http://static.drgyen.com/app/hc-app-power/images/login-logo.png" mode=""></image>
				<!-- #endif -->
			</view>
			<!-- <view class="login-header-text">综合能源管理</view> -->
		</view>
		<view class="register-form">
			<view class="login-form-title">找回密码</view>
			<u-form :model="form" :rules="rules" ref="uForm">
				<u-form-item label="用户类型" label-width="170" left-icon="account">
					<u-input @click="openUserTypeSelectFn" v-model="form.userType" type="select" placeholder="请选择用户类型"/>
					<u-select v-model="usetTypeShow" :default-value="[0]" @confirm="userTypeConfirmFn" :list="usetTypeList"></u-select>
				</u-form-item>
				<u-form-item label="手机号" label-width="170" prop="phonenumber" left-icon="phone">
					<u-input v-model="form.phonenumber" maxlength="11" placeholder="请输入手机号"/>
				</u-form-item>
				<u-form-item label="验证码" label-width="170" prop="code" left-icon="email">
					<u-input v-model="form.code" maxlength="8" placeholder="请输入验证码"/>
					<u-button slot="right" type="primary" size="mini" @click="getCode">{{tips}}</u-button>
				</u-form-item>
				<u-form-item label="新密码" label-width="170" prop="password" left-icon="lock">
					<u-input v-model="form.password" type="password" placeholder="请输入密码"/>
				</u-form-item>
				<u-form-item label="重复密码" label-width="170" prop="rePassword" left-icon="lock">
					<u-input v-model="form.rePassword" type="password" placeholder="请确认密码"/>
				</u-form-item>
			</u-form>
			<view class="login-function-ctn">
				<text class="text--base--main" @click="goLoginFn">去登入</text>
			</view>
			<view class="mt30">
				<u-button @click="confirmEditFn" type="primary" shape="circle">确认修改</u-button>
			</view>
			<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
			<u-modal ref="uModal" v-model="isSuccess" content="密码修改成功,现在前往登入" confirm-text="好的" @confirm="confirmGoPage" :async-close="true"></u-modal>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			usetTypeShow:false,
			form:{
				equipment:"",
				phonenumber:"",
				code:"",
				password:"",
				rePassword:"",
				userType:'企业用户',
				userTypeVal: 'TENANT'
			},
			tips:'',
			usetTypeList:[
			// 	{
			// 	value: 'PERSONAL',
			// 	label: '普通用户'
			// },
			{
				value: 'TENANT',
				label: '企业用户'
			}],
			rules:{
				equipment:[{
					required:true,
					message: '请输入设备',
					trigger: 'blur',
				}],
				phonenumber:[{
					required:true,
					message:"请输入电话号码",
					trigger:"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: 'blur',
				}],
				password:[{
					required:true,
					message: '请输入密码',
					trigger: 'blur',
				},{
					min:6,
					max:18,
					message: '请输入6-18位密码',
					trigger: 'blur',
				}],
				rePassword:[{
					required:true,
					message: '请重新输入密码',
					trigger: 'blur',
				},{
					validator: (rule, value, callback) => {
						return value === this.form.password;
					},
					message: '两次输入的密码不相等',
					trigger: ['change','blur'],
				}],
			},
			isSuccess: false
		}
	},
	onReady(){
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(e) {
		this.form.userType = e.userType=="user"?"普通用户":"企业用户";
		this.form.userTypeVal = e.userType=="user"?"PERSONAL":"TENANT";
	},
	methods:{
		userTypeConfirmFn(e){
			console.log(e,"e");
			this.form.userType = e[0].label;
			this.form.userTypeVal = e[0].value;
		},
		openUserTypeSelectFn(){
			this.usetTypeShow = true;
		},
		goLoginFn(){
			uni.reLaunch({
				url:"./login"
			})
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				this.$post("/sms/password",{phoneNumber:this.form.phonenumber,expirationTime:90}).then((res)=>{
					if(res.code === 200){
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送', 3000);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}
				})
			} else {
				this.$u.toast('倒计时结束后再发送', 3000);
			}
		},
		// 提交修改
		confirmEditFn(){
			this.$refs.uForm.validate(valid => {
				console.log(valid,"valid")
				if (valid) {
					// if(!this.model.agreement) return this.$u.toast('请勾选协议');
					console.log('验证通过');
					if(!this.form.userType){
						this.$tui.toast("请选择用户类型", 3000);
						return;
					}
					let url = "/system/user/profile/retrievePwd";
					this.$put(url,{
						newPassword:this.form.password,
						phoneNumber:this.form.phonenumber,
						userType: this.form.userTypeVal,
						// captcha:this.form.code,
						code:this.form.code
					}).then((res)=>{
						console.log(res,"Res");
						if(res.code==200){
							// this.$tui.toast('修改成功', 2000, true);
							// uni.reLaunch({
							// 	url:"./login"
							// })
							this.isSuccess = true;
						}else{
							this.$tui.toast(res.msg, 3000);
						}
					})
				} else {
					console.log('验证失败');
				}
			});
		},
		confirmGoPage() {
			this.isSuccess = true;
			uni.reLaunch({
				url:"./login"
			})
		}
	}
}
</script>


