<template>
  <div class="navbar">
    <hamburger
      :toggle-click="toggleSideBar"
      :is-active="sidebar.opened"
      class="hamburger-container"
    />

    <breadcrumb class="breadcrumb-container"/>

    <div class="right-menu">
      <template>
        <div class="right-menu-item" @click="toUserMsg">
          <el-badge :is-dot="hasNewMsg">
            <svg-icon class-name="email-icon" icon-class="email-o"/>
          </el-badge>
        </div>
        <lang-select class="international right-menu-item"/>
        <!--        <el-tooltip-->
        <!--          :content="$t('navbar.screenfull')"-->
        <!--          effect="dark"-->
        <!--          placement="bottom"-->
        <!--        >-->
        <!--          <screenfull class="screenfull right-menu-item" />-->
        <!--        </el-tooltip>-->

        <!--        <el-tooltip-->
        <!--          :content="$t('navbar.size')"-->
        <!--          effect="dark"-->
        <!--          placement="bottom"-->
        <!--        >-->
        <!--          <size-select class="international right-menu-item" />-->
        <!--        </el-tooltip>-->
        <!--        <el-tooltip-->
        <!--          :content="$t('navbar.theme')"-->
        <!--          effect="dark"-->
        <!--          placement="bottom"-->
        <!--        >-->
        <!--          <theme-picker class="theme-switch right-menu-item" />-->
        <!--        </el-tooltip>-->
      </template>
      <el-dropdown
        class="avatar-container right-menu-item"
        trigger="click"
      >
        <div class="avatar-wrapper">
          <span class="avatar-name">{{ loginName }}</span>&nbsp;&nbsp;
          <img
            :src="baseUrl+'/api/insecure/avatar?code='+avatar+'&size=64'"
            class="user-avatar"
          >
          <i class="el-icon-caret-bottom"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>
              {{ $t('navbar.dashboard') }}
            </el-dropdown-item>
          </router-link>
          <router-link to="/profile/index">
            <el-dropdown-item>
              {{ $t('navbar.profile') }}
            </el-dropdown-item>
          </router-link>
          <el-dropdown-item divided>
                        <span
                          style="display:block;"
                          @click="logout"
                        >{{ $t('navbar.logOut') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import Breadcrumb from '@/components/Breadcrumb'
  import Hamburger from '@/components/Hamburger'
  import Screenfull from '@/components/Screenfull'
  import LangSelect from '@/components/LangSelect'

  import SizeSelect from '@/components/SizeSelect'
  import ThemePicker from '@/components/ThemePicker'
  import {config} from '@/utils/config'

  export default {
    components: {
      Breadcrumb,
      Hamburger,
      Screenfull,
      LangSelect,
      ThemePicker,
      SizeSelect
    },
    data() {
      return {
        baseUrl: config.baseUrl
      }
    },
    computed: {
      ...mapGetters(['sidebar', 'loginName', 'avatar', 'hasNewMsg', 'device'])
    },
    methods: {
      toggleSideBar() {
        this.$store.dispatch('toggleSideBar')
      },
      logout() {
        this.$store.dispatch('LogOut').then(() => {
          location.reload() // In order to re-instantiate the vue-router object to avoid bugs
        })
      },
      toUserMsg() {
        this.$router.push({path: '/user_msg/index'})
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

  .email-icon {
    font-size: 24px;
    cursor: pointer;
    vertical-align: -4px !important;
  }

  .navbar {
    height: 50px;
    border-radius: 0px !important;
    background-color: white;

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

    .breadcrumb-container {
      float: left;
    }

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

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

      &:focus {
        outline: none;
      }

      .right-menu-item {
        display: inline-block;
        margin: 0 8px;
        padding: 10px 0;
      }

      .screenfull {
        height: 20px;
      }

      .international {
        vertical-align: top;
      }

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

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

        .avatar-wrapper {
          cursor: pointer;
          margin-top: -5px;
          position: relative;

          .avatar-name {
          }

          .user-avatar {
            vertical-align: -10px;
            width: 32px;
            height: 32px;
            border-radius: 10px;
          }

          .el-icon-caret-bottom {
            position: absolute;
            right: -20px;
            top: 20px;
            font-size: 12px;
          }
        }
      }
    }
  }
</style>
