<template>
  <div class="menu-topBar">
    <el-menu
    :class="{'menu-dark': appStyle=='dark','menu-light': appStyle=='light'}"
    mode="horizontal"
    :default-active="$route.path"
    :router="true"
    :background-color="appStyle=='dark' ?'#030E1D':'#fff'"
    :text-color="appStyle=='dark' ?'#AFB3B6':'#4F5869'"
    :active-text-color="appStyle=='dark' ?'#2f9df2':'#435DEB'"
    >
       <template v-for="(route, index) in getRouters"  >
            <topBarItem  v-if="!route.hidden" :key="index"  :item="route" :basePath="route.path"/>
       </template>
    </el-menu>
  </div>
</template>
<script>
import {mapState } from 'vuex'
import topBarItem from './topBarItem.vue'
  export default {
    name:"topBar",
    components:{
        topBarItem
    },
    computed: {
      ...mapState('user',['appStyle']),
      getRouters() {
        return this.$router.options.routes
      },
      key() {
        return this.$route.path
      }
    },
    methods: {
    
    }
  }
</script>
<style lang="scss" scoped>
  .topBar .el-menu--horizontal{
    border-bottom: none;
  }
  .menu-topBar >>>{
    .el-menu--horizontal{
      >.el-menu-item{
        height: 54px;
        line-height: 54px;
      }
       >.el-submenu .el-submenu__title{
        height: 54px;
        line-height: 54px;
      }
    }
    .menu-topBar-icon{
      margin-right: 10px;
    }
  }
</style>