<template>
  <div id="navBar" class="navbar">
    <div class="left-menu" :style="{width: scrollerWidth}">
      <tags-view />
    </div>
    <div ref="rightMenu" class="flex-box right-menu">
      <div class="menu-bells"><img src="@/assets/images/message.png"><i /></div>
      <i class="menu-line" />
      <el-dropdown class="avatar-container" trigger="hover">
        <div class="flex-box avatar-wrapper">
          <img v-if="avatar" class="pic-avatar" :src="avatar">
          <span v-else class="user-avatar">{{ name&&name.slice(0, 1).toUpperCase() }}</span>
          {{ name }}
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>用户中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span>退出</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import elementResizeDetectorMaker from "element-resize-detector"
import TagsView from './TagsView'

export default {
  components: {
    TagsView
  },
  data() {
    return {
      scrollerWidth: null
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  mounted() {
    const _this = this, erd = elementResizeDetectorMaker(), navBar = document.getElementById("navBar")
    erd.listenTo(navBar, element => {
      _this.$nextTick(() => {
        const nvWidth = navBar.offsetWidth
        const rtWidth = _this.$refs.rightMenu.offsetWidth
        this.scrollerWidth = (nvWidth - rtWidth - 100)+'px' || '800px'
      })
    })
  },
  methods: {
    async logout() {
      this.$confirm('确定退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {});
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 56px;
  overflow: inherit;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

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

    &:focus {
      outline: none;
    }

    .menu-bells{
      position: relative;
      margin-right: 16px;
      cursor: pointer;
      img{
        width: 24px;
        height: 24px;
      }
      i{
        width: 6px;
        height: 6px;
        background: #FF4545;
        border-radius: 50%;
        position: absolute;
        right: 0;
        top: 0;
      }
    }
    .menu-line{
      display: inline-block;
      width: 1px;
      height: 24px;
      background: #EEEEEE;
      margin-right: 16px;
    }
    .avatar-container {
      margin-right: 24px;
      margin-top: -5px;
      .avatar-wrapper {
        font-size: 12px;
        color: #232323;
        line-height: 20px;
        cursor: pointer;
        .pic-avatar{
          width: 20px;
          height: 20px;
          border-radius: 50%;
          margin-right: 4px;
          overflow: hidden;
        }
        .user-avatar {
          display: inline-block;
          cursor: pointer;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background: #E3EEF9;
          color: #0081FF;
          border-radius: 50%;
          margin-right: 4px;
        }
      }
    }
  }
}
.user-dropdown {
  .el-dropdown-menu__item{
    font-size: 12px;
    color: #232323;
    line-height: 24px;
    border-top: 0;
    margin-top: 0;
    padding: 0 12px;
    &:focus, &:not(.is-disabled):hover{
      background: #E3EEF9;
    }
    &:before{
      height: 0;
      margin: 0;
    }
  }
}
</style>
