<template>
    <el-aside>
        <el-scrollbar>
            <el-menu unique-opened :collapse="isCollapse">
                <a href="/" class="logo">
                    <img src="@/assets/vue.svg" alt="">
                    <h1>Cesium</h1>
                </a>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><MapLocation /></el-icon>
                        <span>图元</span>
                    </template>
                    <el-menu-item v-for="item in elementGraphic" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
                        <el-icon><View /></el-icon>
                        <span>{{item.title}}</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><SemiSelect /></el-icon>
                        <span>天气</span>
                    </template>
                    <el-menu-item v-for="item in elementWeather" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
                        <el-icon><View /></el-icon>
                        <span>{{item.title}}</span>
                    </el-menu-item>
                </el-sub-menu>

                <el-sub-menu index="3">
                    <template #title>
                        <el-icon><Grid /></el-icon>
                        <span>动目标</span>
                    </template>
                    <el-menu-item v-for="item in elementMoving" :key="item.id" :index="item.title" @click="goAnchor(item.title)">
                        <el-icon><View /></el-icon>
                        <span>{{item.title}}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-scrollbar>
    </el-aside>
</template>

<script setup>
import { ref } from 'vue';
import { MapLocation, SemiSelect, Grid, View } from "@element-plus/icons-vue";
import { elementGraphicMap, elementWeatherMap, elementMovingMap } from '@/views/ElementMap';

const elementGraphic = ref()
const elementWeather = ref()
const elementMoving = ref()

elementGraphic.value = elementGraphicMap;
elementWeather.value = elementWeatherMap;
elementMoving.value = elementMovingMap;

const props = defineProps({
    isCollapse: {
      type: Boolean,
    }
});

// 锚点跳转函数
function goAnchor(title) {
    var anchor = document.getElementById(title);
    if (anchor) {
        anchor.scrollIntoView({ behavior: 'smooth' });
    }
}
</script>

<style lang="scss" scoped>
.el-aside{
    background-color: #e9e9eb;
    height: 100vh;
    width: auto;
}
.el-menu{
    background-color: #e9e9eb;
    width: 200px;
    border-right: none;
    &.el-menu--collapse{
        width: 60px;
        & h1{
            display: none;
        }
    }
}
.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
    height: 60px;
    img{
        width: 32px;
        height: 32px;
    }
}
</style>