<style>
  .main-wrapper {
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .main-header {
    /*position: fixed;*/
    width: 100%;
    height: 50px;
    /*padding: 0;*/
    /*background-color: #b8b8b8;*/
    /*z-index: 8000;*/
    /*min-width: 860px;*/
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04);
  }

  /* 页内样式 */
  .home-page-center {
    height: 100%;
  }

  .single-page-center {
    padding: 8px;
    box-sizing: border-box;
  }

  .home-section-wrap {
    padding: 8px;
    position: relative;
  }

  .home-section-wrap-bottom {
    min-height: -moz-calc(100% - 130px);
    min-height: -webkit-calc(100% - 130px);
    min-height: calc(100% - 130px);
    margin: 8px;
    background-color: #fff;
  }

  .page-center-wrap-bottom {
    min-height: -moz-calc(100% - 16px);
    min-height: -webkit-calc(100% - 16px);
    min-height: calc(100% - 16px);
    background-color: #fff;
  }

  .page-center-wrap-bottom .home-section-env, .home-section-wrap-bottom .home-section-env, .home-section-wrap-right .home-section-env {
    padding: 8px !important;
  }

  .home-section-wrap-right {
    min-height: -moz-calc(50% - 32px);
    min-height: -webkit-calc(50% - 32px);
    min-height: calc(50% - 32px);
    margin: 8px;
    background-color: #fff;
  }

  .home-section-env {
    background-color: #fff;
    padding: 16px;
    position: relative;
    border-radius: 4px;
  }
</style>
<style scoped>
  .top-menu-item {
    color: #3f4657;
    float: right;
    height: 40px;
    margin-right: 2%;
    font-size: 16px;
    padding: 0 16px;
    margin-top: 10px;
  }

  .top-menu-item:hover {
    /*background-color: rgb(90, 197, 232);*/
  }

  .top-menu-title{
    float: right;
    height: 40px;
    font-size: 16px;
    /*padding: 0 16px;*/
    top: 10px;
    margin-right: 6%;
  }
</style>
<template>
  <div class="main-wrapper main-sidebar-l" :class="{'sidebar-mini':menuIsFold}">
    <header class="main-header">
      <div class="top-menu-item">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper" style="font-size:large;padding:10px 0" >
            <span>欢迎 {{username}} 同学</span>
            <svg-icon :iconClass="'user'"></svg-icon>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link class="inlineBlock" to="/">
              <el-dropdown-item>
                Home
              </el-dropdown-item>
            </router-link>
            <el-dropdown-item divided>
              <span style="display:block;" @click="logout">LogOut</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>

      </div>

    </header>


    <c-menu></c-menu>
    <c-main></c-main>
  </div>
</template>
<script>
  import {mapGetters, mapActions} from 'vuex'
  import '@/icons'
  import CMenu from 'components/CMenu'
  import CMain from 'components/CMain'

  export default {
    data() {
      return {
        username: this.$store.getters.username
      }
    },
    computed: mapGetters([
      'menuIsFold',
      'tokens'
    ]),
    components: {
      CMenu,
      CMain
    },
    watch: {
      tokens: function (val) {
        if (val == '') {
          this.$router.push('/login');
        }
      }
    },
    methods: mapActions([
      'logout'
    ])
  }
</script>
