<template>
  <view class="account-pwd">
		<uni-forms ref="formRef" label-align="left" :model="vdata.formData" :rules="rules">
			<uni-forms-item label="原密码" name="originalPwd">
				<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowOriginalPwd ? 'text' : 'password'" v-model="vdata.formData.originalPwd" :clearable="false" placeholder="请输入登录密码" >
					<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowOriginalPwd = !vdata.isShowOriginalPwd ">{{ vdata.isShowOriginalPwd ? '隐藏' : '显示'  }}</view> </template>
				</uni-easyinput>
			</uni-forms-item>
			<view class="forget-pwd" @tap="phone.open({
					tips: '为了您的账户安全，您需要使用短信验证码重置密码，是否发送验证码到：',
					phone: vdata.userInfo.telphone,
					confirmText: '发送短信验证码'
				})">
				<text>忘记原密码？去找回 ></text>
			</view>
			<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-item label="确认新密码" name="confirmPwd">
				<uni-easyinput class='jeepay-easyinput' :inputBorder="false" :type="vdata.isShowConfirmPwd ? 'text' : 'password'" v-model="vdata.formData.confirmPwd" :clearable="false" placeholder="请输入登录密码" >
					<template #suffixIcon> <view class='show-tips' style="color: rgba(88,132,204,1);font-weight: 400;font-size: 32rpx;" @tap="vdata.isShowConfirmPwd = !vdata.isShowConfirmPwd ">{{ vdata.isShowConfirmPwd ? '隐藏' : '显示'  }}</view> </template>
				</uni-easyinput>
			</uni-forms-item>
		</uni-forms>
    <button class="confirm flex-center" hover-class="touch-button" @click="modifyPwd">确认修改</button>
  </view>
	<CallPhone ref="phone" @callPhone="callPhone" />
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { $modifyPwd, $getPasswordRules } from "@/http/apiManager.js"
import storageManage from '@/commons/utils/storageManage.js'
import go from '@/commons/utils/go.js'
import infoBox from "@/commons/utils/infoBox.js"
import formUtil from '@/commons/utils/formUtil.js'
import CallPhone from './components/CallPhone.vue'

const rules = {
	originalPwd: {
		rules:[ formUtil.rules.requiredInputShowToast('原密码') ],
	},
	newPwd: {
		rules:[ formUtil.rules.requiredInputShowToast('新密码') ],
	},
	confirmPwd: {
		rules:[ formUtil.rules.requiredInputShowToast('确认新密码') ],
	}
}

const formRef = ref()
const phone = ref()
const vdata = reactive({
  formData: {
		originalPwd: '',
		newPwd: '',
		confirmPwd: ''
	},
	userInfo: storageManage.userInfo(),
	passwordRules: /^$/, //密码规则
	passwordRulesText: '',//密码规则提示文字
})

onMounted(() => {
  getPasswordRules()
})

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

const modifyPwd = () => {
	formUtil.validate(formRef.value).then(() => {
		let { newPwd, confirmPwd } = vdata.formData;
		if(!vdata.passwordRules.test(newPwd) || !vdata.passwordRules.test(confirmPwd)) {
			return infoBox.showToast(vdata.passwordRulesText)
		}
		if (newPwd !== confirmPwd) {
			 return infoBox.showToast('两次密码输入不一致')
		}
		$modifyPwd(vdata.formData).then(() => {
			infoBox.showToast('修改成功')
			storageManage.token() && storageManage.token(null, true)
			go.to('PAGES_LOGIN', {}, 'redirect')
		})
	})
}

const callPhone = () => {
  go.to('PAGES_FORGET_PASSWORD', {isRetrieve: 1 })
}

</script>

<style lang="scss" scoped>
	.account-pwd {
		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;
			}
		}
		.forget-pwd {
		  display: flex;
		  align-items: center;
		  height: 90rpx;
		  text-indent: 30rpx;
		  color: #2980fd;
		  font-size: 30rpx;
		  font-weight: 400;
		}
		.confirm {
		  margin: 30rpx;
		  height: 110rpx;
		  border-radius: 20rpx;
		  color: #fff;
		  background: $jeepay-bg-primary;
		}
	}
</style>
