<template>
	<el-row :gutter="0">
		<el-col :span="3" class="menu-left">
			<el-menu
				:default-active="activeMenu"
				class="el-menu-vertical"
				background-color="#304156"
				text-color="#bfcbd9"
				active-text-color="#409EFF"
				:collapse="isCollapse"
				router
			>
				<el-menu-item index="/" class="menu-item">
					<el-icon>
						<HomeFilled />
					</el-icon>
					<template #title>首页</template>
				</el-menu-item>
				<el-menu-item index="/uav" class="menu-item">
					<el-icon>
						<Location />
					</el-icon>
					<template #title>无人机</template>
				</el-menu-item>
				<el-menu-item index="/task" class="menu-item">
					<el-icon>
						<MapLocation />
					</el-icon>
					<template #title>任务</template>
				</el-menu-item>

				<el-menu-item index="/settings" class="menu-item">
					<el-icon>
						<Setting />
					</el-icon>
					<template #title>设置</template>
				</el-menu-item>
			</el-menu>
		</el-col>
		<el-col :span="21" class="menu-right">
			<router-view v-slot="{ Component }">
				<transition name="fade" mode="out-in">
					<component :is="Component" />
				</transition>
			</router-view>
		</el-col>
	</el-row>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
	HomeFilled,
	Location,
	MapLocation,
	Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = ref(route.path)
// 默认不折叠 // 默认不折叠
const isCollapse = ref(false)

watch(() => route.path, (newPath) => {
	activeMenu.value = newPath
})
</script>

<style scoped>
.menu-left {
	width: 200px;
	height: 100vh;
	overflow: hidden;
	background-color: #304156;
	transition: width 0.3s;
}

.menu-right {
	height: 100vh;
	overflow-y: auto;
	padding: 20px;
	background-color: #f0f2f5;
}

.el-menu-vertical {
	border-right: none;
	width: 200px;
}

.el-menu-vertical:not(.el-menu--collapse) {
	width: 200px;
}

.menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	height: 60px;
	padding: 0 20px !important;
	margin: 4px 0;
}

.menu-item .el-icon {
	font-size: 22px;
	margin-right: 8px;
	margin-bottom: 0;
}

.menu-item :deep(.el-menu-tooltip__trigger) {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding: 0 !important;
}
</style>
