<template>
  <section class="app-main" :id="isApp_main ? 'app-main-id' : ''">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="include">
        <router-view :id="isApp_main ? 'appMain-box' : ''" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  data() {
    return {
      include: []
    }
  },
  computed: {
    isApp_main() {
      if (
        this.$store.state.permission.addRoutes.find(
          v => v.name == this.$route.name
        )
      ) {
        return true
      } else {
        return false
      }
    }
  },
  watch: {
    $route(to, from) {
      if (to.meta.keepAlive) {
        !this.include.includes(to.name) && this.include.push(to.name)
      }
      if (to.meta.parentNode && to.meta.parentNode.indexOf(from.name) > -1) {
        !this.include.includes(from.name) && this.include.push(from.name)
      } else if (
        from.meta.parentNode &&
        from.meta.parentNode.indexOf(to.name) > -1
      ) {
        console.log()
      } else {
        if (from.meta.parentNode) {
          let index = this.include.indexOf(from.meta.parentNode)
          index !== -1 && this.include.splice(index, 1)
        }
        if (!from.meta.parentNode) {
          let index = this.include.indexOf(from.name)
          index !== -1 && this.include.splice(index, 1)
        }
      }
    }
  }
}
</script>

<style lang="less" type="text/scss" scoped>
#appMain-box {
  margin: 28px 16px 35px 23px;
  padding: 20px;
  background: #fff;
}
#app-main-id {
  max-height: calc(100vh - 70px);
}
.app-main {
  width: 100%;
  position: relative;
  overflow-y: auto;
  flex: 1;
  background: #fff9f9;
}
.fixed-header + .app-main {
  padding-top: 50px;
}
.el-popup-parent--hidden {
  .fixed-header {
    padding-right: 15px;
  }
}
</style>
