<template>
	<view class="w-body">
		<w-public />
		<w-navbar data-style="--color-1:var(--w-success-dark-1);--color-2:var(--w-success-dark);" fixed left-back title="重置密码"></w-navbar>
		<u-notice-bar text="默认密码为身份证后6位" mode="closable"></u-notice-bar>
		<view class="item-group">
			<view class="item">
				<view class="item-title">旧密码 : </view>
				<view class="item-body">
				    <u--input
					v-model="input.oldPassword"
				      placeholder="请输入旧密码"
				      border="bottom"
					  type="password"
				      clearable
				    ></u--input>
				</view>
				<view></view>
			</view>
			<view class="item">
				<view class="item-title">新密码 : </view>
				<view class="item-body">
				    <u--input
					v-model="input.newPassword"
				      placeholder="请输入新密码"
				      border="bottom"
					  type="password"
				      clearable
				    ></u--input>
				</view>
				<view></view>
			</view>
			<view class="item">
				<view class="item-title">再输入 : </view>
				<view class="item-body">
				    <u--input
					v-model="input.confirmPassword"
				      placeholder="请再输入一次新密码"
				      border="bottom"
					  type="password"
				      clearable
				    ></u--input>
				</view>
				<view></view>
			</view>
		</view>
		
		
		<view class="w-btn" hover-class="w-hover-before" style="--color-1:var(--w-success-dark);--color-2:var(--w-success-dark);"  @click="$u.throttle(resetPwd())">重置密码</view>
		
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { updatePwd } from "@/api/system/user/profile"
	
	const input = ref({
		oldPassword:"",
		newPassword:"",
		confirmPassword:""
	});
	
	
	
	const resetPwd = async()=>{
		if(!input.value.newPassword){
			uni.showToast({
				title:"新密码必填"
			});
			return;
		}
		if(!/^\S{3,20}$/.test(input.value.newPassword)){
			uni.showToast({
				title:"新密码不合规"
			});
			return;
		}
		if(input.value.newPassword!=input.value.confirmPassword){
			uni.showToast({
				title:"新密码不一致"
			});
			return;
		}
		
		await updatePwd(input.value.oldPassword,input.value.newPassword);
		uni.showToast({
			title:"修改成功"
		})
	}

	
</script>

<style lang="scss" scoped>
	.w-body {
		min-height: 100vh;
		background-color: var(--w-bg-dark);
		
		.w-btn {
			margin: .6rem .5rem 0;
		}
		
		.item {
			border-bottom: none !important;
		}
	}
</style>