<template>
	<div class="email-verify">
		<div class="tip" v-html="$t('Login.verifyCodeHasSent', { email: props.email })"></div>
		<input-code @submit="onVerify" v-model="code" ref="inputCodeRef" />
		<p class="time" v-if="time > 0">{{ $t('Login.resendCodeIn', { time: timeStr }) }}</p>
		<p class="time" v-if="time === 0">
			<span @click="onResend">{{ $t('Login.resendCode') }}</span>
		</p>
		<button class="verify" custom="black" @click="onVerify">{{ $t('Login.verify') }}</button>
		<other-login v-if="isShowOtherLogin" />
	</div>
</template>

<script setup lang="ts">
	import md5 from 'md5'
	import { ElMessage } from 'element-plus'
	import OtherLogin from './other-login.vue'
	import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
	import { CountDown } from '@/utils/tools'
	import InputCode from '@/components/input-code.vue'
	import { useRouter } from 'vue-router'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const router = useRouter()
	const emit = defineEmits(['submit-email-code', 'resend-email-code'])
	const props = defineProps({
		email: { type: String, required: true },
		password: { type: String, default: '' },
		isShowOtherLogin: { type: Boolean, default: true }
	})
	const code = ref('')
	const time = ref(0)
	const timeStr = computed(() => CountDown(time.value))
	const timeout = ref(null)
	const setTime = (s = 120) => {
		clearTime()
		time.value = s
		timeout.value = setInterval(() => {
			time.value--
			if (time.value <= 0) {
				clearTime()
				time.value = 0
			}
		}, 1000)
	}
	const clearTime = () => {
		time.value = -1
		clearTimeout(timeout.value)
	}
	onBeforeUnmount(() => {
		clearTime()
	})
	onMounted(() => {
		// onSendCode()
		setTime()
	})
	const inputCodeRef = ref(null)
	const resetCode = () => {
		inputCodeRef.value?.resetCode?.()
	}
	const onSendCode = async () => {
		resetCode()
		const email = props.email
		if (!email) {
			console.warn('请输入邮箱')
			return Promise.reject('请输入邮箱')
		}
		emit('resend-email-code', () => {
			setTime()
		})
		return Promise.resolve()
	}
	const onResend = () => {
		if (time.value > 0) return
		onSendCode()
	}
	const onVerify = () => {
		if (code.value.length !== 6) return
		emit('submit-email-code', code.value)
	}
	defineExpose({
		onSendCode
	})
</script>

<style lang="less" scoped>
	.email-verify {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		> .tip {
			text-align: center;
			margin-top: 4.6rem;
			line-height: 2.4rem;
			font-family: KaiseiOpti-Regular;
			font-size: 1.6rem;
			color: #666;
			&:deep(span) {
				color: #252727;
				font-family: KaiseiOpti-Medium;
			}
		}
		> .input-code {
			margin-top: 6rem;
		}
		> .verify {
			margin-top: 5rem;
			width: 100%;
			height: 4rem;
			--button-font-size: 1.4rem;
		}
		> .time {
			font-family: KaiseiOpti-Regular;
			user-select: none;
			margin-top: 2.4rem;
			font-size: 1.2rem;
			color: #666;
			> span {
				color: #232323;
				text-decoration: underline;
				cursor: pointer;
			}
		}
		> .other-login {
			margin-top: 6rem;
		}
	}
</style>
