<template>
	<div class="email-box">
		<h3 class="title">{{ title }}</h3>
		<div class="tip">{{ tip }}</div>
		<input
			v-model="email"
			@keydown.enter.prevent="submit"
			type="email"
			:placeholder="$t('EmailAddress')"
		/>
		<div v-show="error" class="error">{{ error }}</div>
		<button custom @click="submit">{{ $t('Submit') }}</button>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	const emit = defineEmits(['submit'])
	const props = defineProps({
		title: { type: String },
		tip: { type: String }
	})
	const email = ref('')
	const error = ref('')
	const submit = () => {
		if (!validateEmail(email.value)) return
		emit('submit', email.value)
	}
	// 验证邮箱
	const validateEmail = (email: string) => {
		if (email === '') {
			error.value = 'Please fill out this field.'
			return false
		} else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
			error.value = 'Please enter a valid email address.'
			return false
		}
		error.value = ''
		return true
	}
</script>

<style scoped lang="less">
	.email-box {
		width: 100%;
		padding: 80px;
		margin: 0 auto;
		background-color: #fff;
		box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.2);
		border-radius: 40px;
		> .title {
			font-size: 40px;
			color: #222;
			margin-bottom: 10px;
		}
		> .tip {
			color: #4d4d4d;
			margin-bottom: 20px;
		}
		> input {
			width: 100%;
			border-radius: 40px;
			height: 40px;
			padding: 0 20px;
			border: 1px solid #e1e1e1;
			outline: none;
			color: #222;
		}
		> .error {
			font-size: 14px;
			color: #dc3232;
		}
		> button {
			margin-top: 10px;
			width: 100%;
			border-radius: 50px;
			height: 50px;
			font-weight: bold;
			text-transform: uppercase;
			--hover-backcolor: #000;
		}
		@media (max-width: 800px) {
			padding: 20px;
			border-radius: 20px;
			> .title {
				font-size: 20px;
			}
			> .tip {
				font-size: 12px;
			}
		}
	}
</style>
