<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 defaultActive = computed(() => {
  // 扁平菜单
  const flatMenuList: IMenuItem[] = menus.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 collapse :default-active="defaultActive" class="app-menu">
        <template v-for="item in menus" :key="item.path">
          <el-sub-menu :index="item.path" 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"
              @click="handleClick(subitem.path)"
            >
              {{ subitem.name }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item :index="item.path" @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: 90px;
  background: #fff;
  border-right: 1px solid #e6e6e6;
  overflow-x: hidden;
  overflow-y: auto;
  flex: 0 0 90px;
  box-sizing: content-box;
}
.nav {
  position: fixed;
  width: 90px;
  --el-menu-item-font-size: 16px;
  --el-menu-item-height: 1;

  --el-menu-base-level-padding: 0;
  --el-menu-text-color: #707070;

  --el-menu-active-color: #ba143e;
  --el-menu-active-bg-color: #f7e9ec;

  --el-menu-hover-color: #ba143e;
  --el-menu-hover-bg-color: #f7e9ec;

  .el-menu {
    border-right: 0;
  }

  .el-menu-item {
    flex-direction: column;
    justify-content: center;
    width: 66px;
    height: 66px;
    margin: 50px auto;
    border-radius: 14px;
    &.is-active {
      background: var(--el-menu-active-bg-color);
    }
    .el-icon {
      margin-bottom: 7px;
      font-size: 22px;
    }
  }
}
</style>
