<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: 30rpx 0rpx;
	}

</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">
			<u-form :model="form" :rules="rules" ref="uForm">
				<u-form-item label="用户名" label-width="170" prop="username" left-icon="account">
					<u-input v-model="form.username" placeholder="请输入用户名"/>
				</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="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="rePassword" left-icon="lock">
					<u-input v-model="form.rePassword" placeholder="请确认密码"/>
				</u-form-item> -->
			</u-form>
			<view class="login-function-ctn">
				<text class="text--base--main" @click="goLoginFn">已有账号</text>
				<text class="text--base--grey" @click="goForgotPasswordFn">忘记密码?</text>
			</view>
			<view class="mt30">
				<u-button @click="registerFn" type="primary" shape="circle">注册</u-button>
			</view>
			<u-verification-code seconds="90" ref="uCode" @change="codeChange"></u-verification-code>
		</view>
	</view>
</template>

<script>
export default{
	data(){
		return{
			form:{
				username:"",
				phonenumber:"",
				code:"",
				password:"",
			},
			tips:'',
			rules:{
				username:[{
					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',
				}],
				
			}
		}
	},
	onReady(){
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad() {
		
	},
	methods:{
		goLoginFn(){
			uni.reLaunch({
				url:"./login"
			})
		},
		goForgotPasswordFn(){
			uni.navigateTo({
				url:"./forgotPassword"
			})
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				// sms/registered
				this.$post("/sms/registered",{phoneNumber:this.form.phonenumber,expirationTime:90,smsType:1}).then((res)=>{
					if(res.code === 200){
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						this.$u.toast('验证码已发送', 3000);
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}else{
						this.$tui.toast(res.msg, 3000);
					}
				})
			} else {
				this.$u.toast('倒计时结束后再发送', 3000);
			}
		},
		// end() {
		// 	this.$u.toast('倒计时结束');
		// },
		// start() {
		// 	this.$u.toast('倒计时开始');
		// },
		registerFn(){
			this.$refs.uForm.validate(valid => {
				console.log(valid,"valid")
				if (valid) {
					// if(!this.model.agreement) return this.$u.toast('请勾选协议');
					console.log('验证通过');
					// system/personal
					// this.$post("/system/registered",{
					this.$post("/system/personal",{
						username:this.form.username,
						password:this.form.password,
						phoneNumber:this.form.phonenumber,
						captcha:this.form.code,
					}).then((res)=>{
						console.log(res,"Res");
						if(res.code==200){
							this.$tui.toast('注册成功', 3000, true);
							uni.reLaunch({
								url:`./login?userType=user`
							})
							// uni.reLaunch({
							// 	url:`./registerLoading?phonenumber=${this.form.phonenumber}`
							// })
						}else{
							this.$tui.toast(res.msg, 3000);
						}
					})
				} else {
					console.log('验证失败');
				}
			});
		},
	}
}
</script>


