<script setup lang="ts">
import WarningState from '../WarningState/WarningState.vue';
import UidState from '../UidState/UidState.vue';
import PowerState from '../PowerState/PowerState.vue';
import UserInfo from '../UserInfo/UserInfo.vue';
import LangSwitch from '../LangSwitch/LangSwitch.vue';
import DropMenu from '../DropMenu/DropMenu.vue';
import type { IMainMenu, INavData, ISecondMenu } from '@/model/base-interface';
import { computed, PropType } from 'vue';
import { useRouter } from 'vue-router';
import useStore from '@/stores';
import { ref } from 'vue';
import { NavTheme } from '@/model/base-enum';
import { openOnlineHelp } from '@/utils/utils';
import { getLogoImage } from '@/utils/common-service';

let navTheme = computed(() => {
  return useStore()?.state.loct.navStyle || '';
});

const $router = useRouter();
defineProps({
  options: {
    type: Array as PropType<IMainMenu[]>,
    required: true,
    default: () => []
  },
  theme: {
    type: String,
    default: ''
  },
  data: {
    type: Object as PropType<INavData>,
    required: true,
    default: () => {}
  }
});

const emits = defineEmits(['reload']);

// logo 加载优先级：定制 header_logo → 原有 getLogoImage 结果 → 兜底 /image/ibmc.png
const logoFallbacks = ['/extern/custom/header_logo.png', getLogoImage('home'), '/image/ibmc.png'];
let logoFallbackIndex = 0;
const logoImg = ref(logoFallbacks[logoFallbackIndex]);

let currentRoute = ref($router.currentRoute.value.fullPath);
$router.beforeEach((to, _from, next) => {
  currentRoute.value = to.fullPath;
  next();
});

const productLabel = useStore().state.loct.sn;
const smsName = useStore().state.loct.smsName;

// 下拉菜单
let currentMainMenu: any;
function showDrop(menu: IMainMenu) {
  const len = menu.children.length;
  currentMainMenu = menu;
  menu.dropState = len > 0;
}
function hideDrop(menu: IMainMenu) {
  menu.dropState = false;
}

// 路由跳转
function navigate(ev: ISecondMenu | IMainMenu) {
  $router.push(ev.router);
  hideDrop(currentMainMenu);
}

function reload() {
  emits('reload');
}

function getDefaultLogo(): void {
  logoFallbackIndex++;
  if (logoFallbackIndex < logoFallbacks.length) {
    logoImg.value = logoFallbacks[logoFallbackIndex];
  }
}

// 打开帮助文档
function openHelpDocument() {
  const route = $router.currentRoute.value.fullPath.split('/').pop() || '';
  openOnlineHelp(route);
}
</script>
<template>
  <div :id="`${theme}-color`" class="header navbar">
    <!-- 左侧IBMC图标 -->
    <div v-if="navTheme !== NavTheme.Left" class="nav-logo">
      <img :src="logoImg" alt="" @error="getDefaultLogo" />
    </div>

    <!-- 主菜单 -->
    <div class="main-menu">
      <ul v-if="navTheme !== NavTheme.Left" id="info-navmenu" class="nav-ul-menu">
        <li
          v-for="menu in options"
          ref="mainMenu"
          :key="menu.id"
          :class="{ active: currentRoute.indexOf(menu.router) === 0 }"
          class="tab"
          @mouseenter="showDrop(menu)"
          @mouseleave="hideDrop(menu)"
        >
          <router-link :id="menu.id" :to="menu.router" @click="navigate(menu)">
            {{ $t(menu.label, { softwareName: productLabel }) }}
          </router-link>
          <a
            class="backDiv"
            :class="{ active: currentRoute.indexOf(menu.router) === 0 }"
            @click="navigate(menu)"
          ></a>
          <DropMenu
            :software-name="productLabel"
            :sms-name="smsName"
            :options="menu.children"
            :offset-x="4"
            :show="menu.dropState"
            @select="navigate($event)"
          />
        </li>
      </ul>
    </div>

    <!-- 右侧功能区 -->
    <div id="info-right">
      <ul class="ul-base-info">
        <li class="base-item">
          <WarningState
            :critical="data.health.critical"
            :major="data.health.major"
            :minor="data.health.minor"
            :theme="theme"
          />
        </li>
        <li class="base-item">
          <span class="flag"></span>
        </li>
        <li class="base-item">
          <PowerState :state="data.powerState" :theme="theme" @reload="reload" />
        </li>
        <li class="base-item">
          <UidState :state="data.uidState" :theme="theme" @reload="reload" />
        </li>
        <li class="base-item">
          <span class="flag"></span>
        </li>
        <li class="base-item">
          <LangSwitch :theme="theme" />
        </li>
        <li class="base-item user-info-item">
          <UserInfo :theme="theme" />
        </li>
        <li class="base-item help-item">
          <el-tooltip :content="$t('REMOTE_HELP_DOCUMENT')" trigger-keys>
            <span id="navHelp" class="icon-help" @click="openHelpDocument"></span>
          </el-tooltip>
        </li>
      </ul>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.navbar {
  position: absolute;
  display: flex;
  top: 0;
  padding: 0 24px;
  width: 100%;
  min-width: 1280px;
  height: $APP-HEIGHT-NAVBAR;
  background: $APP_BG_NAVBAR;
  box-shadow: inset 0 -2px 0 0 var(--o-bg-color-light);
  z-index: 1000;
  justify-content: space-between;
}
.ul-base-info {
  display: flex;
  justify-content: right;
  li.base-item {
    position: relative;
    float: left;
    display: flex;
    align-items: center;
    height: $APP-HEIGHT-NAVBAR;
    cursor: pointer;
    margin-left: 16px;
    span.flag {
      width: 1px;
      height: 16px;
      background-color: var(--o-border-color-light);
    }
    &:first-child {
      margin-left: 0;
    }
  }

  li.user-info-item {
    margin-left: 0;
  }
  li.help-item {
    margin-left: 6px;
  }
}
.nav-logo {
  display: flex;
  align-items: center;
  height: 48px;
  width: 89px;
  img {
    display: block;
    max-width: 100%;
    max-height: 16px;
  }
}

