<template>
	<div class="sidebar-logo-container">
		<transition name="sidebarLogoFade">
			<router-link key="collapse" class="sidebar-logo-link" to="/">
				<el-image :src="logo" class="sidebar-logo" fit="fill" />
				<h1 class="sidebar-title">
					{{ title }}
				</h1>
			</router-link>
		</transition>
	</div>
</template>

<script setup>
	import variables from '@/assets/styles/variables.module.scss'
	import logo from '@/assets/logo/logo.png'

	const title = ref('智能能效管理系统');
	const store = useStore();
	const sideTheme = computed(() => store.state.settings.sideTheme);
</script>

<style lang="scss" scoped>
	.sidebarLogoFade-enter-active {
		transition: opacity 1.5s;
	}

	.sidebarLogoFade-enter,
	.sidebarLogoFade-leave-to {
		opacity: 0;
	}

	.sidebar-logo-container {
		position: relative;
		// width: 100%;
		height: 60px;
		line-height: 60px;
		// background: #2b2f3a;
		text-align: center;
		overflow: hidden;

		& .sidebar-logo-link {
			height: 100%;
			width: 100%;

			& .sidebar-logo {
				height: 40px;
				vertical-align: middle;
				margin-right: 12px;
			}

			& .sidebar-title {
				display: inline-block;
				margin: 0;
				color: #fff;
				font-weight: 600;
				line-height: 60px;
				font-size: 22px;
				transform: skewX(-10deg);
				font-family: "黑体";
				vertical-align: middle;
			}
		}

		&.collapse {
			.sidebar-logo {
				margin-right: 0px;
			}
		}
	}
</style>