<template>
	<view class="password">
		<view class="title">
			重新设置密码
		</view>
		<u-form class="edit-form-wrapper" ref="form" :model="form" :rules="rules" labelWidth="180" labelPosition="top">
			<u-form-item prop="oldPassword">
				<u-input border="none" v-model="form.oldPassword" password clearable placeholder="请输入原密码" />
			</u-form-item>
			<u-divider :dashed="true"></u-divider>
			<u-form-item prop="newPassword">
				<u-input border="none" v-model="form.newPassword" password clearable placeholder="请输入新密码" />
			</u-form-item>
			<u-divider :dashed="true"></u-divider>
			<u-form-item prop="confirmPassword">
				<u-input border="none" v-model="form.confirmPassword" password clearable placeholder="请确认新的密码" />
			</u-form-item>
			<u-divider :dashed="true"></u-divider>
		</u-form>
		<view class="tips">
			<u-icon size="12" color="#aaa" name="error-circle-fill"></u-icon>长度在6位以上，密码可为数字、大小写字母
		</view>
		<u-button class="btn" shape="circle" :disabled="!disabled" type="success" @click="onSave">确认修改</u-button>
		
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapActions } from 'vuex'
	
export default {
	name: 'MinePassword',			// 修改密码
	data() {
		return {
			form: {
				oldPassword:"",
				newPassword:"",
				confirmPassword:""
			},
			rules: {
				oldPassword: [
					{ required: true, message: '旧密码不能为空' }
				],
				newPassword: [
					{ required: true, message: '密码不能为空' }
				],
				confirmPassword: [
					{
						required: true,
						validator: (rule, value, callback) => {
							const { newPassword } = this.form
							if (value && value === newPassword) {
								return true
							}
							return false
						},
						message: '两次密码不一致'
					}
				]
			}
		}
	},
	computed:{
		disabled(){
			return Boolean(this.form.oldPassword&&this.form.newPassword&&this.form.confirmPassword);
		}
	},
	methods: {
		...mapActions(['userFadeOut']),
		
		/** 保存按钮处理 */
		async onSave() {
			await this.$refs.form.validate()
			const { oldPassword, newPassword } = this.form
			await uni.$u.http.put('/system/user/profile/updatePwd', null, { params: { oldPassword, newPassword } })
			await this.userFadeOut()
			this.$refs.uToast.show({
				message: '修改成功',
				complete: () => {
					uni.$u.route({ type: 'reLaunch', url: 'pages/login/index' });
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.password{
		padding: 46rpx;
		box-sizing: border-box;
		.title{
			font-size: 40rpx;
			margin-bottom: 60rpx;
		}
		.tips{
			display: flex;
			align-items: center;
			font-size: 22rpx;
			color: #aaa;
		}
		.btn{
			margin-top: 40rpx;
		}
	}
	/deep/ {
		.u-form{
			// background-color: #fff;
			// padding:20rpx;
		}
	}
</style>
