<template>
  <header class="user-info-bar bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 h-16 flex items-center justify-between px-6 shadow-sm">
    <!-- 用户信息 -->
    <div class="flex items-center space-x-4">
      <div class="relative">
        <img 
          :src="userInfo.avatar || defaultAvatar" 
          alt="用户头像" 
          class="w-10 h-10 rounded-full object-cover border-2 border-white dark:border-gray-700 shadow-sm"
        >
        <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-800"></span>
      </div>
      
      <div class="hidden md:block">
        <div class="font-medium">{{ userInfo.name || '用户' }}</div>
        <div class="text-sm text-gray-500 dark:text-gray-400">{{ userInfo.role || '普通用户' }}</div>
      </div>
    </div>
    
    <!-- 操作按钮 -->
    <div class="flex items-center space-x-3">
      <button 
        class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors relative"
        @click="$emit('notification-click')"
        aria-label="通知"
      >
        <i class="fa fa-bell-o text-lg"></i>
        <span v-if="unreadCount > 0" class="absolute top-1 right-1 w-4 h-4 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
          {{ unreadCount > 9 ? '9+' : unreadCount }}
        </span>
      </button>
      
      <button 
        class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
        @click="$emit('settings-click')"
        aria-label="设置"
      >
        <i class="fa fa-cog text-lg"></i>
      </button>
      
      <button 
        class="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
        @click="$emit('logout')"
        aria-label="退出登录"
      >
        <i class="fa fa-sign-out text-lg"></i>
      </button>
    </div>
  </header>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';

// 定义属性
const props = defineProps({
  userInfo: {
    type: Object,
    default: () => ({})
  },
  unreadCount: {
    type: Number,
    default: 0
  }
});

// 定义事件
const emit = defineEmits(['logout', 'notification-click', 'settings-click']);

// 默认头像
const defaultAvatar = ref('https://picsum.photos/id/64/200/200');
</script>

<style scoped>
.user-info-bar {
  @apply z-10;
}
img {width: 40px; height: 40px;}

</style>
    