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

<script setup lang="ts" name="lv2">
import { useRoute, useRouter } from "vue-router";
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
const $router = useRouter();
const $route = useRoute();
const path: any = ref("/index");
let languageValue = ref(1);
defineProps<{ menus: any }>();

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

const handleOpenPage = (item: any) => {
    $router.push({
        path: item.path
    });
};
watch(
    () => userStore.languageValue,
    newVal => {
        languageValue.value = newVal;
    },
    {
        immediate: true,
        deep: true
    }
);
</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>
