<template>
  <header class="user-info-bar" :class="themeClass">
    <!-- 通知按钮 -->
    <div class="action-buttons">
      <button 
        class="action-btn notification-btn"
        @click="$emit('notification-click')"
        aria-label="通知"
        :title="t('user.notifications')"
      >
        <BellIcon class="icon" />
        <span v-if="unreadCount > 0" class="notification-badge">
          {{ unreadCount > 9 ? '9+' : unreadCount }}
        </span>
      </button>
    </div>
    
    <!-- 用户信息 - 右侧布局 -->
    <div class="user-info">
      <!-- 头像与状态 -->
      <div class="avatar-container" @click.stop="toggleMenu">
        <img 
          :src="userInfo.avatar || defaultAvatar" 
          :alt="t('user.profile')" 
          class="avatar-img"
        >
        <span class="status-indicator" :title="t('user.online')"></span>
        
        <!-- 弹出菜单 -->
        <el-menu 
          v-if="menuVisible"
          class="user-dropdown-menu"
          mode="vertical"
          @select="handleMenuSelect"
        >
          <el-menu-item index="profile">
            <UserIcon class="icon mr-2" />{{ t('user.profile') }}
          </el-menu-item>
          <el-menu-item index="settings">
            <SettingIcon class="icon mr-2" />{{ t('user.settings') }}
          </el-menu-item>
          <el-menu-item index="logout" class="logout-item">
            <ArrowRightIcon class="icon mr-2" />{{ t('user.logout') }}
          </el-menu-item>
        </el-menu>
      </div>
      
      <!-- 基本信息 -->
      <div class="user-text">
        <div class="user-name-text">{{ userInfo.name || t('user.defaultName') }}</div>
        <div class="user-role-text">{{ userInfo.role || t('user.defaultRole') }}</div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { defineProps, defineEmits, ref, onMounted, onBeforeUnmount, inject, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
// Element Plus图标
import { Bell, User, ArrowRight, Setting } from '@element-plus/icons-vue';

// 图标组件定义
const BellIcon = Bell;
const UserIcon = User;
const ArrowRightIcon = ArrowRight;
const SettingIcon = Setting;

// 注入主题配置
const theme = inject('theme', { currentTheme: 'light' });

// 计算主题类名
const themeClass = computed(() => `theme-${theme.currentTheme}`);

// 路由实例
const router = useRouter();

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

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

// 状态管理
const menuVisible = ref(false);
const defaultAvatar = ref('https://picsum.photos/id/64/200/200');
const { t } = useI18n();

// 切换菜单显示状态
const toggleMenu = () => {
  menuVisible.value = !menuVisible.value;
};

// 处理菜单选项
const handleMenuSelect = (index) => {
  if (index === 'profile') {
    router.push('/profile');
    emit('settings-click');
  } else if (index === 'settings') {
    router.push('/settings');
    emit('settings-click');
  } else if (index === 'logout') {
    emit('logout');
  }
  menuVisible.value = false;
};

// 点击外部关闭菜单
const handleClickOutside = (event) => {
  const avatarContainer = document.querySelector('.avatar-container');
  if (avatarContainer && !avatarContainer.contains(event.target)) {
    menuVisible.value = false;
  }
};

// 生命周期钩子
onMounted(() => {
  document.addEventListener('click', handleClickOutside);
});

onBeforeUnmount(() => {
  document.removeEventListener('click', handleClickOutside);
});
</script>

<style scoped>
/* 组件样式完全依赖全局主题变量 */
.icon {
  width: 1em;
  height: 1em;
  transition: color 0.3s ease;
}

.user-info-bar {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px var(--color-shadow);
  z-index: 10;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.avatar-container {
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.avatar-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-cover: cover;
  border: 2px solid var(--color-surface);
  box-shadow: 0 1px 2px var(--color-shadow);
  transition: transform 0.2s ease, border-color 0.3s ease;
}

.avatar-container:hover .avatar-img {
  transform: scale(1.05);
  border-color: var(--color-primary);
}

.status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background-color: var(--color-primary);
  border-radius: 50%;
  border: 2px solid var(--color-surface);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.user-text {
  display: none;
}

@media (min-width: 640px) {
  .user-text {
    display: block;
    white-space: nowrap;
  }
}

.user-name-text {
  font-weight: 500;
  font-size: 14px;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.user-role-text {
  font-size: 12px;
  color: var(--color-text);
  opacity: 0.8;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease, opacity 0.3s ease;
}

.action-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  opacity: 0.8;
  font-size: 16px;
  transition: all 0.2s ease;
  position: relative;
}

.action-btn:hover {
  background-color: var(--color-surface-alt);
  color: var(--color-primary);
  opacity: 1;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background-color: var(--color-error, #ef4444);
  color: white;
  font-size: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s infinite;
}

.user-dropdown-menu {
  position: absolute;
  right: -90px;
  top: calc(100% + 8px);
  min-width: 160px;
  z-index: 1000;
  border-radius: 6px;
  box-shadow: 0 2px 10px var(--color-shadow);
  animation: fadeIn 0.2s ease;
  transition: all 0.3s ease;
}

/* 下拉菜单主题适配 */
:deep(.el-menu) {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  transition: all 0.3s ease;
}

:deep(.el-menu-item) {
  color: var(--color-text) !important;
  transition: all 0.2s ease;
}

:deep(.el-menu-item:hover) {
  background-color: var(--color-surface-alt) !important;
  color: var(--color-primary) !important;
}

:deep(.logout-item) {
  color: var(--color-error, #ef4444) !important;
}

:deep(.logout-item:hover) {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

/* 动画效果 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
    