<template>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#ffffff"
      text-color="#000000"
      active-text-color="#FEB2D7"
    >
    <div class="logo">
      <img src="../assets/pictures/Logo.png" alt="Logo" />
    </div>
      <el-menu-item index="1">智能推荐</el-menu-item>
      <el-sub-menu index="2">
        <template #title>{{communityName}}</template>
        <el-menu-item index="2-1">私信聊天</el-menu-item>
        <el-menu-item index="2-2">社区动态</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="3" disabled>情感助手</el-menu-item>
      <el-menu-item index="4">个人空间</el-menu-item>
      <div class="tu">
        <img src="@/assets/pictures/tu.png" alt="tu" />
      </div>
    </el-menu>
    <div class="h-6" />
    
  </template>

  <script setup>
  import { useRouter } from 'vue-router'
  import { ref,onMounted } from 'vue'
  const router = useRouter()
  const activeIndex = ref('1') // 设置默认选中的索引为 '1'
  const communityName = ref('社区互动')
  const handleSelect = (indexPath) => {
    if (indexPath === '1') {
      router.push('/main/recommend') // 当选择“智能推荐”时,导航到子路由
    } 
    else if(indexPath === '2-1') {
      router.push('/main/chat')
      communityName.value = '私信聊天'
    }
    else if(indexPath === '2-2') {
      router.push('/main/community')
      communityName.value = '社区动态'
    }
    else if(indexPath === '4') {
      router.push('/main/space')
    }
  }
  onMounted(() => {
    if (window.location.pathname === '/') {
      router.push('/main/recommend')
    }
  })
</script>
<script>
  export default {
   name: 'HeaderComponent',
 }
 
 </script>

<style>
.el-menu-demo {
  justify-content: space-between; /* 平铺菜单项 */
  font-weight: bold; /* 加粗字体 */
  
}
/* 取消悬停和选中时的背景色 */
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-menu-item.is-active {
  background-color: transparent !important;
}
.logo img,
.tu img {
  height: 50px; /* 根据需要调整高度 */
  width: auto;  /* 自适应宽度 */
  margin-right: 10px; /* 与菜单项的间距 */
}
.el-menu-item {
    line-height: 70px; /* 设置菜单项的行高,和菜单高度一致 */
    font-weight: bold; /* 加粗字体 */
  }
</style>