<template>
  <div class="sidebar_menu">
    <div class="sidebar_menu_scroll">
      <el-menu default-active="1" @open="handleOpen" @close="handleClose">
        <template v-for="(item, index) in menu">
          <el-sub-menu v-if="item.children.length > 0" :key="item.path" :index="`${index}`">
            <template #title>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(ite, indey) in item.children"
              :key="ite.path"
              :index="`${index}-${indey}`"
              @click="menuClick(ite.path)"
            >
              {{ ite.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :key="item.name" :index="`${index}`" @click="menuClick(item.path)">{{
            item.name
          }}</el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { useGetters } from "@/hooks/storeHooks";

const router = useRouter();
const { menu } = useGetters(["menu"]);

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath);
};
const handleClose = () => ({});
const menuClick = (item: any) => {
  router.push(item);
};
</script>
<style lang="scss" scoped>
.sidebar_menu {
  height: calc(100vh - 130px);
  width: 200px;
  overflow: hidden;
  &_scroll {
    height: calc(100vh - 73px);
    width: 217px;
    overflow-y: scroll;
    :deep(.el-menu) {
      background-color: transparent;
      .el-sub-menu__title,
      .el-menu-item {
        color: #000;
        &:hover {
          background-color: transparent;
          color: #666ee8;
        }
      }
      .is-active {
        background-color: transparent;
        color: #666ee8;
        font-weight: bolder;
      }
    }
  }
}
</style>
