<template>
    <div>
        <el-button @click="visible = true">
            组态页面目录
        </el-button>

        <el-drawer v-model="visible" :show-close="false" size="300px">
            <template #header="{ close, titleId, titleClass }">
                <h4 :id="titleId" :class="titleClass">页面目录</h4>
                <el-button type="danger" @click="close">
                    关闭
                </el-button>
            </template>

            <el-menu @select="handleSelect" :default-active="activePath">
                <el-menu-item v-for="item in pages" :key="item.path" :index="item.path">
                    {{ item.label }}
                </el-menu-item>
            </el-menu>
        </el-drawer>
    </div>

</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const props = defineProps({
    pages: {
        type: Array,
        default: () => []
    }
})
// 控制抽屉显隐
const visible = ref(false)

// 路由跳转相关
const router = useRouter()
const route = useRoute()
const activePath = ref(route.path)

const handleSelect = (path) => {
    visible.value = false
    if (path !== route.path) {
        router.push(path)
    }
}
</script>

<style lang="scss" scoped>
.el-menu {
    border-right: none;
}
</style>
