<template>
  <view class="admin-subsider" :style="{ left: asideWidth + 'px', width: siderWidth + 'px' }">
    <view class="subsider-header">
      <text class="header-title">{{ topMenuTitle }}</text>
    </view>

    <view class="subsider-menu">
      <view v-for="group in groups" :key="group.id" class="menu-group">
        <view class="group-title">
          <text>{{ group.title }}</text>
        </view>

        <view 
          v-for="route in getGroupRoutes(group.id)" 
          :key="route.id"
          class="menu-item"
          :class="{ active: route.id === activeRouteId }"
          @click="onRouteClick(route.id)"
        >
          <text class="item-title">{{ route.title }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import type { MenuGroup, RouteRecord } from '@/layouts/admin/router/adminRoutes.uts'

const props = defineProps<{
  topMenuTitle: string
  groups: MenuGroup[]
  routes: Map<string, RouteRecord[]>
  activeRouteId: string
  asideWidth: number
  siderWidth: number
}>()

const emit = defineEmits<{
  (e: 'route-click', routeId: string): void
}>()

function getGroupRoutes(groupId: string): RouteRecord[] {
  return props.routes.get(groupId) || []
}

function onRouteClick(routeId: string): void {
  emit('route-click', routeId)
}
</script>

<style scoped lang="scss">
.admin-subsider {
  position: fixed;
  top: 0;
  bottom: 0;
  background: #fff;
  border-right: 1px solid #e8e8e8;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.subsider-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #e8e8e8;
  
  .header-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
}

.subsider-menu {
  flex: 1;
  padding: 8px 0;
  overflow-y: scroll;
}

.menu-group {
  margin-bottom: 16px;
}

.group-title {
  padding: 8px 16px;
  font-size: 12px;
  color: #999;
  font-weight: 500;
  
  text {
    display: block;
  }
}

.menu-item {
  height: 36px;
  padding: 0 16px 0 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  
  &:hover {
    background: #f5f5f5;
  }
  
  &.active {
    background: #e6f7ff;
    color: #1890ff;
    
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: #1890ff;
    }
  }
  
  .item-title {
    font-size: 14px;
  }
}
</style>
