<template>
	<a-row style="padding-top: 52px">
		<a-col :span="20" :offset="2">
			<a-form name="normal_login" autocomplete="off">
				<a-form-item v-if="type === 'ACCOUNT'" name="user">
					<a-input v-model:value="user" size="large" :placeholder="$t('pages.login.placeholder.user')">
						<template #prefix>
							<icon-font type="icon-user" />
						</template>
					</a-input>
				</a-form-item>
				<a-form-item v-if="type === 'ACCOUNT'" name="pwd">
					<a-input-password v-model:value="password" size="large" :placeholder="$t('pages.login.placeholder.password')">
						<template #prefix>
							<icon-font type="icon-password" />
						</template>
					</a-input-password>
				</a-form-item>
				<a-form-item>
					<a-button
						:disabled="!isLoginAble"
						type="primary"
						:loading="logining"
						block
						size="large"
						shape="round"
						@click.stop="login"
					>
						{{ $t('pages.login.button.login') }}
					</a-button>
					<div class="forgot">
						<a-typography-link target="_blank">{{ $t('pages.login.forgot') }}</a-typography-link>
					</div>
				</a-form-item>
			</a-form>
			<div style="text-align: left">
				<a-typography-paragraph>
					{{ $t('pages.login.message.welcome', { title: config.name }) }}，
					{{ $t('pages.login.message.declare', { title: config.name }) }}
					<a-typography-link href="#" target="_blank">
						{{ $t('pages.login.message.license', { title: config.name }) }}
					</a-typography-link>
					、
					<a-typography-link href="#" target="_blank">
						{{ $t('pages.login.message.guide', { title: config.name }) }}
					</a-typography-link>
					。 {{ $t('pages.login.message.register', { title: config.name }) }}
					<a-typography-link :href="mailto" target="_blank">
						{{ $t('pages.login.message.administrator', { title: config.name }) }}
					</a-typography-link>
					。
				</a-typography-paragraph>
			</div>
		</a-col>
	</a-row>
</template>

<script setup lang="ts">
	import api from '@/api'
	import { config } from '@/settings/application'
	import { useUserStore } from '@/stores/user'
	const type = ref<'ACCOUNT' | 'WECHAT'>('ACCOUNT')
	const user = ref('')
	const password = ref('')
	const mailto = computed(() => {
		return `mailto:${config.name}<riemann@riemann.tech>?cc=support@riemann.tech&subject=${config.title}${config.name}`
	})
	const isLoginAble = computed(() => {
		if (type.value === 'ACCOUNT') return user.value && password.value
		return false
	})

	const userStore = useUserStore()
	const logining = ref(false)

	api.authApi.auth.currentUser(userStore.userLogin, () => {})
	const login = () => {
		logining.value = true
		setTimeout(() => {
			logining.value = false
		}, 5000)
		api.authApi.auth.login(
			{
				type: type.value,
				userName: user.value,
				password: password.value,
			},
			(data) => {
				userStore.userLogin(data)
				logining.value = false
			},
		)
	}
</script>
<style scoped>
	@import url('./oauth2.css');
</style>
