<template>
  <MenuLogo class="layout-logo" v-if="!isCollapse" />
  <el-menu
    :default-active="activeIdex"
    class="el-menu-vertical-startbos"
    :collapse="isCollapse"
    background-color="#304156"
    router
  >
    <MenuItem :menuList="menuList" />
  </el-menu>
</template>
<script setup lang="ts">
import { useStore } from "@/store/index";
import MenuItem from "./MenuItem.vue";
import MenuLogo from "@/layout/menu/MenuLogo.vue";

// setup语法糖中 定义的数据和方法，直接可以在模板中使用，无需要 return
const store = useStore();
//当前路由
const route = useRoute();
const activeIdex = computed(() => {
  const { path } = route;
  return path;
});
//菜单数据
const menuList = [
  {
    path: "/home",
    component: "/home/index.vue",
    name: "home",
    meta: {
      title: "人才库基础设置",
      icon: "setting",
    },
  },
  {
    path: "/talentPool",
    component: "/talentPool/index.vue",
    name: "talentPool",
    meta: {
      title: "人才库",
      icon: "User",
    },
  },
  {
    path: "/bigData",
    component: "/bigData/index.vue",
    name: "bigData",
    meta: {
      title: "人才大数据",
      icon: "DataLine",
    },
  },
];

const isCollapse = computed(() => {
  return store.getters["menu/getCollapse"];
});
</script>
<style scoped>
@keyframes logoAnimation {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

.layout-logo {
  animation: logoAnimation 1s ease-out;
}

.el-menu-vertical-startbos:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}

.el-menu {
  border-right: none;
}

:deep(.el-sub-menu .el-sub-menu__title) {
  color: #f4f4f5 !important;
}

:deep(.el-menu .el-menu-item) {
  color: #bfcbd9;
}

/* 菜单点中文字的颜色 */

:deep(.el-menu-item.is-active) {
  color: #409eff !important;
}

/* 当前打开菜单的所有子菜单颜色 */

:deep(.is-opened .el-menu-item) {
  background-color: #1f2d3d !important;
}

/* 鼠标移动菜单的颜色 */

:deep(.el-menu-item:hover) {
  background-color: #001528 !important;
}
</style>
