<template>
	<div class="register">
		<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
			<el-form-item :label="$t('Login.name')" prop="name">
				<el-input name="name" v-model="formData.name" :placeholder="$t('Login.enterName')" />
			</el-form-item>
			<el-form-item :label="$t('Login.password')" prop="password">
				<password-tip :value="formData.password" v-show="showPasswordTip" />
				<el-input
					name="password"
					v-model="formData.password"
					:placeholder="$t('Login.enterPassword')"
					type="password"
					show-password
					@blur="showPasswordTip = false"
					@focus="showPasswordTip = true"
				/>
			</el-form-item>

			<div class="password-warning">
				<span class="icon"><svg-icon name="warning" size="12" /></span>
				<span class="label">You must satisfy ALL password conditions to register.</span>
			</div>
			<el-form-item :label="$t('Login.email')" prop="email">
				<el-input name="email" v-model="formData.email" :placeholder="$t('Login.enterEmail')" />
			</el-form-item>
			<el-form-item>
				<button type="submit" class="submit" custom="black" @click.prevent="onSubmit">
					{{ $t('Login.register') }}
				</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 { validateName, validateEmail, validatePass, validatePrivacy } from './tools'
	import OtherLogin from './other-login.vue'
	import PasswordTip from './password-tip.vue'
	const emit = defineEmits(['register'])
	const props = defineProps({
		name: { type: String, default: '' },
		email: { type: String, default: '' },
		password: { type: String, default: '' }
	})
	const ruleForm = reactive({
		name: [{ validator: validateName, trigger: 'change' }],
		email: [{ validator: validateEmail, trigger: 'change' }],
		password: [{ validator: validatePass, trigger: 'change' }],
		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
	})
	const showPasswordTip = ref(false)
	const formData = reactive({
		name: props.name,
		email: props.email,
		password: props.password,
		privacy: false
	})
	const formRef = ref(null)
	const onSubmit = () => {
		formRef.value?.validate?.((valid) => {
			if (valid) {
				// console.log('submit!')
				emit('register', {
					name: formData.name,
					email: formData.email,
					password: formData.password
				})
			} else {
				console.warn('error submit!')
			}
		})
	}
</script>

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