<template>
    <div class="flex mt-3 h-7">
        <div class="mr-1 cursor-pointer leading-7 px-2.5 hover:bg-primary-light-9 hover:text-primary transition-all duration-300"
            @click="menuClick(item.id)" v-for="(item, index) in menuList" v-show="item.paths != 'workbench'"
            :class="menuName == item.name ? 'bg-primary-light-9 text-primary' : ''">
            {{ item.name }}
        </div>
    </div>
</template>
<script setup>
import { getUserInfo } from "@/api/user"
import useUserStore from '@/stores/modules/user'
import { useWatchRoute } from '@/hooks/useWatchRoute'

const userStore = useUserStore()
const menuList = reactive([])
const menuName = ref('')

const menuClick = (id) => {
    userStore.getUserInfoByID(id)
    localStorage.setItem('menuId', id);
}

getUserInfo().then(res => {
    res.menu.forEach(item => {
        menuList.push(item)
    });
    userStore.getUserInfoByID(localStorage?.getItem('menuId') || menuList[1].id)
})

useWatchRoute((route) => {
    menuName.value = route.matched[0]?.meta?.title || ''
    if (menuList.length) {
        let index = menuList.findIndex(item => item.name == menuName.value)
        userStore.getUserInfoByID(menuList[index]?.id || 173)
    }
})

</script>