<template>
  <el-container style="height: 100vh">
    <el-aside width="220px" style="background: #1d1e1f; color: #fff">
      <div class="sidebar-header">
        <h2 style="margin: 0; padding: 20px; font-size: 20px">🐝 LogHive</h2>
      </div>
      <el-menu
        :default-active="route.path"
        router
        background-color="#1d1e1f"
        text-color="#bfcbd9"
        active-text-color="#409eff"
      >
        <el-menu-item index="/">
          <el-icon><DataAnalysis /></el-icon>
          <span>仪表盘</span>
        </el-menu-item>
        <el-menu-item index="/logs">
          <el-icon><Search /></el-icon>
          <span>日志检索</span>
        </el-menu-item>
        <el-menu-item index="/projects">
          <el-icon><Setting /></el-icon>
          <span>项目管理</span>
        </el-menu-item>
        <el-menu-item index="/alerts">
          <el-icon><WarningFilled /></el-icon>
          <span>告警中心</span>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="background: #fff; border-bottom: 1px solid #e4e7ed; display: flex; align-items: center; justify-content: space-between; padding: 0 20px">
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/' }">LogHive</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.path === '/logs'">日志检索</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.path === '/projects'">项目管理</el-breadcrumb-item>
          <el-breadcrumb-item v-if="route.path === '/alerts'">告警中心</el-breadcrumb-item>
        </el-breadcrumb>
        <div style="font-size: 14px; color: #909399">
          LogHive v0.1.0
        </div>
      </el-header>

      <el-main style="background: #f5f7fa">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style>
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.el-menu {
  border-right: none !important;
}
.sidebar-header {
  border-bottom: 1px solid #333;
}
</style>
