<template>
  <el-menu
    style="height: calc(100vh - 60px);overflow-y:scroll"
    :default-active="activePath"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#fff"
    text-color="#666"
    active-text-color="#fff"
    router>
    <!-- <el-menu-item index="home">
      <i class="el-icon-house"></i>
      <span slot="title">首 页</span>
    </el-menu-item> -->
    <!-- <el-menu-item index="role_manage">
      <i class="el-icon-mouse"></i>
      <span slot="title">角色管理</span>
    </el-menu-item>
    <el-menu-item index="account_manage">
      <i class="el-icon-user"></i>
      <span slot="title">账号管理</span>
    </el-menu-item> -->
     <el-menu-item v-for="item in auth_data" :key="item.systemappid" :index="item.path">
      <i class="el-icon-mouse"></i>
      <span slot="title">{{item.meta.title}}</span>
    </el-menu-item>
  </el-menu>
  
</template>
<script>
export default {
  data () {
    return {
      activePath:'/role_manage',
      auth_data:''
    }
  },
  methods:{
    handleOpen () {},
    handleClose () {},
    // 查询应用授权
    async query_userauth () {
      const res = await this.$api.requested({
        "classname": "sysmanage.develop.userauth.userauth",
        "method": "query_userauth",
        "content": {
        }
      })
      this.auth_data = res.data
    }
  },
  created () {    
    this.activePath = this.$route.path
    this.query_userauth()
  },
  watch:{
    $route(){
      this.activePath = this.$route.path
    }
  }
}

</script>
<style>
.el-menu-item-group__title{
  padding: 0 !important;
}
</style>
<style scoped>
.is-active{
  background: #4F7BFD !important;
}
</style>