<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"
                @click="mouseover(menu)"
            >
                <div>
                    <i v-if="menu.meta.icon" :class="['iconfont', menu.meta.icon]"></i>
                    <span class="menu-title">{{ languageValue === 1 ? menu.meta.zhTitle : menu.meta.enTitle }}</span>
                </div>
            </li>
        </template>
    </ul>
</template>

<script setup lang="ts" name="lv1">
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
defineProps<{ menuList: Menu.MenuOptions[] }>();
let languageValue = ref(1);
const emits = defineEmits<{
    (e: "change", item: any): void;
}>();
let actived = ref<any>("foundation");
const mouseover = (menu: any) => {
    actived.value = menu.name;
    emits("change", menu);
};
watch(
    () => userStore.languageValue,
    newVal => {
        languageValue.value = newVal;
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

<style lang="scss">
.menu {
    width: 95px;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    list-style: none;
}
.menu .menu-item {
    padding: 18px 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>
