<script setup lang="ts">
    const router = useRouter()

    const navMenuList = [
        { name: '首页', routerName: 'home' },
        { name: '自选直租', routerName: 'equipList' },
        { name: '寻源比价', routerName: '/home' },
        { name: '二手交易', routerName: '/home' },
        { name: '保险业务', routerName: '/home' },
        { name: '检验业务', routerName: '/home' },
        { name: '企业专区', routerName: '/home' }
    ]

    const navMenuClick = (name) => {
        router.push({ name })
    }
</script>

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

<style lang="scss" scoped>
    .nav-menu {
        height: 43px;
        background-color: #f7f9fa;
        border-radius: 8px;
        display: flex;
        align-items: center;

        li {
            color: #7d7d7d;
            padding: 0 20px;
            border-right: 1px solid #7d7d7d;

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

            &:last-child {
                border: none;
            }
        }
    }
</style>
