<!--
=============================================================================
企微IT智能服务台 — 管理后台主布局
=============================================================================
说明：管理后台主布局组件
  左侧：深色侧边栏（Sidebar 组件）
  右侧：顶部栏（面包屑 + 用户信息）+ 内容区（router-view）
-->
<template>
  <div class="admin-layout">
    <!-- 左侧侧边栏 -->
    <Sidebar />

    <!-- 右侧主内容区 -->
    <div class="main-content">
      <!-- 顶部栏 -->
      <div class="top-bar">
        <div class="top-bar-left">
          <Breadcrumb />
        </div>
        <div class="top-bar-right">
          <!-- 全局搜索 -->
          <SearchBox />

          <!-- 通知图标 -->
          <el-icon :size="18" style="color: var(--text-secondary); cursor: pointer">
            <Bell />
          </el-icon>

          <!-- 管理员头像 -->
          <el-dropdown trigger="click" @command="handleUserCommand">
            <div class="user-avatar" style="cursor: pointer">
              {{ adminStore.adminName.charAt(0) || '管' }}
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">
                  <el-icon><User /></el-icon>
                  {{ adminStore.adminName || '管理员' }}
                </el-dropdown-item>
                <el-dropdown-item command="logout" divided>
                  <el-icon><SwitchButton /></el-icon>
                  退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区 -->
      <div class="content-scroll">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 组件导入
// ==========================================================================
import Sidebar from '@/components/Sidebar.vue'
import Breadcrumb from '@/components/Breadcrumb.vue'
import SearchBox from '@/components/SearchBox.vue'
import { useAdminStore } from '@/stores/admin'
import { ElMessageBox } from 'element-plus'

// ==========================================================================
// Store
// ==========================================================================
const adminStore = useAdminStore()

// ==========================================================================
// 用户下拉菜单命令处理
// ==========================================================================
function handleUserCommand(command: string): void {
  if (command === 'logout') {
    ElMessageBox.confirm('确定要退出管理后台吗？', '退出确认', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      adminStore.logout()
    }).catch(() => {
      // 取消退出
    })
  }
}
</script>
