<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="this.$store.getters['tagsView/cachedViews']">
        <!-- include里是组件名，不是路由名 -->
        <router-view :key="key" class="router-view"/>
      </keep-alive>
    </transition>
    <div v-if="isSafari" style="width: 100%; height: 20px"></div>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  data() {
    return {
      isSafari: false
    }
  },
  computed: {
    key() {
      return this.$route.name
    }
  },
  mounted() {
    this.isSafari = (navigator.userAgent.toLowerCase().indexOf("safari") !== -1 && navigator.userAgent.toLowerCase().indexOf("Mac") !== -1)
  },
}
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";

.app-main {
  min-height: calc(100vh - #{$headerBarHeight});
  width: 100%;
  position: relative;
  background-color: #F0F0F0;
  overflow: hidden;

  .router-view {
    background: white;
    min-height: calc(100vh - #{$headerBarHeight} - 20px);
    padding: 10px;
  }
}

.fixed-header + .app-main {
  padding: calc(#{$headerBarHeight} + 10px) 10px 10px 10px;
}

/*当有tagsView时的app-main样式*/
.hasTagsView {
  .app-main {
    padding-top: 130px;
    min-height: calc(100vh - 55px);
  }
}
</style>
