<!--
 * @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="#fff"
    text-color="#455A74"
    active-text-color="#169BFA"
    @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 } 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 {
  border-right: 0;
  user-select: none;
  height: 100%;
}
:deep(.el-sub-menu .is-active) {
  color: #169bfa;
  background: rgba(22, 155, 250, 0.1) !important;
}
:deep(.el-sub-menu, .el-sub-menu__title) {
  color: #455a74 !important;
  height: 40px;
}
:deep(.el-menu-item) {
  color: #455a74 !important;
  height: 40px !important;
  line-height: 40px !important;
}
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-menu-item,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-menu-item-group__title,
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container)
  .el-sub-menu__title {
  /* color: #455a74 !important; */
  height: 40px !important;
}
</style>