<template>
	<view class="content1">
		<view class="change-password">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="form" labelWidth="100%"
				:labelStyle="{color:'#333',  fontSize:'34upx', fontWeight:'bold'}">
				<u-form-item label="原密码" prop="oldPwd" borderBottom>
					<u--input v-model="form.oldPwd" type="password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="新密码" prop="nowPwd" borderBottom>
					<u--input v-model="form.nowPwd" type="password" border="none"></u--input>
				</u-form-item>
				<u-form-item label="确认新密码" prop="confirmPwd" borderBottom>
					<u--input v-model="form.confirmPwd" type="password" border="none"></u--input>
				</u-form-item>
				<u--text type="error" text="密码长度8~32位，须包含数字、字母、符号至少2种或以上元素"></u--text>
				<u-form-item>
					<u-button type="primary" shape="circle" text="确定" @click="$u.debounce(submitPassword, 1000, true)">
					</u-button>
				</u-form-item>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		setUpdatePassword
	} from "../../../api";

	export default {
		data() {
			return {
				form: {
					oldPwd: '',
					nowPwd: '',
					confirmPwd: '',
				},
				rules: {
					oldPwd: [{
							required: true,
							message: '请输入旧密码',
							trigger: 'blur'
						},
						{
							min: 8,
							message: '长度最少8个字符',
							trigger: 'blur'
						},
					],
					nowPwd: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							pattern: /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)])+$).{8,32}$/,
							message: '密码格式不正确',
							trigger: ['blur']
						},
					],
					confirmPwd: [{
							required: true,
							message: '请再次输入新密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return value === this.form.nowPwd
							},
							message: '两次输入密码不一致',
							trigger: 'blur',
						}
					],
				},
			}
		},
		methods: {
			submitPassword() {
				this.$refs.form.validate().then(async () => {
					await setUpdatePassword({
						PASSWORD: this.form.oldPwd,
						NEWPASSWORD: this.form.nowPwd,
						USER_ID: this.$store.getters.getUserInfo.USER_ID,
						USERNAME: this.$store.getters.getUserInfo.USERNAME
					})
					this.$refs.uToast.show({
						message: '修改成功',
						type: 'success',
						complete: () => {
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}).catch((error) => {
					this.$refs.uToast.error('请填写完整')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.change-password {
		background-color: #fff;
		border-radius: 20upx;
		padding: 40upx;
	}
</style>