<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { getRoleList, parseMenusFromRoleListResponse } from '@/api/rbacApi'

export default {
  name: 'App',
  mounted() {
    const authUser = JSON.parse(localStorage.getItem('authUser') || 'null')
    const userMenus = JSON.parse(localStorage.getItem('userMenus') || '[]')
    if (authUser) {
      this.$store.commit('SetCurrentUser', authUser)
      this.$store.commit('SetRole', authUser.roleIds || [])
      this.$store.commit('SetUserMenus', userMenus)
      this.loadUserMenus(authUser)
    }
  },
  methods: {
    loadUserMenus(authUser) {
      const roleId = authUser && authUser.roleIds && authUser.roleIds.length ? authUser.roleIds[0] : undefined
      if (!roleId) {
        return
      }
      getRoleList({ roleId }).then(res => {
        this.$store.commit('SetUserMenus', parseMenusFromRoleListResponse(res))
      }).catch(() => {})
    }
  }
}
</script>

<style>
#app{
  height: 100%;
}
</style>
