<template>
  <div>
    <el-container>
      <el-aside v-if="showComponents" width="200px">
        <Sidebar />
      </el-aside>
      <el-container style="display: block;width:100%">
        <Navbar v-if="showComponents" />
        <app-main />
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Navbar from './components/Navbar.vue'
import AppMain from './components/AppMain.vue'
import Sidebar from './components/Sidebar/menu'
export default {
  components: {
    Navbar,
    AppMain,
    Sidebar
  },
  data() {
    return {
      include: []
    }
  },
  computed: {
    // 是否显示顶部栏、菜单栏
    showComponents() {
      if (this.$route.path != '/') {
        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>
