<template>
  <header class="admin-topbar admin-topbar-v2">
    <button class="admin-icon-btn admin-topbar__menu" type="button" @click="$emit('toggle-sidebar')">
      <i class="fas fa-bars"></i>
    </button>
    <div class="admin-topbar__title">
      <div class="admin-breadcrumb">后台管理 / {{ title }}</div>
      <h1>{{ title }}</h1>
    </div>
    <label class="admin-global-search">
      <i class="fas fa-search"></i>
      <input placeholder="搜索线索、订单、菜单" />
    </label>
    <div class="admin-topbar__actions">
      <button class="admin-chip admin-chip-v2" type="button" @click="$emit('toggle-layout')">
        <i class="fas fa-table-columns"></i>
        <span>{{ layoutMode === 'double' ? '双列菜单' : '单列菜单' }}</span>
      </button>
      <button class="admin-icon-btn" type="button" :title="`已加载 ${menuCount} 个菜单节点`">
        <i class="fas fa-bell"></i>
      </button>
      <button class="admin-user-pill" type="button" @click="logout">
        <span>AD</span>
        <strong>退出</strong>
      </button>
    </div>
  </header>
</template>

<script setup>
defineProps({
  title: { type: String, default: '后台管理' },
  layoutMode: { type: String, default: 'double' },
  menuCount: { type: Number, default: 0 }
})
defineEmits(['toggle-layout', 'toggle-sidebar'])

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('user')
  window.location.href = '/admin/login'
}
</script>
