<template>
  <el-container style="min-height: 100vh;">
    <el-aside width="220px" style="background: #1d1e2c;">
      <div class="logo">AirGate</div>
      <el-menu :default-active="route.path" router background-color="#1d1e2c"
               text-color="#a0a3bd" active-text-color="#fff">
        <el-menu-item index="/">
          <el-icon><Monitor /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/iam-users">
          <el-icon><User /></el-icon>
          <span>子账号管理</span>
        </el-menu-item>
        <el-menu-item index="/billing">
          <el-icon><Wallet /></el-icon>
          <span>消费监控</span>
        </el-menu-item>
        <el-menu-item index="/alerts">
          <el-icon><Bell /></el-icon>
          <span>告警记录</span>
        </el-menu-item>
        <el-menu-item index="/settings">
          <el-icon><Setting /></el-icon>
          <span>系统设置</span>
        </el-menu-item>
        <el-menu-item index="/admin">
          <el-icon><Key /></el-icon>
          <span>系统管理</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="display: flex; align-items: center; justify-content: flex-end;
                         background: #fff; border-bottom: 1px solid #eee; height: 56px;">
        <span style="margin-right: 16px; color: #666;">{{ auth.user?.username }}</span>
        <el-button text @click="handleLogout">退出登录</el-button>
      </el-header>
      <el-main style="background: #f5f7fa; padding: 24px;">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()

function handleLogout() {
  auth.logout()
  router.push('/login')
}
</script>

<style scoped>
.logo {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 20px 24px;
  letter-spacing: 1px;
}
</style>
