<template>
  <div class="admin-menu">
    <div class="title">{{ currentApp.title }}</div>
    <el-scrollbar>
      <el-menu :default-active="route.name" @select="toView">
        <template v-for="item in currentApp.children" :key="item.path">
          <loop-menu :menuItem="item" />
        </template>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup>
  import { useRouter, useRoute } from 'vue-router';
  import { useApp } from '@/sheep/hooks';
  import LoopMenu from './loop-menu.vue';
  import sheep from '@/sheep';
  const appStore = sheep.$store('app');
  const router = useRouter();
  const route = useRoute();

  const { appBrowser, currentApp } = useApp();
  // 页面跳转
  function toView(name) {
    if (name != route.name) {
      router.push({ name: name });
      appStore.menuCollapse(appBrowser.value.isMini);
    }
  }
</script>

<style lang="scss" scoped>
  .admin-menu {
    height: 100%;
    padding: 0 11px 0 12px;
    background: var(--sa-background-assist);
    border-right: 1px solid var(--sa-border);
    .title {
      line-height: 64px;
      padding: 0 12px;
      font-size: 20px;
      font-weight: 500;
      color: var(--sa-subtitle);
    }
    .el-menu {
      --el-menu-active-color: var(--el-color-primary);
      --el-menu-text-color: var(--sa-font);
      --el-menu-hover-text-color: var(--el-color-primary);
      --el-menu-bg-color: transparent; //
      --el-menu-hover-bg-color: var(--el-color-primary-light-9);
      --el-menu-item-height: 32px; //
      --el-menu-sub-item-height: 32px; //
      --el-menu-horizontal-sub-item-height: 36px;
      --el-menu-item-font-size: var(--el-font-size-base);
      --el-menu-item-hover-fill: var(--el-color-primary-light-9);
      --el-menu-border-color: var(--el-border-color);
      --el-menu-base-level-padding: 12px; //
      --el-menu-level-padding: 20px;
      --el-menu-icon-width: 24px;
      --el-menu-icon-transform-closed: none;
      --el-menu-icon-transform-open: rotateZ(180deg);
      width: 160px;
      height: 100%;
      border-right: none;
      :deep() {
        .el-sub-menu__title,
        .el-menu-item {
          border-radius: 4px;
          &.is-active {
            background: var(--t-bg-hover);
          }
        }
        .el-sub-menu .el-menu-item {
          min-width: unset;
        }
      }
    }
  }
</style>
