<!-- 修改密码 -->
<template>
	<view class="change-password">
		<view class="main">
			<u--form
				labelPosition="left"
				:model="form"
				:rules="rules"
				labelWidth="100"
				ref="form">
				<u-form-item label="旧密码" prop="oldPassword" borderBottom :required="true">
					<u--input
						placeholder="请输入旧密码"
						v-model="form.oldPassword"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="新密码" prop="newPassword" borderBottom :required="true">
					<u--input
						placeholder="请输入新密码"
						v-model="form.newPassword"
						border="none"
						clearable
					></u--input>
				</u-form-item>
				
				<u-form-item label="确认密码" prop="confirmPassword" borderBottom :required="true">
					<u--input
						placeholder="请输入确认密码"
						v-model="form.confirmPassword"
						border="none"
						clearable
					></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="button" @click="submit">提交</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					// 旧密码规则
					'oldPassword': [
						{
							type: 'string',
							required: true,
							message: '请填写旧密码',
							trigger: ['blur', 'change']
						},
						// {
						// 	min: 8,
						// 	max: 30,
						// 	message: '长度在8-30个字符之间'
						// }
					],
					// 新密码规则
					'newPassword': [
						{
							type: 'string',
							required: true,
							message: '请填写新密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
					],
					// 确认密码规则
					'confirmPassword': [
						{
							type: 'string',
							required: true,
							message: '请填写确认密码',
							trigger: ['blur', 'change']
						},
						{
							min: 8,
							max: 30,
							message: '长度在8-30个字符之间'
						},
						// 自定义规则判断是否包含字母"A"
						{
							validator: (rule, value, callback) => {
								console.log('---', value, this.form.newPassword)
								if(value + '' === this.form.newPassword + '') {
									console.log('true')
									return true;
								}
								callback(new Error('密码不一致'));
							}
						},
					],
				},
				form: {
					oldPassword: '',  //旧密码
					newPassword: '',  //新密码
					confirmPassword: '',  //确认密码
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					uni.$u.toast('校验通过')
					//调改密码接口
				}).catch(errors => {
					uni.$u.toast('请将信息填写完整')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-password {
		width: 100%;
		height: 100%;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background: linear-gradient(#bed5fe 0%, #eef1fd 100%);
		.main {
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 16rpx;
		}
		.button {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			color: #fff;
			font-weight: 600;
			letter-spacing: 4rpx;
			background-color: #408bf6;
			border: 2rpx solid #408bf6;
			border-radius: 10rpx;
			margin: 64rpx 0 32rpx 0;
			white-space: nowrap;
			box-sizing: border-box;
			&:active {
				background-color: #fff;
				color: #408bf6;
			}
		}
	}

</style>
<style lang="scss">
	.change-password {
		.u-form-item__body__left__content__label {
			white-space: nowrap;
			font-weight: 600;
		}
		.u-form-item {
			margin-bottom: 20rpx;
		}
	}
</style>