<script setup lang="ts">
import { storeToRefs } from 'pinia';
import Menu from './Menu/index.vue';
import { type UserInfo } from 'cube-front/core/stores/user';
import { useMenuStore } from 'cube-front/core/stores/menu';
import { getConfig } from 'cube-front/core/configure';

interface NavbarProps {
  currentUser?: Partial<UserInfo>;
  logout: () => void;
  collapsed: boolean;
}

defineProps<NavbarProps>();

const menuStore = useMenuStore();
const baseConfig = getConfig().base;

// 使用storeToRefs保持解构属性的响应性
const { treeMenus: mainMenus } = storeToRefs(menuStore);

const title = baseConfig.title;
</script>

<template>
  <div class="navbar">
    <div class="left">
      <div class="logo">
        <!-- <Login /> -->
        <div class="logoName">{{ title }}</div>
      </div>
    </div>

    <div class="right">
      <!-- 顶部导航信息 -->
      <div class="menu-wrapper">
        <Menu :tabPanes="mainMenus" />
      </div>

      <!-- 顶部导航操作栏 -->
      <div class="actions-wrapper">
        <!-- 头像 -->
        <div class="user-info">
          <span class="userName">{{ currentUser?.realName }}</span>
        </div>
        <div class="actionItem" @click="logout">退出</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$left-width: 200px;

.navbar {
  display: flex;
  box-sizing: border-box;
  background-color: #e9f6fe;
  height: 56px; /* 固定导航栏高度为56px */
  position: relative;

  .left {
    display: flex;
    align-items: center;
    width: 200px;
    height: 56px; /* 确保左侧内容也是56px高 */

    .logo {
      display: flex;
      align-items: center;
      width: $left-width;
      padding-left: 20px;
      box-sizing: border-box;
    }

    .logoName {
      font-weight: 500;
      font-size: 20px;
      margin-left: 10px;
      font-family:
        Alimama ShuHeiTi,
        Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 20px;
      color: #1d2129;
      line-height: 28px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .right {
    display: flex;
    justify-content: space-between;
    list-style: none;
    padding-right: 20px;
    width: calc(100% - #{$left-width});
    height: 56px; /* 确保右侧区域高度也是56px */

    .menu-wrapper {
      flex: 1;
      overflow: hidden; /* 确保菜单不会超出其容器 */
      margin-right: 20px; /* 与操作区域保持间距 */
    }

    .actions-wrapper {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      white-space: nowrap; /* 防止文本换行 */
      min-width: 150px; /* 确保操作区域有最小宽度 */
      padding-left: 15px; /* 与菜单保持一定距离 */
      z-index: 15; /* 确保显示在菜单之上 */
      background-color: #e9f6fe; /* 与导航栏背景色一致 */

      .user-info {
        display: flex;
        align-items: center;
      }

      .userName {
        margin-left: 5px;
        font-weight: 500;
      }

      .actionItem {
        cursor: pointer;
        margin-left: 15px;
        color: #1890ff;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>