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

<script setup lang="ts">
import { menus } from '@/assets/menus'
import type { IMenuItem } from '@/types'
const router = useRouter()
const route = useRoute()

const menuList = $computed<IMenuItem[]>(() => {
  const found = menus.find(item => route.fullPath.includes(item.path))
  return found?.children || []
})
const defaultActive = computed(() => {
  // 扁平菜单
  const flatMenuList: IMenuItem[] = menuList.reduce((result: IMenuItem[], item) => {
    result.push(item)
    if (item.children) {
      result = result.concat(item.children)
    }
    return result
  }, [])
  const found = flatMenuList.reverse().find(item => {
    return route.path.includes(item.path)
  })
  return found ? found.path : '/'
})

function isUrl(path: string) {
  return /^https?:\/\//.test(path)
}

function handleClick(path: string) {
  if (isUrl(path)) {
    window.open(path)
  } else {
    router.push(path)
  }
}
</script>

<template>
  <aside class="app-aside">
    <nav class="nav">
      <el-menu :default-active="defaultActive" class="app-menu">
        <template v-for="item in menuList" :key="item.path">
          <el-sub-menu :index="item.path" v-permission="item.tag" v-if="item.children">
            <template #title>
              <el-icon><component :is="item.icon"></component></el-icon>{{ item.name }}
            </template>
            <el-menu-item
              :index="subitem.path"
              v-for="subitem in item.children"
              :key="subitem.path"
              v-permission="subitem.tag"
              @click="handleClick(subitem.path)"
            >
              {{ subitem.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item :index="item.path" v-permission="item.tag" @click="handleClick(item.path)" v-else>
            <el-icon><component :is="item.icon"></component></el-icon>{{ item.name }}
          </el-menu-item>
        </template>
      </el-menu>
    </nav>
  </aside>
</template>

<style lang="scss">
.app-aside {
  width: 200px;
  background: #2e3036;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  overflow-x: hidden;
  overflow-y: auto;
  flex: 0 0 200px;
  box-sizing: content-box;
}
.nav {
  position: fixed;
  width: 200px;
  margin: 20px 0;

  --el-menu-text-color: #cecece;
  --el-menu-bg-color: #2e3036;

  --el-menu-active-color: #fff;
  --el-menu-active-bg-color: #4b4c50;

  --el-menu-hover-color: #fff;
  --el-menu-hover-bg-color: #4b4c50;

  .el-menu {
    border-right: 0;
    i {
      margin-right: 14px;
      font-size: 24px;
    }
    .el-icon-arrow-down {
      margin-right: 0;
      font-size: 16px;
    }
  }

  .el-menu-item {
    &.is-active {
      background: var(--el-menu-active-bg-color);
    }
  }
  // .el-menu-item {
  //   display: flex;
  //   align-items: center;
  //   margin: 0 16px;
  //   font-size: 16px;
  //   border-radius: 8px;
  // }
  // .el-submenu .el-menu-item {
  //   min-width: auto;
  //   padding-left: 58px !important;
  // }
  // .el-submenu__title {
  //   display: flex;
  //   align-items: center;
  //   margin: 0 16px;
  //   font-size: 16px;
  //   border-radius: 8px;
  // }
}
</style>
