<template>
    <div class="flex mt-3">
        <!-- <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 class="mr-2 cursor-pointer flex  items-center flex-col  transition-all duration-300 px-[8px] hover:bg-primary-light-9 hover:text-primary "
            @click=" menuClick(item)" v-for="(item, index) in menuList" v-show="item.paths != 'workbench'"
            :style="menuName == item.name ? { 'transform': 'scale(1.1)' } : ''">
            <div class="w-[40px] h-[40px] duration-300 mt-[5px] mb-[2px] !bg-[length:100%_100%]"
                :style="menuName == item.name ? { background: `url(${getImgById(item.id)?.img})` } : { background: `url(${getImgById(item.id)?.actImg})` }">
            </div>
            <span :style="menuName == item.name ? { color: getImgById(item.id)?.color } : ''"> {{ item.name }}</span>
        </div>
    </div>
</template>
<script setup lang="ts">
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 = async (item) => {
    userStore.getUserInfoByID(item.id)
    localStorage.setItem('menuId', item.id);
    await nextTick()
    menuName.value = item.name

}

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)
    }
})

const getImgById = (id: number) => {
    if (id == 173) {
        return { img: '/index/XTACT.png', actImg: "/index/XT.png", color: '#8FC814' }
    }
    else if (id == 174) {
        return { img: '/index/SGGLACT.png', actImg: "/index/SGGL.png", color: '#4073FA' }

    }
    else if (id == 1046) {
        return { img: '/index/ZJZXACT.png', actImg: "/index/ZJZX.png", color: '#F8BC23' }

    }
    else if (id == 1117) {
        return { img: '/index/GCJLACT.png', actImg: "/index/GCJL.png", color: '#336DE8' }

    }
    else if (id == 1399) {
        return { img: '/index/XMGLACT.png', actImg: "/index/XMGL.png", color: '#FF820C' }

    }
    else if (id == 1436) {
        return { img: '/index/XMZXACT.png', actImg: "/index/XMZX.png", color: '#8FC814' }

    }
    else if (id == 1548) {
        return { img: '/index/CWGLACT.png', actImg: "/index/CWGL.png", color: '#F7BB20' }
    }
    else {
        return { img: '/index/SCJYACT.png', actImg: "/index/SCJY.png", color: '#3A6EEF' }
    }
}
</script>