<template>
  <div
    id="app"
    :style="{
      background: variables[`${style}-container-background`],
      '--background': variables[`${style}-top-bar-background`],
      '--menuColor': variables[`${style}-menu-color`],
      '--topColor': variables[`${style}-tab-color`],
    }"
  >
    <Layouts v-if="iSFirstMenuLevel">
      <keep-alive :include="keepaliveIncludes">
        <router-view />
      </keep-alive>
    </Layouts>
    <keep-alive v-else :include="keepaliveIncludes">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { keepaliveIncludes } from '@/utils/handleRoutes.js'
  import variables from '@/styles/variables.scss'
  import _ from 'lodash'
  import Layouts from '@/components/layouts'

  export default {
    name: 'App',
    components: {
      Layouts,
    },
    computed: {
      ...mapGetters({
        style: 'settings/style',
        themeColor: 'settings/themeColor',
      }),
      variables() {
        return variables
      },
      keepaliveIncludes() {
        return keepaliveIncludes
      },
      iSFirstMenuLevel() {
        return this.$route.meta.menuLevel == 'first'
      },
    },
    created() {
      // 因为resize事件在整个项目中只能监听一次，所以这里通过全局广播发送这个事件
      window.onresize = _.debounce(() => {
        this.$root.$emit('resize')
      }, 300)
    },
  }
</script>
<style lang="scss" scoped>
  #app {
    height: 100%;
  }
</style>