.main-menu {
  width: calc(100% - 89px - 432px);
  position: relative;
  display: flex;
}

.nav-ul-menu {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;

  li {
    white-space: nowrap;
    position: relative;
    display: inline-block;
    list-style: none;
    padding: 0 20px;
    height: $APP-HEIGHT-NAVBAR;
    line-height: $APP-HEIGHT-NAVBAR;
    box-sizing: border-box;
    color: $FONT-COLOR-NAVBAR;
    a {
      color: $FONT-COLOR-NAVBAR;
      font-size: 16px;
      text-decoration: none;
    }
    &.active a {
      color: $APP-COLOR-ACTIVE;
      font-weight: 600;
    }
    &:hover a {
      color: $APP-COLOR-HOVER;
    }
  }
}
.icon-help {
  font-size: 24px;
}
.icon-help:hover::before {
  color: $APP-COLOR-HOVER;
}

#standard-color {
  .tab {
    height: 100%;
    &.active {
      border-bottom: 2px solid white;
    }
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
  }
  .backDiv {
    cursor: pointer;
    position: absolute;
    height: calc(100% - 3px);
    width: 100%;
    top: 0px;
    left: 0px;
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
    &.active {
      border-bottom: 2px solid white;
    }
  }
  background: #1d7ddf;
  #navHome {
    color: var(--o-bg-color-base);
  }
  #navSystemManager {
    color: var(--o-bg-color-base);
  }
  #navMaintance {
    color: var(--o-bg-color-base);
  }
  #navUsersManager {
    color: var(--o-bg-color-base);
  }
  #navServiceManager {
    color: var(--o-bg-color-base);
  }
  #navIbmcManager {
    color: var(--o-bg-color-base);
  }
  .icon-help {
    &:before {
      color: #fffffe !important;
    }
    &:hover::before {
      color: $APP-COLOR-HOVER !important;
    }
  }
}
#ibma-color {
  background: #163a94;
  .tab {
    height: 100%;
    &.active {
      border-bottom: 2px solid white;
    }
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
  }
  .backDiv {
    cursor: pointer;
    position: absolute;
    height: calc(100% - 3px);
    width: 100%;
    top: 0px;
    left: 0px;
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
    &.active {
      border-bottom: 2px solid white;
    }
  }
  #navHome {
    color: var(--o-bg-color-base);
  }
  #navSystemManager {
    color: var(--o-bg-color-base);
  }
  #navMaintance {
    color: var(--o-bg-color-base);
  }
  #navUsersManager {
    color: var(--o-bg-color-base);
  }
  #navServiceManager {
    color: var(--o-bg-color-base);
  }
  #navIbmcManager {
    color: var(--o-bg-color-base);
  }
  .icon-help {
    &:before {
      color: #fffffe !important;
    }
    &:hover::before {
      color: $APP-COLOR-HOVER !important;
    }
  }
}
#simple-color {
  background: #22263a;
  box-shadow: none;
  #navHome {
    color: var(--o-bg-color-base);
  }
  #navSystemManager {
    color: var(--o-bg-color-base);
  }
  #navMaintance {
    color: var(--o-bg-color-base);
  }
  #navUsersManager {
    color: var(--o-bg-color-base);
  }
  #navServiceManager {
    color: var(--o-bg-color-base);
  }
  #navIbmcManager {
    color: var(--o-bg-color-base);
  }
  .backDiv {
    cursor: pointer;
    position: absolute;
    height: calc(100% - 3px);
    width: 100%;
    top: 0px;
    left: 0px;
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
    &.active {
      border-bottom: 2px solid white;
    }
  }
}

#beautiful-color {
  background: #485cc7;

  .icon-UID {
    color: #fffffe !important;
    &:before {
      color: #fffffe !important;
    }
  }
  .backDiv {
    cursor: pointer;
    position: absolute;
    height: calc(100% - 3px);
    width: 100%;
    top: 0px;
    left: 0px;
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
    &.active {
      border-bottom: 2px solid white;
    }
  }
  .tab {
    height: 100%;
    &.active {
      border-bottom: 2px solid white;
    }
    &:hover {
      color: $APP-COLOR-HOVER;
      padding-bottom: 9px;
      border-bottom: 2px solid white;
    }
  }
  #navHome {
    color: var(--o-bg-color-base);
  }
  #navSystemManager {
    color: var(--o-bg-color-base);
  }
  #navMaintance {
    color: var(--o-bg-color-base);
  }
  #navUsersManager {
    color: var(--o-bg-color-base);
  }
  #navServiceManager {
    color: var(--o-bg-color-base);
  }
  #navIbmcManager {
    color: var(--o-bg-color-base);
  }
  .icon-help {
    &:before {
      color: #fffffe !important;
    }
    &:hover::before {
      color: $APP-COLOR-HOVER !important;
    }
  }
}
@import '@/assets/common/style/theme/standard.scss';
</style>