<template>
	<div class="login">
		<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" v-html="$t('Login.loginTo')"></div>
					<div class="tip">{{ $t('Login.loginTitle') }}</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">
							<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 prop="privacy" class="privacy">
							<el-checkbox v-model="formData.privacy">
								<div v-html="$t('Login.agreeTermsPolicy')"></div>
							</el-checkbox>
						</el-form-item>
						<el-form-item>
							<el-button class="submit" type="primary" @click="onSubmit">{{
								$t('Login.login')
							}}</el-button>
						</el-form-item>
					</el-form>
					<div class="tip-2" v-html="$t('Login.noAccountToSignUp')"></div>
				</template>
				<visible-code
					v-show="isVisible"
					type="LOGIN"
					:password="formData.password"
					ref="visibleCodeRef"
					:email="formData.email"
					@submit="onVerifyCode"
				/>
				<other-login />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import md5 from 'md5'
	import { Login } from '@/api/user'
	import { computed, reactive, ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { validateEmail, validatePass, validatePrivacy } from './tools'
	import OtherLogin from './other-login.vue'
	import VisibleCode from './visible-code.vue'
	import { useUserInfoStore } from '@/stores'
	const userInfoStore = useUserInfoStore()
	const router = useRouter()
	const ruleForm = reactive({
		email: [{ validator: validateEmail, trigger: 'blur' }],
		password: [{ validator: validatePass, trigger: 'blur' }],
		privacy: [{ validator: validatePrivacy, trigger: 'change' }]
	})
	const isVisible = ref(false)
	const formData = reactive({
		email: '',
		password: '',
		privacy: false
	})
	const formRef = ref(null)
	const onBack = () => {
		if (isVisible.value) {
			isVisible.value = false
		} else {
			router.push({ name: 'index' })
		}
	}
	const onForgotPassword = () => {
		router.push({ name: 'retrievepass' })
	}
	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)
		Login({
			email: formData.email,
			password: md5(formData.password),
			verificationCode: code
		})
			.then((res) => {
				if (res) {
					userInfoStore.setToken(res)
					userInfoStore.setUserInfo({
						email: formData.email
					})
					router.push({ name: 'mainInput' })
				}
			})
			.catch((error) => {
				console.warn(error)
			})
	}
</script>

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