<template>
  <section
    class="app-main"
    :class="{
      'has-tags-view': hasTagsView,
      'has-header': hasHeader,
      [layout]: true
    }">
    <el-scrollbar @scroll="onScroll" class="all-back">
      <section class="app-main-container">
        <router-view v-slot="{ Component, route }">
          <transition name="fade-transform" mode="out-in">
            <keep-alive :include="tagsViewStore.cachedViews">
              <component
                v-if="!route.meta.link"
                :is="Component"
                :key="route.path"/>
            </keep-alive>
          </transition>
        </router-view>
      </section>
    </el-scrollbar>
  </section>
</template>

<script setup lang="ts" name="AppMain">
import { computed } from 'vue'
import useTagsViewStore from '@/store/modules/tagsView'
import useAppStore from '@/store/modules/app'
import settingsStore from '@/store/modules/settings'

const props = defineProps({
  needTagsView: Boolean
})
defineOptions({
  inheritAttrs: false
  // ... 更多自定义属性
})
const appStore = useAppStore()
const tagsViewStore = useTagsViewStore()
const settings = settingsStore()

const hasHeader = computed(() => ['comprehensive'].includes(layout.value))
const hasTagsView = computed(() => settings.tagsView)
const layout = computed(() => settings.layout)

function onScroll(val) {
  // appStore.updateScrollTop(val.scrollTop)
}
</script>

<style lang="scss" scoped>
.app-main {
  --app-height: var(--inner-height);
  --pd: var(--container-pd);
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base);
  // transition: padding .3s ease, height .3s ease;
  &.has-header {
    padding-top: var(--pd);
    --app-height: calc(var(--inner-height) - var(--el-menu-horizontal-height) - var(--pd));
    // --app-height: calc(var(--inner-height) - var(--el-menu-horizontal-height) - var(--navbar-height));
  }
  &.has-tags-view {
    padding-top: 0;
    --app-height: calc(var(--inner-height) - var(--navbar-height) - var(--pd));
    &.has-header {
      --app-height: calc(var(--inner-height) - var(--el-menu-horizontal-height) - var(--navbar-height) - var(--pd));
    }
  }
}
.all-back {
  background-image: url("@/assets/images/allBack.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .app-main-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
