<template>
    <div class="path-nav">
        <ul>
            <li v-for="item in navObj.navlist" >
                <span class="txt" @click="goToPage(item)" :class="{ active: item.active }">{{ item.name }}</span>
                <span class="symbol">/</span>
            </li>
        </ul>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from "@vue/runtime-core";
import { useRouter } from 'vue-router'

const router = useRouter();
const props = defineProps({
  navObj:Object
});

// const props = defineProps({
//     navlist: {
//             type: Array,
//             required: true,
//             default() {
//                 return [
//                     {
//                         name: '图书商场',
//                         path: '/packageManage',
//                         active: false
//                     }
//                 ];
//             }
//         }
// });

function goToPage(item) {
    console.log(1)
    if (item.path) {
        router.push({
            path: item.path,
            query: item.id ?{ id:item.id} : {}
        });
    }
}
</script>
<style lang="less">
.topHeader {
    margin-bottom: 16px !important;
}
</style>
<style lang="less" scoped>
.path-nav {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: @text-color-secondary;
    margin-top: 21px;
    ul {
        list-style: none;
        display: flex;
        align-items: center;
        padding: 0;
        margin: 0;
        li {
            .txt {
                cursor: pointer;
                &.active {
                    font-weight: 400;
                    color: @bar-active-color;
                }
            }
            .symbol {
                color: @text-color-secondary;
                margin: 0 8px;
            }
            &:last-child > .symbol {
                display: none;
            }
        }
    }
}
</style>
