<template>
  <div class="header">
    <el-menu
      class="navbar"
      mode="horizontal">
      <div class="right-menu">
        <el-dropdown
          class="right-menu-item avatar-container"
          trigger="click">
          <div class="avatar-wrapper">
            <img class="user-avatar" :src="avatar">
          </div>
          <el-dropdown-menu slot="dropdown">
            <!--退出-->
            <el-dropdown-item>
              <span @click="logout" style="display:block;">
                <!--<svg-icon icon-class="exit" />-->
                {{ $t('navbar.logOut') }}
              </span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="user-info right-menu-item" v-show="mobileVisible">
          <div class="user-name">欢迎您，
            <router-link to="/profile">
              <span class="name-span">{{ name }}</span>
            </router-link>
          </div>
          <div class="curr-role">
            <!--<el-dropdown trigger="click">-->
              <span class="el-dropdown-link" >
                {{ roleName }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
            <!--</el-dropdown>-->
          </div>
        </div>
      </div>
      <!--<div class="medium-menu">-->
      <!--</div>-->
    </el-menu>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import {AppAction, UserAction} from '@/store/actionType';
  import userAPI from '@/api/userAPI';

  export default {
    name: 'Navbar',
    inject: ['reload'],
    data () {
      return {
        userRole: []
      }
    },
    computed: {
      ...mapGetters([
        'sidebar',
        'name',
        'avatar',
        'roleName',
        'roleID',
        'device'
      ]),
      mobileVisible () {
        if (this.device === 'mobile') {
          return false
        }
        return true
      }
    },
    created () {
      this.getRoleName();
    },
    methods: {
      loadMessage () {
        this.$refs.messageDropDown.load();
      },
      toggleSideBar () {
        this.$store.dispatch(AppAction.ToggleSideBar)
      },
      logout () {
        this.$confirm('确认退出?', '提示', {})
          .then(() => {
            this.$store.dispatch(UserAction.LogOut).then(() => {
            }).finally(() => {
              this.$router.push({name: 'login'});
            })
          })
      },
      locked () {
        this.$store.dispatch(UserAction.Locked)
      },
      getRoleName () {
        userAPI.getUserRole().then(res => {
          this.userRole = res.data;
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  $navbarH: 65px;

  .header {
    flex: 0 0 auto;
  }
  .active-role-name{
     color: #66b1ff;
   }
  .navbar {
    height: $navbarH;
    line-height: $navbarH;
    border-radius: 0px !important;

    .hamburger-container {
      line-height: 58px;
      height: 50px;
      float: left;
      padding: 8px 10px;
    }

    .breadcrumb-container {
      float: left;
      margin-top: 8px;
    }

    .errLog-container {
      display: inline-block;
      vertical-align: top;
    }

    .right-menu {
      float: right;
      height: 100%;

      &:focus {
        outline: none;
      }

      .right-menu-item {
        float: left;
        display: inline-block;
        margin-right: 10px;
        margin-top: 10px;
        height: 50px;
      }

      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

      .theme-switch {
        vertical-align: 15px;
      }

      .message-container{
        font-size: 23px;
        color: #575757;
        line-height: initial;
        padding-top: 10px;
        padding-right: 30px;
        height: 50px;
        cursor: pointer;
      }

      .avatar-container {
        height: 50px;
        margin-right: 10px;
        margin-top: 10px;

        .avatar-wrapper {
          cursor: pointer;

          .user-avatar {
            width: 45px;
            height: 45px;
            border-radius: 45px;
          }
        }
      }

      .user-info {
        max-width: 135px;
        margin-right: 10px;
        overflow: hidden;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
        .user-name {
          height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .name-span {

        }

        .curr-role {
          .el-dropdown{
            color: #3333;
          }
          color: #3333;
          /*cursor: pointer;*/
          padding-top: 3px;
          word-break: keep-all;
        }
      }
    }
  }
</style>
