<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const isCollapsed = ref(false)

function goToCandidates() {
  router.push('/admin')
}
</script>

<template>
  <el-container class="admin-layout h-screen">
    <!-- 侧边栏 -->
    <el-aside :width="isCollapsed ? '64px' : '200px'" class="bg-gray-800 transition-all">
      <div class="h-14 flex items-center justify-center text-white font-bold text-lg border-b border-gray-700">
        <span v-if="!isCollapsed">AI面试后台</span>
        <span v-else>AI</span>
      </div>
      <el-menu
        :collapse="isCollapsed"
        :default-active="$route.path"
        background-color="#1f2937"
        text-color="#9ca3af"
        active-text-color="#3b82f6"
        class="border-none"
      >
        <el-menu-item index="/admin" @click="goToCandidates">
          <el-icon><User /></el-icon>
          <template #title>候选人管理</template>
        </el-menu-item>
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 头部 -->
      <el-header class="bg-white border-b border-gray-200 flex items-center justify-between px-4">
        <el-button :icon="isCollapsed ? 'Expand' : 'Fold'" text @click="isCollapsed = !isCollapsed" />
        <div class="flex items-center gap-4">
          <span class="text-gray-600">管理员</span>
        </div>
      </el-header>

      <!-- 内容区 -->
      <el-main class="bg-gray-50 p-6">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.admin-layout :deep(.el-menu) {
  border-right: none;
}

.admin-layout :deep(.el-menu--collapse) {
  width: 64px;
}
</style>
