<template>
	<transition name="fade-loading">
		<div v-if="routeLoadingStore.isLoading" class="route-loading-overlay">
			<div class="route-loading-spinner">
				<div class="spinner-wrapper">
					<div class="spinner"></div>
				</div>
				<p class="loading-text">加载中...</p>
			</div>
		</div>
	</transition>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouteLoadingStore } from '@/stores/routeLoading';

export default defineComponent({
	name: 'RouteLoading',
	setup() {
		const routeLoadingStore = useRouteLoadingStore();

		return {
			routeLoadingStore,
		};
	},
});
</script>

<style lang="scss" scoped>
.route-loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(255, 255, 255, 0.85);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	backdrop-filter: blur(4px);
	
	// 暗色主题支持
	@media (prefers-color-scheme: dark) {
		background-color: rgba(0, 0, 0, 0.75);
	}
}

.route-loading-spinner {
	text-align: center;
	animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
	0% {
		opacity: 0;
		transform: scale(0.8);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.spinner-wrapper {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px;
}

.spinner {
	display: inline-block;
	width: 64px;
	height: 64px;
	border: 4px solid rgba(64, 158, 255, 0.2);
	border-top-color: #409eff;
	border-radius: 50%;
	animation: spinner-rotate 0.8s linear infinite;
}

@keyframes spinner-rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.loading-text {
	margin-top: 16px;
	font-size: 14px;
	color: #606266;
	font-weight: 500;
	letter-spacing: 1px;
	
	// 暗色主题文字颜色
	@media (prefers-color-scheme: dark) {
		color: #e5e7eb;
	}
}

.fade-loading-enter-active {
	transition: opacity 0.2s ease-out;
}

.fade-loading-leave-active {
	transition: opacity 0.3s ease-in;
}

.fade-loading-enter-from,
.fade-loading-leave-to {
	opacity: 0;
}
</style>