<!-- eslint-disable vue/no-v-html -->
<template>
	<div class="login" :style="{ '--bg': bg }">
		<a-row>
			<a-col :span="16">
				<div class="left-title">
					<a-typography-title :level="2">
						<a-avatar shape="square" :size="48" :src="app.logo || logo"></a-avatar>
						{{ app.isCN ? app.title : app.name }}
					</a-typography-title>
				</div>
				<div class="left-infos">
					<a-row>
						<a-col :span="14" :offset="4">
							<a-image :src="iam" width="95%" :preview="false"></a-image>
						</a-col>
					</a-row>
				</div>
			</a-col>
			<a-col :span="8">
				<div class="form">
					<a-row justify="center" align="top">
						<a-col :span="16">
							<div class="login-form">
								<div class="title">
									<a-typography-title :level="3">
										{{ $t('layout.user.welcome') }}{{ app.isCN ? app.title : app.name }}
									</a-typography-title>
								</div>
								<RouterView />
								<div class="copyright">
									<a-typography-link :href="app.site" target="_blank">
										<span v-html="app.copyright"></span>
									</a-typography-link>
								</div>
							</div>
						</a-col>
					</a-row>
				</div>
			</a-col>
		</a-row>
	</div>
</template>
<script lang="ts" setup>
	import loginBg from '@/assets/login-bg.png'
	import logo from '@/assets/logo.png'
	import iam from '@/assets/iam.png'
	import { useAppStore } from '@/stores/app'

	const app = useAppStore()
	const bg = computed(() => {
		return `url(${loginBg})`
	})
</script>
<style scoped>
	.login {
		width: 100%;
		max-width: 100%;
		height: 100vh;
		max-height: 100vh;
		overflow: hidden;
	}

	.login::before {
		position: absolute;
		inset: 0;
		content: '';
		background-image: var(--bg);
		background-repeat: no-repeat;
		background-position: 50%;
		background-size: cover;
	}

	.form {
		text-align: center;
	}

	.form a {
		color: var(--ant-primary-color);
	}

	.form .login-form {
		position: relative;
		width: 400px;
		min-height: 450px;
		margin-top: 50%;
		border: 1px var(--ant-primary-color) solid;
		box-shadow: 2px 2px 10px var(--ant-primary-color);
	}

	.left-infos {
		position: relative;
		margin-top: 12%;
		text-align: center;
	}

	.left-title {
		position: fixed;
		top: 50px;
		left: 60px;
	}

	.form .login-form .title {
		position: absolute;
		top: -55px;
		right: 0;
		z-index: 2;
		width: 100%;
		height: 52px;
		padding-top: 15px;
		padding-left: 15px;
		color: var(--ant-primary-color);
		text-align: left;
	}

	.title h3,
	.left-title h2 {
		color: var(--ant-primary-color);
	}

	.copyright {
		height: 60px;
		line-height: 60px;
	}

	.left-description-header {
		padding-top: 100px;
		padding-left: 100px;
		color: var(--ant-primary-color);
		text-align: left;
	}
</style>
