<template>
  <header class="h-14 flex items-center justify-between px-6 flex-shrink-0"
    style="background-color: #fff; border-bottom: 1px solid #e8e8e8">
    <!-- Title -->
    <div class="flex items-center gap-2">
      <h1 class="text-base font-semibold" style="color: #1a1a1a">地空业务支撑平台——生产管理子系统</h1>
    </div>

    <!-- Right side -->
    <div class="flex items-center gap-4">
      <router-link to="/reports" class="text-gray-500 hover:text-gray-900 transition-colors" title="数据统计">
        <BarChart3 :size="18" />
      </router-link>
      <router-link to="/cost-reports" class="text-gray-500 hover:text-gray-900 transition-colors" title="运营报告">
        <FileText :size="18" />
      </router-link>
      <div class="w-px h-5 bg-gray-200" />
      <div ref="menuRef" class="relative">
        <button @click="open = !open" class="flex items-center gap-2 cursor-pointer">
          <span class="text-sm" style="color: #1a1a1a">Super Admin</span>
          <span class="px-2 py-0.5 rounded text-xs text-white" style="background-color: #4a7c59">管理员</span>
        </button>
        <div v-if="open" class="absolute right-0 top-10 w-36 rounded shadow-lg py-1 z-50"
          style="background-color: #fff; border: 1px solid #e8e8e8">
          <router-link v-for="item in systemMenuItems" :key="item.path" :to="item.path" @click="open = false"
            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors">
            {{ item.label }}
          </router-link>
          <div style="border-top: 1px solid #F0F0F0"></div>
          <button class="block w-full text-left px-4 py-2 text-sm" style="color: #FF4D4F">退出</button>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { BarChart3, FileText } from 'lucide-vue-next'
const open = ref(false)
const menuRef = ref<HTMLDivElement>()
const systemMenuItems = [
  { path: '/users', label: '用户管理' },
  { path: '/roles', label: '角色权限' },
  { path: '/logs', label: '操作日志' },
  { path: '/settings', label: '系统设置' },
]
const handleClick = (e: MouseEvent) => {
  if (menuRef.value && !menuRef.value.contains(e.target as Node)) open.value = false
}
onMounted(() => document.addEventListener('mousedown', handleClick))
onUnmounted(() => document.removeEventListener('mousedown', handleClick))
</script>
