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

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">
      <a-tooltip>
        <template slot="title">
          首页
        </template>
        <a-icon
          type="home"
          @click="$router.push('/')"
        ></a-icon>
      </a-tooltip>

      <!-- <a-tooltip>
        <template slot="title">
          全屏
        </template>
        <span style="line-height:1">
          <screenfull class="screenfull" />
        </span>
      </a-tooltip>

      <a-tooltip>
        <template slot="title">
          帮助
        </template>
        <a-icon
          type="question-circle"
        ></a-icon>
      </a-tooltip> -->

      <!-- <lang-select class="international right-menu-item"/> -->

      <!-- <a-tooltip>
        <template slot="title">
          消息
        </template>
        <a-icon type="message"></a-icon>
      </a-tooltip> -->

      <a-tooltip>
        <template slot="title">
          修改密码
        </template>
        <a-icon type="lock" @click="$refs.password.show()"></a-icon>
      </a-tooltip>

      <a-tooltip>
        <template slot="title">
          退出
        </template>
        <a-icon
          type="logout"
          @click="logout"
        />
      </a-tooltip>
    </div>

    <Password ref="password"></Password>
  </div>
</template>

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

export default {
  components: {
    Breadcrumb,
    Hamburger,
    // ErrorLog,
    Password,
    Screenfull
    // LangSelect
    // ThemePicker
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'name',
      'avatar'
    ])
  },
  methods: {
    toggleSideBar () {
      this.$store.dispatch('toggleSideBar')
    },
    logout () {
      this.$store.dispatch('LogOut').then(() => {
        this.$router.push('/login')
        setTimeout(() => {
          location.reload()// In order to re-instantiate the vue-router object to avoid bugs
        }, 100)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.navbar {
  height: 50px;  border-radius: 0 !important;
  .hamburger-container {
    float: left;  height: 50px;  padding: 0 10px;  line-height: 58px;
  }
  .breadcrumb-container {
    float: left;
  }
  .errLog-container {
    display: inline-block;  vertical-align: top;
  }
  .right-menu {
    display: flex;  float: right;  height: 100%;  align-items: center; margin-right: 20px;
    &:focus {
      outline: none;
    }
    .anticon{
      display: inline-block;  padding: 0 5px;
    }
    .screenfull {
      height: 20px;
    }
    .theme-switch {
      vertical-align: 15px;
    }
    .avatar-container {
      margin-right: 30px;
      .avatar-wrapper {
        position: relative;  cursor: pointer; font-size: 0;
        .el-icon-caret-bottom {
          position: absolute;  top: 10px;  right: -16px;  font-size: 12px;
        }
      }
    }
  }
}

</style>

<style>
.navbar .anticon {
  font-size: 20px;  cursor: pointer;
}
</style>
