<template>
  <el-container style="height:100vh">
    <el-aside width="200px" style="background:#001529">
      <div style="padding:20px;text-align:center;border-bottom:1px solid #1f1f1f">
        <h2 style="margin:0;color:#fff">GitM</h2>
      </div>
      <el-menu :default-active="$route.path" router background-color="#001529" text-color="#fff" active-text-color="#1890ff">
        <el-menu-item index="/"><el-icon><DataBoard /></el-icon><span>仪表盘</span></el-menu-item>
        <el-menu-item index="/servers"><el-icon><Monitor /></el-icon><span>服务器</span></el-menu-item>
        <el-menu-item index="/repos"><el-icon><DocumentCopy /></el-icon><span>仓库列表</span></el-menu-item>
        <el-menu-item index="/logs"><el-icon><Document /></el-icon><span>同步日志</span></el-menu-item>
        <el-menu-item index="/settings"><el-icon><Setting /></el-icon><span>系统设置</span></el-menu-item>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header style="background:#fff;border-bottom:1px solid #f0f0f0;display:flex;align-items:center">
        <div style="width:100%;display:flex;justify-content:space-between;align-items:center">
          <span style="font-size:18px;font-weight:500">{{ pageTitle }}</span>
          <el-button text @click="handleLogout"><el-icon><SwitchButton /></el-icon> 退出登录</el-button>
        </div>
      </el-header>
      <el-main style="background:#f5f5f5"><router-view /></el-main>
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

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

const pageTitle = computed(() => {
  const titles: Record<string,string> = { '/':'仪表盘','/servers':'Gitea 服务器','/repos':'仓库列表','/logs':'同步日志','/settings':'系统设置' }
  return titles[route.path] || 'GitM'
})

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