<template>
    <ul class="menu">
        <template v-for="(menu, idx) in menuList">
            <li
                :key="idx"
                :class="['menu-item ', actived === menu.name ? 'actived' : '']"
                v-if="menu.hidden"
                @mouseover="mouseover(menu)"
            >
                <div>
                    {{}}
                    <i v-if="menu.meta.icon" :class="['iconfont', menu.meta.icon]"></i>
                    <span class="menu-title">{{ menu.meta.title }}</span>
                </div>
            </li>
        </template>
    </ul>
</template>

<script setup lang="ts" name="lv1">
// import { useRouter } from "vue-router";
// const $router = useRouter();

defineProps<{ menuList: Menu.MenuOptions[] }>();

const emits = defineEmits<{
    (e: "change", item: any): void;
}>();
let actived = ref<any>("");
const mouseover = (menu: any) => {
    actived.value = menu.name;
    emits("change", menu);
};
</script>

<style lang="scss">
.menu {
    width: 75px;
    padding: 10px 0 0;
    margin: 0;
    overflow-x: hidden;
    list-style: none;
}
.menu .menu-item {
    padding: 8px 0;
    font-size: 26px;
    color: #797979;
    text-align: center;
    cursor: pointer;
}
.menu .menu-item.actived {
    position: relative;
    color: #4178d5;
}
.menu .menu-item.actived::after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    height: 100%;
    content: "";
    border-right: 4px solid #4178d5;
}
.menu i.iconfont {
    font-size: 22px;
}
.menu .menu-title {
    display: block;
    font-size: 14px;
}
</style>
