<!--
 * @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>
  <div class="classic-layout-main" :style="{ top, height }">
    <SideBar v-show="config.isSidebar">
      <template #logo>
        <slot name="logo" />
      </template>
    </SideBar>
    <div class="classic-layout-main-main">
      <TagView v-if="config.isTagView" />
      <TheMain :style="{ height: mainHeight }">
        <slot />
        <TheFooter>
          <template #footer>
            <slot name="footer" />
          </template>
        </TheFooter>
      </TheMain>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { computed, inject } from 'vue';
import TheHeader from '../../components/TheHeader.vue';
import SideBar from '../../components/SideBar.vue';
import TagView from '../../components/tagview/index.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;
  return `${navBarHeight}px`;
});

const height = computed(() => {
  return `calc(100% - ${top.value})`;
});
const mainHeight = computed(() => {
  const marginTop = config.value.isTagView ? 38 : 0;
  return `calc(100% - ${marginTop}px)`;
});
</script>

<style scoped>
.classic-layout-main {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #F1F2F3;
}
.classic-layout-main-main {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 4px;
}
.classic-layout-main-main .tagView {
  z-index: 200;
  position: sticky;
  top: 0;
  left: 0;
  background-color: #F1F2F3;
  border-bottom: 1px #f7f8f9 solid;
}
.classic-layout-main-main .theMain {
  position: relative !important;
  border-radius: 4px;
  background-color: white;
}
</style>
