<!--
 * @Description:  顶栏布局
 * @Author: ZCY
 * @Date: 2023年2月15日13:25:11
-->
<template>
  <TheHeader>
    <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>
  </TheHeader>
  <TheMain class="!relative" :style="{ top, height }">
    <slot />
    <TheFooter>
      <template #footer>
        <slot name="footer" />
      </template>
    </TheFooter>
  </TheMain>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { computed, inject } from 'vue';
import TheHeader from '../../components/TheHeader.vue';
import TheMain from '../../components/TheMain.vue';
import type { LayoutConfig } from '../../types';
import { configKey } from '../../utils/injectedKeys';
import TheFooter from '../TheFooter.vue';

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

const top = computed(() => {
  const navBarHeight = config.value.isNavbar ? 46 : 0;
  const tagViewHeight = config.value.isTagView ? 38 : 0;
  return `${tagViewHeight + navBarHeight}px`;
});

const height = computed(() => {
  return `calc(100% - ${top.value})`;
});
</script>

<style lang="scss" scoped></style>
