<!-- Sidebar.vue -->
<template>
    <div class="sidebar">
        <el-menu
            class="el-menu-vertical-demo"
            @select="handleSelect">
            <el-menu-item
                v-for="menu in menuList"
                :index="String(menu.id)"
                :key="menu.id"
                :class="{ 'selected': menu.id == selectedMenuId }">
                <i class="el-icon-menu"></i>{{ menu.name }}
            </el-menu-item>
        </el-menu>
    </div>
</template>


<script>
import {ref} from "vue"
import {reactive} from "vue"
import {onMounted} from "vue"

export default {

    // 固定名称的函数，在生命周期钩子中自动执行
    setup(_, {emit}) {

        // 定义变量
        // 被选中的menu id
        const selectedMenuId = ref(0)
        // Menu清单
        const menuList = reactive([
            {
                id: 0,
                name: "All",
                elementName: "All"
            },
            {
                id: 1,
                name: "Tutorial-1-options",
                elementName: "tutorial_1_options"
            },
            {
                id: 2,
                name: "Tutorial-1-composition",
                elementName: "tutorial_1_composition"
            },
            {
                id: 3,
                name: "Tutorial-2-composition",
                elementName: "tutorial_2_composition"
            },
            {
                id: 4,
                name: "Tutorial-3-composition",
                elementName: "tutorial_3_composition"
            }
        ])
        // 定义计算属性

        // 定义函数
        function handleSelect(key, keyPath){
            selectedMenuId.value = Number(key);
            // console.log("keyPath = " + keyPath)
            // 这里可以根据需要添加逻辑来处理页面切换
            // 通过emit触发父模板的函数
            emit("selectMenu", selectedMenuId.value)
        }

        // On Mounted
        onMounted(() => {
            // alert("onMounted")
            // 复制一份数组，避免直接修改响应式数据
            const newMenuList = menuList.slice(); // 复制一份数组，避免直接修改响应式数据
            // 将menuList传递给父组件
            emit("initMenuList", newMenuList)
        })

        return {

            // 变量
            selectedMenuId,
            menuList,
            // 计算属性
            // 函数
            handleSelect
        }

    }

}


</script>

<style scoped>
/* 添加这个样式规则来定义选中时的背景颜色 */
.selected {
    background-color: rgb(230, 240, 255); /* 或者你想要的任何颜色 */
    color: black; /* 可选：改变文字颜色以提高可读性 */
}

</style>