<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.title }}
                </el-menu-item>
            </el-menu>
        </el-drawer>
    </div>

</template>

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

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

const pages_SHZT = [
    { title: 'M1水解', path: '/m1sj' },
    { title: 'M2出料', path: '/m2cl' },
    { title: '换热流程', path: '/hr' },
    { title: '排堵流程', path: '/pd' }
]

const pages_HNZT = [
    { title: '硫酸钙流程1', path: '/CaSO4_1' },
    { title: '硫酸钙流程2', path: '/CaSO4_2' },
    { title: '硫酸钙流程3', path: '/CaSO4_3' },
    { title: '硫酸钙流程4', path: '/CaSO4_4' },
    { title: '铁合金流程', path: '/IronAlloy' },
    { title: '换热流程', path: '/HeatExchange' },
    { title: '分离塔单组PID流程', path: '/SeparationTower/SingleGroup' }
]

const pageMap = {
    SHZT: pages_SHZT,
    HNZT: pages_HNZT
}
const pages = computed(() => pageMap[props.type] || [])

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

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