<template>
  <el-aside :width="asideWidth" class="sidebar" :class="{ 'sidebar--collapsed': collapsed }">
    <div class="logo">
      <span v-show="!collapsed">伙伴泡泡管理</span>
      <span v-show="collapsed" class="logo-icon">泡</span>
    </div>
    <el-menu
      :default-active="activeMenu"
      :collapse="collapsed"
      router
      background-color="#001529"
      text-color="rgba(255,255,255,0.65)"
      active-text-color="#fff"
    >
      <el-menu-item index="/dashboard">
        <el-icon><DataAnalysis /></el-icon>
        <template #title>总览</template>
      </el-menu-item>
      <el-menu-item index="/rooms">
        <el-icon><OfficeBuilding /></el-icon>
        <template #title>房间管理</template>
      </el-menu-item>
      <el-menu-item index="/sessions">
        <el-icon><List /></el-icon>
        <template #title>游戏记录</template>
      </el-menu-item>
      <el-menu-item index="/screens">
        <el-icon><Monitor /></el-icon>
        <template #title>大屏控制</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { DataAnalysis, OfficeBuilding, List, Monitor } from '@element-plus/icons-vue'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false,
  },
})
const route = useRoute()
const activeMenu = computed(() => {
  const p = route.path
  if (p === '/') return '/dashboard'
  const segments = p.split('/').filter(Boolean)
  return '/' + (segments[0] || 'dashboard')
})
const asideWidth = computed(() => (props.collapsed ? '64px' : '220px'))
</script>

<style scoped>
.sidebar {
  width: 220px;
  background: #001529;
  transition: width 0.2s ease;
  overflow: hidden;
}
.sidebar--collapsed {
  width: 64px;
}
.sidebar--collapsed .logo .logo-icon {
  display: inline;
}
.logo {
  height: 56px;
  line-height: 56px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  white-space: nowrap;
  overflow: hidden;
}
.logo-icon {
  display: none;
  font-size: 20px;
}
.sidebar--collapsed .logo span:first-child {
  display: none;
}
.sidebar--collapsed .logo .logo-icon {
  display: inline;
}
.el-menu {
  border-right: none;
}
.el-menu:not(.el-menu--collapse) {
  width: 220px;
}
</style>
