<template>
	<div class="relative h-full">
		<div class="relative z-10 mx-auto py-8 sm:w-max sm:py-32">
			<div
				class="flex flex-col items-center"
				@dblclick="redirectForJingrowioAuth"
			>
				<slot name="logo">
					<div class="mx-auto flex items-center space-x-2">
						<JLogo class="inline-block h-7 w-7" />
						<span
							class="select-none text-xl font-semibold tracking-tight text-gray-900"
						>
							Jingrow
						</span>
					</div>
				</slot>
			</div>
			<div
				class="mx-auto w-full bg-white px-4 py-8 sm:mt-6 sm:w-96 sm:rounded-lg sm:px-8 sm:shadow-xl"
			>
				<div class="mb-6 text-center" v-if="title">
					<span
						class="text-center text-lg font-medium leading-5 tracking-tight text-gray-900"
					>
						{{ title }}
					</span>
				</div>
				<p
					class="mb-6 break-words text-center text-base font-normal leading-[21px] text-gray-700"
					v-if="subtitle"
				>
					{{ subtitle }}
				</p>
				<slot></slot>
			</div>
			<slot name="footer"></slot>
		</div>
		<div class="absolute bottom-4 z-[1] flex w-full justify-center">
			<JingrowLogo class="h-10" />
		</div>
	</div>
</template>

<script>
import { toast } from 'vue-sonner';
import JLogo from '@/components/icons/JLogo.vue';
import JingrowLogo from '@/components/icons/JingrowLogo.vue';

export default {
	name: 'LoginBox',
	props: ['title', 'logo', 'subtitle'],
	components: {
		JLogo,
		JingrowLogo,
	},
	mounted() {
		const params = new URLSearchParams(window.location.search);

		if (params.get('showRemoteLoginError')) {
			toast.error('令牌无效或已过期');
		}
	},
	methods: {
		redirectForJingrowioAuth() {
			window.location = '/f-login';
		},
	},
};
</script>