<template>
	<div class="retrieve-password">
		<div class="left">
			<img class="bg" src="@/assets/images/login/left-bg.png" />
			<img class="logo" src="@/assets/images/logo-1.png" />
		</div>
		<div class="right">
			<div class="top">
				<button class="back" @click="onBack">
					<svg-icon name="arrow-left" size="37" />
				</button>
			</div>
			<div class="box">
				<img src="@/assets/images/login/elephant.png" />
				<template v-if="!isVisible">
					<div class="title">{{ $t('Login.retrievePassword') }}</div>
					<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
						<el-form-item :label="$t('Login.email')" prop="email">
							<el-input
								v-model="formData.email"
								:placeholder="$t('Login.enterEmail')"
								name="email"
							/>
						</el-form-item>
						<el-form-item :label="$t('Login.password')" prop="password">
							<password-tip :value="formData.password" v-show="showPasswordTip" />
							<el-input
								v-model="formData.password"
								:placeholder="$t('Login.enterPassword')"
								type="password"
								show-password
								name="password"
								@blur="showPasswordTip = false"
								@focus="showPasswordTip = true"
							/>
						</el-form-item>
						<br />
						<br />
						<el-form-item>
							<el-button class="submit" type="primary" @click="onSubmit">{{
								$t('submit')
							}}</el-button>
						</el-form-item>
					</el-form>
				</template>
				<visible-code
					v-show="isVisible"
					type="FORGOT_PWD"
					ref="visibleCodeRef"
					:email="formData.email"
					@submit="onVerifyCode"
				/>
				<other-login />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import md5 from 'md5'
	import { ForgotPassword } from '@/api/user'
	import { computed, reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { validateEmail, validatePass } from './tools'
	import OtherLogin from './other-login.vue'
	import VisibleCode from './visible-code.vue'
	import PasswordTip from './password-tip.vue'
	import { useUserInfoStore } from '@/stores'
	const userInfoStore = useUserInfoStore()
	const router = useRouter()
	const ruleForm = reactive({
		email: [{ validator: validateEmail, trigger: 'change' }],
		password: [{ validator: validatePass, trigger: 'change' }]
	})
	const isVisible = ref(false)
	const showPasswordTip = ref(false)
	const formData = reactive({
		email: '',
		password: ''
	})
	const formRef = ref(null)
	const onBack = () => {
		if (isVisible.value) {
			isVisible.value = false
		} else {
			router.back()
		}
	}
	const visibleCodeRef = ref(null)
	const onSubmit = () => {
		formRef.value?.validate?.((valid) => {
			if (valid) {
				// console.log('submit!')
				visibleCodeRef.value?.onSendCode().then(() => {
					isVisible.value = true
				})
			} else {
				console.warn('error submit!')
			}
		})
	}
	const onVerifyCode = (code: string) => {
		// console.log(code)
		ForgotPassword({
			email: formData.email,
			newPassword: md5(formData.password),
			verificationCode: code
		})
			.then((res) => {
				if (res) router.push({ name: 'login' })
			})
			.catch((error) => {
				console.warn(error)
			})
	}
</script>

<style lang="less" scoped>
	@import './less/style.less';
</style>
