<!--
 * @Description: 顶部导航栏
 * @Author: ZCY
 * @Date: 2022年12月7日09:47:18
-->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { computed, inject } from 'vue';
import { Icon } from '@iconify/vue';
import { colorDarken, colorLighten, isDarkColor } from '@unyu/utils';
import TheMenu from '../../menu/index.vue';
import TheLogo from '../TheLogo.vue';
import type { AntMenu, LayoutConfig, ThemeColor } from '../types';
import { collapsedKey, configKey, menusKey, phoneFlagKey, themeColorKey } from '../../../utils/injectedKeys';
import BreadCrumb from './BreadCrumb.vue';
import UserTool from './UserTool.vue';
import FirstMenu from './FirstMenu.vue';

const { config } = inject<{ config: Ref<LayoutConfig> }>(configKey)!;
const { collapsed, setCollapsed } = inject<{ collapsed: Ref<boolean>; setCollapsed: (flag: boolean) => void }>(
  collapsedKey
)!;
const menus = inject<Ref<AntMenu[]>>(menusKey)!;
const { themeColor } = inject<{ themeColor: Ref<ThemeColor> }>(themeColorKey)!;
const { phoneFlag } = inject<{ phoneFlag: Ref<boolean> }>(phoneFlagKey)!;

const navStl = computed(() => {
  const navStyle = config.value.navStyle;
  const layout = config.value.layout;
  const nav = themeColor.value.nav;
  if (layout !== 'default' && navStyle === 'dark') {
    return { backgroundColor: nav, color: '#c1c6c8' };
  }
  return { backgroundColor: '#fff', color: '#191919' };
});

const navBottomLineColor = computed(() => {
  const navBg = navStl.value.backgroundColor;
  if (isDarkColor(navBg)) {
    return colorLighten(navBg, 0.1);
  }
  return colorDarken(navBg, 0.1);
});

const seqLineColor = computed(() => {
  if (config.value.layout === 'default') {
    return colorDarken(config.value.themeColor?.topBarBg || '#fff', 0.2).slice(0, 7);
  }
  return colorLighten(config.value.themeColor?.topBarBg || '#555', 0.2).slice(0, 7);
});

const filterHiddenMenu = (menuList: AntMenu[]) => {
  return menuList
    .map(menu => {
      if (menu.meta?.isHidden) return undefined;
      if (menu.children?.length) menu.children = filterHiddenMenu(menu.children);
      return menu;
    })
    .filter(i => i) as AntMenu[];
};
const menuList = computed(() => filterHiddenMenu(menus.value));
</script>

<template>
  <div class="navBar" :style="navStl">
    <TheLogo v-if="config.layout !== 'default'" style="margin-right: 8px">
      <template #logo>
        <slot name="logo" />
      </template>
    </TheLogo>
    <slot name="multiEnter" />
    <div v-if="config.layout !== 'default'" class="navBar-vertical-line" :style="{ backgroundColor: seqLineColor }" />
    <div class="navBar-left">
      <Icon
        v-if="phoneFlag"
        :icon="collapsed ? 'ant-design:menu-unfold-outlined' : 'ant-design:menu-fold-outlined'"
        class="collapsed-icon"
        @click="setCollapsed(!collapsed)"
      />
      <FirstMenu v-if="config.layout === 'classic'">
        <template v-if="$slots.headerMenuItemRender" #headerMenuItemRender="data">
          <slot name="headerMenuItemRender" v-bind="data" />
        </template>
      </FirstMenu>
      <BreadCrumb v-if="config.isBreadcrumb && config.layout === 'default' && !phoneFlag" />
      <div v-if="!config.isBreadcrumb && config.layout === 'default' && !phoneFlag" />
      <div v-if="config.layout === 'topBar'" style="flex: 1; max-width: 100%">
        <TheMenu mode="horizontal" :items="menuList" />
      </div>
    </div>
    <div class="navBar-right">
      <UserTool v-if="config.isToolbar">
        <template #user>
          <slot name="user" />
        </template>
        <template #leftTool>
          <slot name="leftTool" />
        </template>
        <template #rightTool>
          <slot name="rightTool" />
        </template>
      </UserTool>
    </div>
  </div>
</template>

<style scoped>
.navBar {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  transition: background-color 0.2s, color 0.2s;
  line-height: 1.25rem;
  font-size: 14px;
  box-shadow: inset 0 -1px 0 0 v-bind("navBottomLineColor");
}
.navBar-left {
  position: relative;
  min-height: 46px;
  display: flex;
  justify-content: start;
  align-items: center;
  overflow: hidden;
  flex: 1;
}
.navBar-left .theLogo {
  position: relative;
  padding: 0 1.25rem;
  color: #cccccc;
}
.navBar-right {
  position: relative;
  height: 100%;
}
.navBar .collapsed-icon {
  cursor: pointer;
  margin: 0 5px;
}
.navBar .collapsed-icon:hover {
  color: v-bind("themeColor.primary");
}
</style>

<style lang="scss">
.navBar-vertical-line {
  position: relative;
  margin: 0 10px;
  width: 1px;
  height: 15px;
}
</style>
