<template>
    <div class="wrap">
        <!-- <div>{{ JSON.stringify(menus) }}</div> -->
        <h4 class="wrap-tag">{{ menus.meta.title }}</h4>
        <div class="menu-wrap" v-for="(menu, idx) in menus.children" :key="idx">
            <p class="title">{{ menu.meta.title }}</p>
            <ul class="menu1" style="margin: 0 !important">
                <li v-for="(item, key) in menu.children" :key="key">
                    <a
                        href="javascript:void(0);"
                        :class="{ actived: item.path == path }"
                        @click="handleOpenPage(item)"
                        v-if="!item.hidden"
                        >{{ item.meta.title }}</a
                    >
                    <a
                        target="_blank"
                        :class="{ actived: item.path == path }"
                        :href="item.path"
                        v-else-if="(item.hidden && item.path.indexOf('https://') !== -1) || item.path.indexOf('http://') !== -1"
                        >{{ item.meta.title }}</a
                    >
                </li>
            </ul>
        </div>
    </div>
</template>

<script setup lang="ts" name="lv2">
import { useRoute, useRouter } from "vue-router";
const $router = useRouter();
const $route = useRoute();
const path: any = ref("/index");

defineProps<{ menus: any }>();

watch(
    () => $route,
    (to: any) => {
        path.value = to.path;
    }
);

const handleOpenPage = (item: any) => {
    $router.push({
        path: item.path
    });
};
</script>
<style lang="scss" scoped>
.wrap {
    padding: 24px;
}
.wrap-tag {
    font-size: 18px;
    color: #303133;
}
.menu-wrap {
    margin: 24px 0;
}
.menu-wrap .title {
    font-size: 14px;
    font-weight: bold;
    color: #303133;
}
.menu-wrap .menu1 {
    padding: 0;
    margin: 0;
    list-style: none;
    border-left: 1px solid #dcdfe6;
}
.menu-wrap .menu1 li {
    margin-bottom: 10px;
}
.menu-wrap .menu1 li:not(:last-child) {
    margin-bottom: 10px;
}
.menu-wrap .menu1 li a {
    display: block;
    min-width: 140px;
    padding-left: 24px;
    margin-left: -1px;
    font-size: 14px;
    color: #303133;
    text-decoration: none;
}
.menu-wrap.menu1 li a::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 8px;
    margin-top: -4px;
    content: "";
    background-color: #dcdfe6;
}
.menu-wrap .menu1 li a.actived,
.menu-wrap .menu1 li a:hover {
    color: #4178d5;
    border-left: 2px solid #4178d5;
}
</style>
