<template>
  <view class="aside">
    <view class="aside-header">
      <view class="logo">
        <text class="logo-text">{{ collapsed ? '商' : '商城后台' }}</text>
      </view>
      <view class="collapse-btn" @click="$emit('toggle')">
        <text class="collapse-text">{{ collapsed ? '›' : '‹' }}</text>
      </view>
    </view>

    <view class="aside-menu">
      <view
        v-for="m in menuList"
        :key="m.id"
        class="aside-item"
        :class="{ active: activeMenuId === m.id }"
        @click="$emit('menu-click', m.id)"
      >
        <image class="aside-icon" :src="m.icon" mode="aspectFit" />
        <text class="aside-title" v-if="!collapsed">{{ m.title }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">
import type { MenuItem } from '../types.uts'

defineProps<{
  collapsed: boolean
  menuList: MenuItem[]
  activeMenuId: string
}>()

defineEmits<{
  (e:'toggle'): void
  (e:'menu-click', menuId: string): void
}>()
</script>

<style>
.aside{
  width: 96px;
  background: #1f2a37;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  display:flex;
  flex-direction: column;
  z-index: 1000;
}
.aside-header{
  height: 56px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.logo-text{ color:#fff; font-size:14px; font-weight:600; }
.collapse-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.collapse-text{ color:rgba(255,255,255,0.7); }

.aside-menu{ padding: 8px 0; }
.aside-item{
  height: 54px;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap: 6px;
  margin: 6px 10px;
  border-radius: 8px;
}
.aside-item.active{ background:#1677ff; }
.aside-icon{ width:22px; height:22px; }
.aside-title{ color:#fff; font-size:12px; }
</style>
