<template>
	<view class="new-password">
		<uni-forms ref="formRef" label-align="left" :model="vdata.formData" :rules="rules">
			<uni-forms-item label="新密码" name="pwd">
				<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowPwd ? 'text' : 'password'" v-model="vdata.formData.pwd" :clearable="false" placeholder="请输入登录密码" >
					<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowPwd = !vdata.isShowPwd ">{{ vdata.isShowPwd ? '隐藏' : '显示'  }}</view> </template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="确认新密码" name="newPwd">
				<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowNewPwd ? 'text' : 'password'" v-model="vdata.formData.newPwd" :clearable="false" placeholder="请输入登录密码" >
					<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowNewPwd = !vdata.isShowNewPwd ">{{ vdata.isShowNewPwd ? '隐藏' : '显示'  }}</view> </template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
		<view class="btn-box">
			<Button @tap="confirmRetrieve">确认修改</Button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { $retrieve, $getPasswordRules } from '@/http/apiManager.js';
import storageManage from '@/commons/utils/storageManage.js'
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js'
import timer from '@/commons/utils/timer.js'
import formUtil from '@/commons/utils/formUtil.js'
const rules = {
	pwd: {
		rules:[ formUtil.rules.requiredInputShowToast('新密码') ],
	},
	newPwd: {
		rules:[ formUtil.rules.requiredInputShowToast('确认密码') ],
	},
}
const formRef = ref()
const vdata = reactive({
	formData: {
		pwd: '', // 新密码
		newPwd: '' // 确认新密码
	},
	isShowPwd: false, // 是否显示新密码
	isShowNewPwd: false, // 是否显示确认新密码
	params: null,
	passwordRules: /^$/, //密码规则
	passwordRulesText: '',//密码规则提示文字
})

onLoad(options => {
	vdata.params = options
	getPasswordRules()
});

const getPasswordRules = () => {
	$getPasswordRules().then(({bizData}) => {
		vdata.passwordRules = new RegExp(bizData.regexpRules)
		vdata.passwordRulesText = bizData.errTips
	})
}

const confirmRetrieve = () => {
	formUtil.validate(formRef.value).then(() => {
		let { pwd, newPwd } = vdata.formData;
		if(!vdata.passwordRules.test(pwd) || !vdata.passwordRules.test(newPwd)) {
			return infoBox.showToast(vdata.passwordRulesText)
		}
		if (pwd !== newPwd) {
			 return infoBox.showToast('两次密码输入不一致')
		}
		$retrieve({
			...vdata.params,
			newPwd
		}).then(() => {
			storageManage.token() && storageManage.token(null, true)
			infoBox.showToast('设置成功').then(() => {
				go.to('PAGES_LOGIN', {}, go.GO_TYPE_RELAUNCH)
			})
		})
	})
}
</script>

<style lang="scss">
	.new-password {
		min-height: 100vh;
		background-color: $v-color-bgrey;
		::v-deep.uni-forms-item.is-direction-left {
			padding: 0 40rpx;
			.uni-forms-item__label {
				width: 190rpx !important;
				font-size: 32rpx !important;
				font-weight: 400;
				white-space: nowrap;
				color: rgba(102,102,102,1);
				text-indent: 0 !important;
				
			}
			.uni-easyinput__placeholder-class {
				font-size: 32rpx !important;
				font-weight: 400 !important;
			}
		}
		
		.btn-box {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 200rpx;
			border: 1rpx solid rgba(237,237,237,1);
			background: rgba(255,255,255,0.85);
			.jeepay-btn {
				margin: 30rpx;
			}
		}
	}
</style>
