<template>
	<div class="login">
		<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">
				<el-input
					v-model="formData.password"
					:placeholder="$t('Login.enterPassword')"
					type="password"
					show-password
					name="password"
				/>
			</el-form-item>
			<div class="forgotPassword">
				<span @click="onForgotPassword">{{ $t('Login.forgotPassword') }}</span>
			</div>
			<el-form-item>
				<button type="submit" class="submit" custom="black" @click.prevent="onSubmit">
					{{ $t('Login.login') }}
				</button>
			</el-form-item>
			<el-form-item prop="privacy" class="privacy">
				<el-checkbox v-model="formData.privacy">
					<div v-html="$t('Login.agreeTermsPolicy')"></div>
				</el-checkbox>
			</el-form-item>
		</el-form>
		<other-login />
	</div>
</template>

<script setup lang="ts">
	import { computed, reactive, ref } from 'vue'
	import { validateEmail, validatePass, validatePrivacy } from './tools'
	import OtherLogin from './other-login.vue'
	const emit = defineEmits(['retrieve-password', 'login'])
	const props = defineProps({
		name: { type: String, default: '' },
		email: { type: String, default: '' },
		password: { type: String, default: '' }
	})
	const ruleForm = reactive({
		email: [{ validator: validateEmail, trigger: 'change' }],
		password: [{ validator: validatePass, trigger: 'change' }],
		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
	})
	const formData = reactive({
		email: props.email,
		password: props.password,
		privacy: false
	})
	const formRef = ref(null)

	const onForgotPassword = () => {
		emit('retrieve-password')
	}
	const onSubmit = () => {
		formRef.value?.validate?.((valid) => {
			if (valid) {
				emit('login', {
					email: formData.email,
					password: formData.password
				})
			} else {
				console.warn('error submit!')
			}
		})
	}
</script>

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