<template>
  <el-container class="layout-container">
    <Aside />
    <el-container class="layout-backtop layout-container-column">
      <Header v-if="isFixedHeader" />
      <el-scrollbar ref="layoutDefaultsScrollbarRef">
        <Header v-if="!isFixedHeader" />
        <Main />
      </el-scrollbar>
      <Footer v-if="isFooter" />
    </el-container>
    <el-backtop target=".layout-backtop .el-scrollbar__wrap"></el-backtop>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, computed } from "vue";
import Aside from "../components/aside.vue";
import Header from "../components/header.vue";
import Main from "../components/main.vue";
import Footer from "../components/footer.vue";
import { useStore } from "@/hooks/useStore";

export default defineComponent({
  name: "default",
  setup() {
    const store = useStore();
    // 是否固定头部
    const isFixedHeader = computed(() => {
      return store.state.themeConfig.isFixedHeader;
    });

    const isFooter = computed(() => {
      return store.state.themeConfig.isFooter;
    });

    return {
      isFixedHeader,
      isFooter,
    };
  },

  components: {
    Aside,
    Header,
    Main,
    Footer,
  },
});
</script>

<style lang="scss">
.layout-container {
  &-column {
    flex-direction: column;
  }
}
</style>
