<template>
	<!-- 修改密码 -->
	<view class="card_passwd">
		<uv-navbar title="修改密码" :placeholder="true" :titleStyle="{color:'#ffffff'}" leftIconColor="#ffffff"
			bgColor="#1d345e" @leftClick="leftClick"></uv-navbar>
		<uv-form :model="userInfo" :rules="rules" :labelStyle="{color:'#ffffff'}" labelPosition="top" labelWidth="120"
			:borderBottom="false" ref="form">
			<uv-form-item label="旧密码" prop="oldCode">
				<uv-input v-model="userInfo.oldCode" placeholder="请填写密码" border="surround" color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="新密码" prop="sedNewCode">
				<uv-input v-model="userInfo.sedNewCode" password placeholder="请填写新密码" border="surround"
					color="#fff"></uv-input>
			</uv-form-item>
			<uv-form-item label="再次输入新密码" prop="newCode">
				<uv-input v-model="userInfo.newCode" password placeholder="请再次填写新密码" border="surround"
					color="#fff"></uv-input>
			</uv-form-item>
		</uv-form>
		<view class="repairs_btn_bottom" @click="submit"><uv-button type="primary" text="提交"></uv-button></view>
	</view>
</template>

<script setup lang="ts">
	import { deleteLocalStorage } from "@/utils/cache";
	import { PutUpdatePwd } from "@/api/login";
	import { ref } from 'vue';
	import { onReady } from "@dcloudio/uni-app";
	const userInfo = ref({
		oldCode: '',
		sedNewCode: '',
		newCode: '',
	})
	onReady(() => {
		// #ifdef APP-PLUS
		plus.navigator.setStatusBarStyle("light");
		// #endif
	})
	var surePwd = (rule : any, value : any, callback : any) => {
		if (value === '') {
			callback(new Error('请再次输入密码'));
		} else if (value !== userInfo.value.sedNewCode) {
			callback(new Error('两次输入密码不一致!'));
		} else {
			callback();
		}
	}
	const rules = ref({
		'oldCode': {
			type: 'string',
			required: true,
			message: '请填写密码',
			trigger: ['blur', 'change']
		},
		'sedNewCode': {
			type: 'string',
			required: true,
			message: '请填写新密码',
			trigger: ['blur', 'change']
		},
		'newCode': [{
			type: 'string',
			required: true,
			message: '请再次填写新密码',
			trigger: ['blur', 'change']
		}, { validator: surePwd, required: true, trigger: 'blur' }],
	})
	const form : any = ref(null)
	// 提交
	function submit() {
		form.value.validate().then(() => {
			uni.showLoading({
				mask: true
			});
			PutUpdatePwd({
				oldPassword: userInfo.value.oldCode,
				newPassword: userInfo.value.newCode,
			}).then((res : any) => {
				if (res.code == 200) {
					// uni.showToast({
					// 	icon: 'success',
					// 	title: '修改成功'
					// })
					// 提示
					uni.showToast({
						title: "修改成功",
						duration: 2000
					})
					// 延时跳转
					setTimeout(() => {
						deleteLocalStorage("token");
						uni.navigateTo({
							url: "/pages/login/index"
						})
					}, 2000)
				} else {
					uni.showToast({
						icon: 'error',
						title: res.msg
					})
				}
				uni.hideLoading();
			})
		}).catch(() => {
			uni.showToast({
				icon: 'error',
				title: '校验失败'
			})
		})
	}

	function leftClick() {
		uni.navigateBack({
			delta: 1
		});
	}
</script>

<style lang="scss" scoped>
	.card_passwd {
		padding: 0rpx 30rpx 30rpx 30rpx;
		width: calc(100% - 60rpx);
	}

	.repairs_btn_bottom {
		position: fixed;
		bottom: 20rpx;
		left: 0;
		right: 0;
		padding: 20rpx;
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
		padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
	}
</style>