<template>
  <a-layout-sider class="sider">
    <h2>项目管理系统</h2>

    <a-menu
      mode="inline"
      theme="dark"
      :selected-keys="selectedNames"
      class="sider-menu"
      @select="selectMenu"
    >
      <a-menu-item v-for="menu in menus" :key="menu" class="sider-menu-item">
        <template #icon>
          <i class="iconfont" :class="routesMetas[menu].icon" />
        </template>
        <span>{{ routesMetas[menu].title }}</span>
      </a-menu-item>
    </a-menu>
  </a-layout-sider>
</template>

<script setup lang="ts">
import { RoutesName, routesMetas } from '@/router'
import { computed } from 'vue'
import { router, getRouteTreePaths } from '@/router'

import type { MenuProps } from 'ant-design-vue/es/menu'

defineOptions<{ name: 'layout-sider' }>()

type MenuName = typeof menus[number]

const menus = [RoutesName.personal, RoutesName.projects] as const
const selectMenu: MenuProps['onSelect'] = ({ key }) => {
  router.push({ name: key as RoutesName })
}

const selectedNames = computed(() => {
  const routeName = router.currentRoute.value.name as MenuName
  return getRouteTreePaths(routeName) || []
})
</script>

<style scoped lang="scss">
.sider {
  background-color: #001529;
}
h2 {
  background: #002140;
  margin: 0;
  padding: 17px 0;
  font-size: 22px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}
</style>

<style lang="scss">
.sider {
  background-color: #001529;

  .sider-menu {
    .sider-menu-item {
      margin-top: 0;
      margin-bottom: 0;
      height: 60px;
      line-height: 60px;
      position: relative;
      transition: all 0.3s ease;

      &::after {
        content: '';
        position: absolute;
        width: 0px;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: #00b3ec;
        transition: width 0.3s ease;
      }

      &.ant-menu-item-selected {
        background-color: rgba(24, 144, 255, 0.05);

        &::after {
          width: 4px;
        }
      }
    }
  }
}
</style>
