<!--
 * @Author: Devin
 * @Date: 2022-11-10 16:26:32
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:50:51
 * @Description: menu菜单
-->
<template>
  <el-menu
    :default-active="activeMenu"
    :collapse="isCollapse"
    router
    :unique-opened="true"
    background-color="#191a20"
    text-color="#fff"
    active-text-color="#fff"
    @open="handleOpen"
    @select="handleSelect"
    @close="handleClose"
  >
    <template v-for="menu in menuList" :key="menu.name">
      <menu-item
        :index="menu?.['name']"
        :is-collapse="isCollapse"
        :sub-menu="menu"
      ></menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps } from 'vue';
import MenuItem from './MenuItem.vue';

defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  },
  menuList: {
    type: Array,
    default: () => []
  }
});
const activeMenu = ref<any>(localStorage.getItem('keyPath') || '');

const handleOpen = () => {};
const handleClose = () => {};

const handleSelect = (key: any) => {
  localStorage.setItem('keyPath', key);
};

onMounted(() => {
  activeMenu.value = localStorage.getItem('keyPath');
});
</script>
<script lang="ts">
export default {
  name: 'CommonMenu'
};
</script>

<style scoped>
.el-menu {
  height: 100%;
  border-right: 0;
  user-select: none;
}

:deep(.el-sub-menu, .el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.6) !important;
}
:deep(.el-menu-item) {
  color: rgba(255, 255, 255, 0.6) !important;
}
:deep(.el-sub-menu__title) {
  color: rgba(255, 255, 255, 0.6) !important;
}
:deep(.is-active) {
  color: #fff !important;
  background: #169bfa;
}
</style>