<template>

<el-menu class="navbar" mode="horizontal">
  <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
  <levelbar></levelbar>
  <tabs-view></tabs-view>
  <error-log v-if="log.length>0" class="errLog-container" :logsList="log"></error-log>
  <!-- <screenfull class='screenfull'></screenfull> -->
  <el-dropdown class="avatar-container" trigger="click">
    <!-- <div class="avatar-wrapper"> <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'"> <i class="el-icon-caret-bottom"></i> </div> -->
    <div class="" style="font-size: 15px;cursor: pointer;"> 欢迎您，<span style="color:#20A0FF;">{{username}}</span> <i class="el-icon-caret-bottom"></i> </div>
    <el-dropdown-menu class="user-dropdown" slot="dropdown">
      <router-link class='inlineBlock' to="/">
        <el-dropdown-item> 首页 </el-dropdown-item>
      </router-link>
      <a target='_blank' href="https://github.com/wxiaoqi/ace-admin/">
        <el-dropdown-item> 项目地址 </el-dropdown-item>
      </a>
      <el-dropdown-item divided><span @click="logout" style="display:block;">退出登录</span></el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</el-menu>
</template>

<script>
import {
  mapGetters
} from 'vuex';
import Levelbar from './Levelbar';
import TabsView from './TabsView';
import Hamburger from 'components/Hamburger';
import Screenfull from 'components/Screenfull';
import ErrorLog from 'components/ErrLog';
import errLogStore from 'store/errLog';
export default {
  components: {
    Levelbar,
    TabsView,
    Hamburger,
    ErrorLog,
    Screenfull
  },
  data() {
    return {
      log: errLogStore.state.errLog
    }
  },
  computed: { ...mapGetters([
      'sidebar',
      'name',
      'avatar',
      'username'
    ])
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    },
    logout() {
      this.$store.dispatch('FedLogOut')
        .then(() => {
          location.reload(); // 为了重新实例化vue-router对象 避免bug
        });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.el-menu{
  background-color: #fff;
  height: 70px;
  line-height: 70px;
  -moz-box-shadow:1px 1px 3px #ccc; -webkit-box-shadow:1px 1px 3px #ccc; box-shadow:1px 1px 3px #ccc;
}
.navbar {
    height: 70px;
    line-height: 70px;
    border-radius: 0 !important;
    .hamburger-container {
        line-height: 78px;
        height: 70px;
        float: left;
        padding: 0 10px;
    }
    .errLog-container {
        display: inline-block;
        position: absolute;
        right: 150px;
    }
    .screenfull {
        position: absolute;
        right: 90px;
        top: 26px;
        color: red;
    }
    .avatar-container {
        height: 70px;
        display: inline-block;
        position: absolute;
        right: 35px;
        .avatar-wrapper {
            cursor: pointer;
            margin-top: 10px;
            position: relative;
            .user-avatar {
                width: 40px;
                height: 40px;
                border-radius: 10px;
            }
            .el-icon-caret-bottom {
                position: absolute;
                right: -20px;
                top: 25px;
                font-size: 12px;
            }
        }
    }
}
</style>
