<template>
  <div id="app" class="custom-theme">
    <router-view
      :is-animation="isAnimation"
      :menu-router="menuRouter"
      :menu-active="menuActive"
      :breadcrumb="breadcrumb"
      :is-collapse="isCollapse"
      @changeCollapse="isCollapse = !isCollapse"
    />
    <div :class="['packet-mask',showPacket?'show':'']">
      <packetList class="packet-list" @close="showPacket=false" />
    </div>
  </div>
</template>

<script>
import i18n from '@/locales/i18n'
import packetList from '@/views/components/packetList.vue'
import router from '@/router'
import { canIShow } from '@/permission'
export default {
  name: 'App',
  components: {
    packetList
  },
  data() {
    return {
      roles: [],
      isAnimation: false,
      menuRouter: [],
      menuActive: 0,
      breadcrumb: [],
      isCollapse: false,
      showPacket: false
    }
  },
  created() {
    this.initGuards()
  },
  mounted() {
    this.initStore()
    this.refreshUser()
    console.log(this.$route)
    this.$bus.$on('showPacket', (val) => {
      this.showPacket = val
    })
  },
  methods: {
    refreshUser() {
      this.$store.dispatch('refreshToken').then((res) => {
      }).catch(err => {
        this.$router.push({
          name: 'login'
        })
      })
    },
    initStore() {
      window.addEventListener('beforeunload', () => {
        localStorage.setItem('store', JSON.stringify(this.$store.state))
      })
      try {
        localStorage.getItem('store') && this.$store.replaceState(JSON.parse(localStorage.getItem('store')))
      } catch (e) {
        localStorage.removeItem('store')
      }
    },
    initGuards() {
      this.$router.afterEach((to, from, next) => {
        this.refreshRoute()
      })
      this.$router.beforeEach((to, from, next) => {
        if (router.app.$store.getters.token) {
          if (router.app.$store.getters.user.isAdmin) {
            this.isAnimation = true
            setTimeout(() => {
              this.isAnimation = false
              next()
            }, 400)
          } else {
            next({
              name: 'userForm'
            })
          }
        } else {
          if (to.name === 'login' || to.name === 'userRegister' || to.name === 'userForm' || to.name === 'thirdLogin') {
            next()
          } else {
            next({
              name: 'userRegister'
            })
          }
        }
      })
    },
    refreshRoute() {
      this.menuRouter = this.$router.options.routes[0].children
      this.breadcrumb = this.$route.matched
      this.menuRouter.forEach((item, index) => {
        if (item.name === this.$route.name) {
          this.menuActive = index
          if (item.meta.collapse !== undefined) {
            this.isCollapse = !!item.meta.collapse
          }
        }
        if (item.children) {
          item.children.forEach((child, subIndex) => {
            if (child.name === this.$route.name) {
              this.menuActive = index + '-' + subIndex
              if (child.meta.collapse !== undefined) {
                this.isCollapse = !!child.meta.collapse
              }
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
 body,html,#app{
   margin: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }
 .packet-mask{
   display: flex;
   align-items: center;
   justify-content: center;
   transition-duration: 300ms;
   z-index: 9999;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: #00000044;
   pointer-events: none;
   opacity: 0;
   .packet-list{
     transition-duration: 300ms;
     transform: translateY(40px);
   }
   &.show{
     pointer-events: auto;
     opacity: 1;
     .packet-list{
       transform: translateY(0);
     }
   }
 }
 textarea{
   font-family: inherit;
 }
 .loading{
   animation: loading 800ms infinite alternate;
 }
 @keyframes loading {
   from{
     background: #e1e1e1;
   }
   to{
     background: #f1f1f1;
   }
 }
*{
  box-sizing: border-box;
}
 input[aria-hidden="true"]{
   display: none !important;
 }
</style>
