<!--
 * @Description: 默认左右分栏布局
 * @Author: ZCY
 * @Date: 2023年2月15日13:25:11
-->
<template>
  <SideBar v-show="config.isSidebar">
    <template #logo>
      <slot name="logo" />
    </template>
  </SideBar>
  <div class="app-main">
    <TheHeader>
      <template #user>
        <slot name="user" />
      </template>
      <template #leftTool>
        <slot name="leftTool" />
      </template>
      <template #rightTool>
        <slot name="rightTool" />
      </template>
    </TheHeader>
    <TheMain :style="{ top, height }">
      <slot />
      <TheFooter>
        <template #footer>
          <slot name="footer" />
        </template>
      </TheFooter>
    </TheMain>
  </div>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { computed, inject } from 'vue';
import SideBar from '../SideBar.vue';
import TheHeader from '../TheHeader.vue';
import TheMain from '../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 scoped>
.app-main {
  position: relative;
  height: 100vh;
  min-height: 100%;
  width: 100%;
  background-color: #f0f2f5;
  overflow: hidden;
  padding: 0 6px 6px 6px;
}
</style>
