<template>
  <div class="page-menu">
    <el-scrollbar wrap-class="page-menu-scrollbar">
      <el-menu
        class="page-menu__menu"
        background-color="#fff"
        text-color="#000"
        active-text-color="#25bf82"
        :collapse-transition="true"
        :unique-opened="true"
        :default-active="active"
        :default-openeds="openeds"
      >
        <SubItem v-for="item in menus" :key="item.path" :item="item" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>
<script setup name="page-menu">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { findParentRoute } from '@/utils/router';
import { isEmpty } from '@/utils';
import SubItem from '@/layouts/component/Menu/SubItem';

const props = defineProps({
  menus: { type: Array, default: () => [] },
});

const route = useRoute();

const openeds = computed(() => {
  const item = findParentRoute(props.menus, route.path);
  return !isEmpty(item) ? [item.path] : [];
});

const active = computed(() => {
  const item = findParentRoute(props.menus, route.path);
  return !isEmpty(item) ? item.path : '';
});
</script>
<style lang="scss" scoped>
.page-menu {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transition: width 0.28s;
  &-scrollbar {
    height: calc(100vh - 60px) !important;
  }
  :deep(.el-scrollbar__wrap) {
    height: calc(100vh - 60px) !important;
  }
  &__menu {
    border-right: 0;
    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
      font-size: 20px;
      font-weight: 400;

      &:hover {
        background-color: #fff;
        color: $color-primary;
      }
    }
    :deep(.el-menu-item) {
      @include flex-row();
      align-items: center;
      padding: 0 16px !important;
    }
    :deep(.el-sub-menu .el-menu-item) {
      font-size: 16px;
      padding-left: 50px !important;
      &:hover {
        .icon-dot {
          background-color: $color-primary;
        }
      }
    }
    :deep(.el-sub-menu .el-icon) {
      font-size: 20px;
    }
    :deep(.el-menu-item.is-active) {
      background-color: #fff;
    }
    &:not(.el-menu--collapse) {
      height: 100%;
    }
  }
}
</style>
