<!-- src/components/Header.vue -->
<template>
  <a-layout-header class="header">
    <div class="header-content">
      <div class="logo">
        <h2>东方低碳</h2>
      </div>
      <div class="nav-menu">
        <a-menu v-model:selectedKeys="selectedKeys" mode="horizontal" @click="handleMenuClick">
          <a-menu-item v-for="item in menuItems" :key="item.key">
            {{ item.title }}
          </a-menu-item>
        </a-menu>
      </div>
      <!-- <div class="user-info">
        <a-dropdown>
          <a class="ant-dropdown-link" @click.prevent>
            <UserOutlined />
            用户中心
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <router-link to="/profile">个人中心</router-link>
              </a-menu-item>
              <a-menu-item @click="handleLogout">
                退出登录
              </a-menu-item>
            </a-menu>
          </template>
</a-dropdown>
</div> -->
    </div>
  </a-layout-header>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { UserOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const route = useRoute()
const userStore = useUserStore()

const selectedKeys = ref<string[]>([])
const menuItems = ref([
  { key: 'index', title: '首页', path: '/' },
  { key: 'news', title: '新闻消息', path: '/news' },
  { key: 'about', title: '关于我们', path: '/about' },
  { key: 'profile', title: '个人中心', path: '/profile' }
])

const handleMenuClick = ({ key }: { key: string }) => {
  const menuItem = menuItems.value.find(item => item.key === key)
  if (menuItem) {
    router.push(menuItem.path)
  }
}

const handleLogout = () => {
  userStore.logout()
  router.push('/login')
}

onMounted(() => {
  // 根据当前路由设置选中菜单项
  const currentMenu = menuItems.value.find(item => item.path === route.path)
  if (currentMenu) {
    selectedKeys.value = [currentMenu.key]
  }
})
</script>

<style scoped>
.header {
  background: #fff;
  padding: 0;
  box-shadow: 0 2px 8px #f0f1f2;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo h2 {
  margin: 0;
  color: #1890ff;
}

.nav-menu {
  flex: 1;
  margin: 0 24px;
}

.user-info {
  display: flex;
  align-items: center;
}
</style>