<!--
 * @Description: header component
 * @Author: ZCY
 * @Date: 2022年12月1日09:42:06
-->
<template>
  <header class="app-main-header">
    <NavBar v-if="config.isNavbar">
      <template #logo>
        <slot name="logo" />
      </template>
      <template #multiEnter>
        <slot name="multiEnter" />
      </template>
      <template #user>
        <slot name="user" />
      </template>
      <template #leftTool>
        <slot name="leftTool" />
      </template>
      <template #rightTool>
        <slot name="rightTool" />
      </template>
    </NavBar>
    <TagView v-if="config.isTagView && config.layout !== 'classic'" />
  </header>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { inject } from 'vue';
import type { LayoutConfig } from '../types';
import { configKey } from '../utils/injectedKeys';
import NavBar from './navbar/index.vue';
import TagView from './tagview/index.vue';

const { config } = inject<{ config: Ref<LayoutConfig> }>(configKey)!;
</script>

<style scoped>
.app-main-header {
  z-index: 500;
  transition: all 0.2s ease 0s;
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
