<script lang="ts">
export default { name: 'AppAside' }
</script>

<script setup lang="ts">
import type { IMenuItem } from '@/types'
import { useMenuStore } from '@/stores/menu'
const menus = useMenuStore().menus

const route = useRoute()

const currentMenu = computed(() => {
  return findMenu(route.path, menus)
})

const currentSubmenu = computed(() => {
  return currentMenu.value?.children ? findMenu(route.fullPath, currentMenu.value.children) : null
})

function findMenu(path: string, menus: IMenuItem[]) {
  return menus.find((item) => {
    if (
      item.children &&
      item.children.find((item) => {
        const regExp = new RegExp(`^${item.path.replaceAll('?', '\\?')}`)
        return regExp.test(path)
      })
    ) {
      return item
    }
    const regExp = new RegExp(`^${item.path.replaceAll('?', '\\?')}`)
    return regExp.test(path)
  })
}
</script>

<template>
  <aside class="app-aside">
    <nav class="menu">
      <ul>
        <li
          v-for="item in menus"
          :key="item.path"
          :class="{ 'is-active': item.path === currentMenu?.path }"
          v-permission="item.tag">
          <div class="menu-item">
            <template v-if="item.children">
              <RouterLink :to="{ path: item.path, query: { experiment_id: $route.query.experiment_id } }">
                <component :is="item.icon" class="menu-icon"></component>
              </RouterLink>
            </template>
            <el-tooltip :content="item.name" placement="right" v-else>
              <RouterLink :to="{ path: item.path, query: { experiment_id: $route.query.experiment_id } }">
                <component :is="item.icon" class="menu-icon"></component>
              </RouterLink>
            </el-tooltip>
          </div>
          <nav class="submenu" v-if="item.children">
            <h1 class="submenu-title">{{ item.name }}</h1>
            <ul>
              <li
                v-for="submenu in item.children"
                :key="submenu.path"
                :class="{ 'is-active': submenu.path === currentSubmenu?.path }"
                v-permission="submenu.tag">
                <RouterLink :to="{ path: submenu.path, query: { experiment_id: $route.query.experiment_id } }">
                  <component :is="submenu.icon" class="submenu-icon" v-if="submenu.icon"></component>
                  {{ submenu.name }}
                </RouterLink>
              </li>
            </ul>
          </nav>
        </li>
      </ul>
    </nav>
  </aside>
</template>

<style lang="scss">
.app-aside {
  position: sticky;
  top: 0;
  display: flex;
  height: 100vh;
  // overflow-x: hidden;
  // overflow-y: auto;
  box-sizing: content-box;
  z-index: 2001;
  .menu {
    width: 60px;
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    .menu-item {
      height: 44px;
      text-align: center;
      border-radius: 4px;
      a {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        svg {
          width: 24px;
          fill: var(--main-color);
        }
      }
    }
    > ul > li {
      padding: 8px;
      &.is-active {
        .menu-item {
          background-color: var(--main-color);
          svg {
            fill: #fff;
          }
        }
      }
      &:hover {
        .submenu {
          display: block;
        }
      }
    }
  }
  .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
    height: 100vh;
    background: #efefef;
    li {
      margin: 8px 0;
      font-size: 12px;
      line-height: 30px;
      a {
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 20px;
      }
      svg {
        color: #9a9a9a;
        fill: #9a9a9a;
      }
      .submenu-icon {
        width: 18px;
        margin-right: 10px;
      }
      &.is-active {
        color: #fff;
        background-color: var(--main-color);
        svg {
          color: #fff;
          fill: #fff;
        }
      }
    }
  }
  .submenu-title {
    padding: 20px;
    font-size: 14px;
    line-height: 1;
    color: var(--main-color);
  }
}
</style>
