<template>
	<div class="sidebar-logo-container" :class="{'collapse':collapse}">
		<transition name="sidebarLogoFade">
			<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
				<img src="../../../icons/images/index/title_icon.png" class="logo" alt="">
				<img v-if="logo" :src="logo" class="sidebar-logo">
				<h1 v-else class="sidebar-title">{{ title }} </h1>
			</router-link>
			<router-link v-else key="expand" class="sidebar-logo-link" to="/">
				<img src="../../../icons/images/index/title_1.png" class="logo" alt="">
				<!-- <img v-if="logo" :src="logo" class="sidebar-logo">
				<h1 class="sidebar-title">{{ title }} </h1> -->
			</router-link>
		</transition>
	</div>
</template>

<script>
	export default {
		name: 'SidebarLogo',
		props: {
			collapse: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				title: '共享空调运营管理平台',
				// logo: '../../../icons/images/index/title_icon.png'
				logo: ''
			}
		}
	}
</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: 90px;
		line-height: 90px;
		// background: #2b2f3a;
		text-align: center;
		overflow: hidden;

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

			.logo {
				width: 48px;
				height: 48px;
				vertical-align: middle;
			}

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

			& .sidebar-title {
				display: inline-block;
				margin: 0;
				color: #fff;
				font-weight: 600;
				line-height: 50px;
				font-size: 14px;
				font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
				vertical-align: middle;
			}
		}

		&.collapse {
			.sidebar-logo {
				margin-right: 0px;
			}

			.logo {
				width: 32px;
				height: 32px;
				vertical-align: middle;
			}
		}
	}
</style>
