<template>
    <div class="side-bar" :style="{ width: isCollapse ? '64px' : '281px' }">
        <div class="logo" @click="handleCollapse">
            <img class="logo-icon" src="@/assets/images/common/logo.png" alt="" />
            <span v-show="!isCollapse">飞鸟后台管理平台</span>
        </div>
        <el-menu
            :default-active="defaultActive"
            class="el-menu-vertical"
            @open="handleOpen"
            @close="handleClose"
            :collapse="isCollapse"
            router
        >
            <el-menu-item index="/layout">
                <el-icon><Stopwatch /></el-icon>
                <span>容器体系</span>
            </el-menu-item>
            <el-menu-item index="/map_building/index2">
                <el-icon><DataAnalysis /></el-icon>
                <span>物候期管理</span>
            </el-menu-item>
            <el-menu-item index="/layout2">
                <el-icon><ChatDotSquare /></el-icon>
                <span>生育期管理</span>
            </el-menu-item>
            <el-menu-item index="/layout3">
                <el-icon><TrendCharts /></el-icon>
                <span>指标管理</span>
            </el-menu-item>
            <el-menu-item index="/map_building/index">
                <el-icon><Sunny /></el-icon>
                <span>气象管理</span>
            </el-menu-item>
            <el-menu-item index="/map_building/index1">
                <el-icon><Setting /></el-icon>
                <span>模型管理</span>
            </el-menu-item>
        </el-menu>
        <div class="logout" @click="handleLogout">
            <img src="@/assets/images/common/logout.png" alt="" />
            <span>Sign out</span>
        </div>
    </div>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();

const defaultActive = ref(route.meta?.menuIndex || "");
const emit = defineEmits(["handleCollapse"]);
const isCollapse = ref(false);
const handleCollapse = () => {
    isCollapse.value = !isCollapse.value;
    emit("handleCollapse", isCollapse.value);
};

// 初始化设置激活项
// onMounted(() => {
//   updateActiveMenu()
// })

// function updateActiveMenu() {
//   // 根据当前路由设置激活的菜单项
//   defaultActive.value = route.path

//   // 如果你需要匹配父级菜单，可以这样处理
//   // 例如当访问 /layout/home 时，同时激活 /layout 子菜单
//   const matchedPaths = route.matched.map(item => item.path)
//   if (matchedPaths.includes('/layout')) {
//     defaultActive.value = route.path
//   }
// }

const handleOpen = (key, keyPath) => {
    // console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
    // console.log(key, keyPath);
};

watch(
    () => route.meta?.menuIndex,
    (menuIndex) => {
        if (menuIndex) {
            defaultActive.value = menuIndex;
        }
    },
    { immediate: true }
);

const handleLogout = () => {
    router.push("/login");
};
</script>

<style lang="scss" scoped>
.side-bar {
    width: 281px;
    height: 100vh;
    box-sizing: border-box;
    transition: width 0.3s ease-in-out;
    position: relative;
    background: #161926;
    .logo {
        padding: 22px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        .logo-icon {
            width: 29px;
            height: 32px;
            margin-right: 12px;
        }
        span {
            font-size: 24px;
            letter-spacing: 2px;
            font-family: "PangMenZhengDao";
            background: linear-gradient(to bottom, #F3C11D, #ffffff);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent; /* 兼容性备用 */
        }
    }
    .el-menu-vertical {
        border: none;
        --el-menu-active-color: #F3C11D;
        --el-menu-text-color: #B0B0B0;
        --el-menu-hover-bg-color: linear-gradient(to right, rgba(243, 193, 29,0.15), rgba(22, 25, 38,0.15));
        background-color: #161926;
        .el-menu-item.is-active,
        .el-menu-item:hover {
            background-image: linear-gradient(to right, rgba(243, 193, 29,0.15), rgba(22, 25, 38,0.15));
        }

        .el-menu-item {
            font-size: 16px;
        }
        // .icon{
        //     width: 15px;
        //     height: 14px;
        //     text-align: center;
        //     vertical-align: middle;
        //     margin-right: 5px;
        // }
    }
    .logout {
        position: absolute;
        bottom: 28px;
        left: 28px;
        display: flex;
        align-items: center;
        font-size: 16px;
        cursor: pointer;
        img {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
    }
}
</style>
