<template>
  <div id="app" v-cloak>
  <la-yout/>
  </div>
</template>

<script>
import LaYout from '@/layout'

export default {
  name: 'App',
  components: {
    LaYout
  },
  data() {
    return {
      include: []
    }
  },
  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)
        }
      }
    }
  },
  mounted() {
    window.addEventListener('unload', this.saveState)
  },
  methods: {
    saveState() {
      sessionStorage.setItem('state', JSON.stringify(this.$store.state))
    }
  }
}
</script>

<style lang="less">
@import 'app.less';
</style>
