<template>
	<a-card>
		<a-steps :current="stepVal">
			<a-step title="验证身份" description="发送验证码" />
			<a-step title="接收验证码" description="填写验证码确认邮箱" />
			<a-step title="设置新密码" description="填写新密码" />
		</a-steps>
		<div class="fcc mt-4">
			<div class="formBox">
				<a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
					<a-form-item label="账号：" name="name" has-feedback v-if="stepVal == 0">
						<a-input v-model:value="formState.name" placeholder="请输入账号" allow-clear show-count :maxlength="10" />
					</a-form-item>
					<a-form-item label="邮箱：" name="email" has-feedback v-if="stepVal == 0">
						<a-input v-model:value="formState.email" placeholder="请输入邮箱" allow-clear show-count :maxlength="200" />
					</a-form-item>
					<a-form-item label="邮箱验证码：" name="emailCode" has-feedback v-if="stepVal == 1">
						<a-input
							v-model:value="formState.emailCode"
							placeholder="请输入邮箱验证码"
							allow-clear
							show-count
							:maxlength="4"
						/>
					</a-form-item>
					<a-form-item label="新密码：" name="newPassword" has-feedback v-if="stepVal == 2">
						<a-input
							v-model:value="formState.newPassword"
							placeholder="请输入新密码"
							type="password"
							allow-clear
							show-count
							:maxlength="20"
						/>
					</a-form-item>
				</a-form>
				<div>
					<a-button type="primary" @click="previousStep" v-if="stepVal != 0" class="mr-4">上一步</a-button>
					<a-button type="primary" @click="nextStep" v-if="stepVal != 2" class="mr-4">下一步</a-button>
					<a-button type="primary" :loading="submitLoading" @click="onSubmit" v-if="stepVal == 2">保存</a-button>
				</div>
			</div>
		</div>
	</a-card>
</template>

<script setup name="updatePassword">
	import { required } from '@/utils/formRules'
	const stepVal = ref(0)
	const formRef = ref()
	const params = ref({})
	// 表单数据
	const formState = ref({})
	const submitLoading = ref(false)

	// 默认要校验的
	const rules = {
		name: [required('请输入账号')],
		email: [
			required('请输入邮箱'),
			{
				pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
				message: '请填写正确的邮箱号',
				trigger: 'blur'
			}
		],
		emailCode: [required('请输入邮箱验证码')],
		newPassword: [required('请输入新密码')]
	}

	// 提交数据
	const onSubmit = async () => {
		const values = await formRef.value.validateFields()
		submitLoading.value = true
		setTimeout(() => {
			params.value = {
				...formState.value,
				...params.value
			}
			console.log('🚀 ~ onSubmit ~ params.value:', params.value)
			// formRef.value.resetFields()
			submitLoading.value = false
		}, 1000)
	}
	//上一步
	const previousStep = async () => {
		stepVal.value -= 1
	}
	//下一步
	const nextStep = async () => {
		const values = await formRef.value.validateFields()
		params.value = {
			...formState.value,
			...params.value
		}
		stepVal.value += 1
	}
</script>
<style scoped lang="less">
	.fcc {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.formBox {
		width: 400px;
	}
</style>
