<template>
    <el-scrollbar>
    <div class="ams-el-menu">
    <!-- <div class="menu-search">
       <el-select placement="bottom" v-model="searchValue" clearable filterable remote reserve-keyword
        :placeholder="'请输入关键字搜索...'" :remote-method="remoteMethod" @change="selectChange" :loading="loading">
        <template #prefix><i class="el-icon-search"></i></template>
        <el-option v-for="item in menus" :key="item.menuId" :label="item.menuName" :value="item.menuName" />
      </el-select>
    </div>  -->
    
    <el-menu unique-opened :collapse-transition='false' :collapse='$store.state.iscollapse' router :default-active="defaultActive" active-text-color="#409EFF" background-color="#32363f" text-color="#fff">
        <!-- 一级菜单 -->
        <el-sub-menu :index="item.menuId + ''" v-for="item in menus" :key="item.menuId">
            <!-- 一级菜单内容 -->
            <template #title>
                <el-icon v-if="item.menuIcon != null && item.menuIcon !== ''">
                    <el-image style="width: 18px;height: 18px;"  :src="'/imgs/meun/'+item.menuIcon" :fit="'fill'" />
                </el-icon>
                <el-icon v-else><icon-menu /></el-icon>
                <span>{{ item.menuName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="subItem.navigateUrl" v-for="subItem in item.childs" :key="subItem.menuId" @click="saveNav(subItem.navigateUrl)">
                <!-- 二级菜单内容 -->
                <template #title>
                    <el-icon v-if="subItem.menuIcon != null && item.menuIcon !== ''">
                        <el-image style="width: 18px;height: 18px;"  :src="'/imgs/meun/'+subItem.menuIcon" :fit="'fill'" />
                    </el-icon>
                    <el-icon v-else><icon-menu /></el-icon>
                    <span>{{ subItem.menuName }}</span>
                </template>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</div>
</el-scrollbar>
</template>

<style lang="less" scoped>
    .ams-el-menu {
        width: 100%;
        height: 100%;
        .menu-icon {
            font-size: 18px;
            margin-right: 6px;
        }
    }

    .menu-search {
        padding: 6px 10px;

        ::v-deep(.el-input__wrapper) {
            border-radius: 15px !important;
        }
    }

    :deep(.el-menu) {
        background: rgba(0, 0, 0, 0.0)
    }

        /*隐藏文字*/
    .el-menu--collapse .el-sub-menu__title span {
        display: none;
    }

    /*隐藏 > */
    .el-menu--collapse .el-sub-menu__title .el-sub-menu__icon-arrow {
        display: none;
    }

</style>

<script lang="ts" setup>
    import { useStore } from 'vuex'
    import { computed, ref, getCurrentInstance,onMounted } from 'vue'
    import { onBeforeRouteUpdate } from 'vue-router'
    import {
        Menu as IconMenu
    } from '@element-plus/icons-vue'

    // const searchValue = ref('');
    // const proxy = getCurrentInstance();
    // const props = defineProps(['meun', 'thisIndex']);
    // const emit = defineEmits(['subEvent']);
    // const options = ref([]);
    // const loading = ref(false);

    const store = useStore()
    //定义默认展开
    let defaultActive = ref('/home')

    //定义常量接收仓库中的导航数据
    const menus = computed(() => {       
        return store.state.menus
    })

    onMounted(()=>{
        const isdefaultActive = window.sessionStorage.getItem('activePath') 
        if(isdefaultActive){
            defaultActive.value = window.sessionStorage.getItem('activePath')        
        }     
    })

    //监听当前路由发生变化
    onBeforeRouteUpdate((to, from) => {
        //设置高亮菜单
        defaultActive.value = to.path    
        window.sessionStorage.setItem('activePath',to.path)
    })


    //获取点击菜单的路由地址
    const saveNav=(path)=>{
        defaultActive.value=path
        window.sessionStorage.setItem('activePath',path)
    }

</script>