<script setup lang="ts">
import { useStore } from '../../store/user'
const store = useStore()
const router = useRouter()
const route = useRoute()
// const navMenuList = [
//     { name: '首页', routerName: 'home' },
//     { name: '装备共享大厅', routerName: 'equipList' },
//     { name: '租赁需求大厅', routerName: 'parity' },
//     // { name: '装备管理', routerName: '/home' },
//     { name: '订单管理', routerName: '/home' },
//     // { name: '基础管理', routerName: '/home' },
//     { name: '通知公告', routerName: 'enterpriseZone' },
//     // { name: '综合查询', routerName: 'enterpriseZone' },
// ]

const isType: any = localStorage.getItem('rolesType')
const navMenuList = computed(() => {
    // return store.leaseAndLesseeList
    if (isType == 1)
        return [
            { name: '首页', routerName: 'home' },
            { name: '装备共享大厅', routerName: 'equipList' },
            { name: '租赁需求大厅', routerName: 'parity' },
            { name: '装备管理', routerName: 'goodsManagement' },
            { name: '订单管理', routerName: 'orderManagementCz' },
            { name: '接单管理', routerName: 'accept-orders' },
            { name: '通知公告', routerName: 'enterpriseZone' },
        ]
    if (isType == 2)
        return [
            { name: '首页', routerName: 'home' },
            { name: '装备共享大厅', routerName: 'equipList' },
            { name: '租赁需求大厅', routerName: 'parity' },
            { name: '订单管理', routerName: 'orderManagement' },
            { name: '需求管理', routerName: 'sourcingNeed' },
            { name: '通知公告', routerName: 'enterpriseZone' },
        ]
})

const navMenuClick = (name: any) => {
    const includeList = [
        'goodsManagement',
        'orderManagementCz',
        'orderManagement',
        'sourcingNeed',
        'accept-orders',
    ]
    if (includeList.includes(name)) {
        store.editcurrentMenuItem(name)
        setTimeout(() => {
            router.push({
                name: 'my-user',
            })
        }, 500)
    } else {
        router.push({ name })
    }
}
</script>

<template>
    <ul class="nav-menu">
        <li
            v-for="item in navMenuList"
            :key="item.name"
            @click="navMenuClick(item.routerName)"
            :class="{ 'active-li': route.meta.activeName === item.routerName }"
        >
            {{ item.name }}
        </li>
    </ul>
</template>

<style lang="scss" scoped>
.nav-menu {
    // height: 48px;
    padding: 6px 0;
    background-color: #f7f9fa;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-size: 18px;

    li {
        color: #7d7d7d;
        padding: 4px 10px;

        // border-right: 1px solid #7d7d7d;

        &:hover {
            cursor: pointer;
            color: #00a288;
            font-weight: bold;
        }

        &:last-child {
            border: none;
        }
    }

    .active-li {
        color: #00a288;
        font-weight: bold;
        background-color: #c9e7e5;
        border-radius: 8px;
    }
}
</style>
