<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="appConfig.logo" mode=""></image>
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<image class="login-header-img" :src="appConfig.logo" 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" prop="oldPassword" left-icon="lock">
					<u-input v-model="form.oldPassword" type="password" 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="rePassword" left-icon="lock">
					<u-input v-model="form.rePassword" type="password" placeholder="请确认密码"/>
				</u-form-item>
			</u-form>
			<view class="mt30">
				<u-button @click="confirmEditFn" type="primary" shape="circle">确认修改</u-button>
			</view>
			<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 {
				form:{
					oldPassword: '',
					password: '',
					rePassword: ''
				},
				rules: {
					oldPassword:[{
						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
			}
		},
		computed:{
			appConfig() {
				return this.$store.state.app.appConfig
			},
		},
		onReady(){
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 提交修改
			confirmEditFn(){
				this.$refs.uForm.validate(valid => {
					console.log(valid,"valid")
					if (valid) {
						this.$put(`/system/user/profile/updatePwd`,{
							newPassword:this.form.password,
							oldPassword:this.form.oldPassword,
						})
						.then((res)=>{
							if(res.code==200){
								this.isSuccess = true;
							}else{
								this.$tui.toast(res.msg, 3000);
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			confirmGoPage() {
				this.isSuccess = true;
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<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-form-title{
		text-align: center;
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 800;
		color: #262626;
	}
</style>
