<template>
    <a-menu
        :theme="appSetting.left_sidebar_theme"
        :openKeys="openKeys"
        v-model:selectedKeys="selectedKeys"
        :mode="mode"
        @openChange="onOpenChange"
        :style="{ borderRight: 'none' }"
    >
        <a-menu-item
            @click="
                () => {
                    menuSelected();
                    $router.push({ name: 'superadmin.dashboard.index' });
                }
            "
            key="dashboard"
        >
            <HomeOutlined />
            <span>{{ $t("menu.dashboard") }}</span>
        </a-menu-item>

        <a-menu-item @click="logout" key="logout">
            <LogoutOutlined />
            <span>{{ $t("menu.logout") }}</span>
        </a-menu-item>
    </a-menu>
</template>

<script>
import { defineComponent, ref, watch, onMounted, computed } from "vue";
import { Layout } from "ant-design-vue";
import { useAuthStore } from "../../main/store/authStore";
import { useRoute } from "vue-router";
import { HomeOutlined, LogoutOutlined } from "@ant-design/icons-vue";
import { PerfectScrollbar } from "vue3-perfect-scrollbar";
import common from "../../common/composable/common";
const { Sider } = Layout;

export default defineComponent({
    props: ["collapsed"],
    components: {
        Sider,
        PerfectScrollbar,
        Layout,

        HomeOutlined,
        LogoutOutlined,
    },
    setup(props, { emit }) {
        const { appSetting, user, permsArray, appModules, cssSettings } = common();
        const rootSubmenuKeys = ["dashboard"];
        const authStore = useAuthStore();
        const route = useRoute();

        const openKeys = ref([]);
        const selectedKeys = ref([]);
        const mode = ref("horizontal");

        onMounted(() => {
            setSelectedKeys(route);
        });

        const logout = () => {
            authStore.logoutAction();
        };

        const menuSelected = () => {
            emit("menuSelected");
        };

        const onOpenChange = (currentOpenKeys) => {
            const latestOpenKey = currentOpenKeys.find(
                (key) => openKeys.value.indexOf(key) === -1
            );

            if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
                openKeys.value = currentOpenKeys;
            } else {
                openKeys.value = latestOpenKey ? [latestOpenKey] : [];
            }
        };

        const setSelectedKeys = (newVal) => {
            const menuKey =
                typeof newVal.meta.menuKey == "function"
                    ? newVal.meta.menuKey(newVal)
                    : newVal.meta.menuKey;

            if (newVal.meta.menuParent == "settings") {
                selectedKeys.value = ["settings"];
            } else {
                selectedKeys.value = [menuKey.replace("-", "_")];
            }

            if (cssSettings.value.headerMenuMode == "horizontal") {
                openKeys.value = [];
            } else {
                openKeys.value = [newVal.meta.menuParent];
            }
        };

        watch(route, (newVal, oldVal) => {
            setSelectedKeys(newVal);
        });

        return {
            mode,
            selectedKeys,
            openKeys,
            logout,
            innerWidth: window.innerWidth,

            onOpenChange,
            menuSelected,
            appSetting,
            user,
            permsArray,
            appModules,
        };
    },
});
</script>

<style lang="less"></style>
