<template>
  <div ref="navbarWidth" style="width: 100%;background: #ffffff;height: 56px;" >
    <div id="navBar" class="navbar" :style="{width: navbarWidth}">
      <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>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import elementResizeDetectorMaker from "element-resize-detector"
import TagsView from './TagsView'
export default {
  props:['offsetWidth'],
  components: {
    TagsView
  },
  data() {
    return {
      scrollerWidth: null,
      navbarWidth: null
    }
  },
  computed: {
    ...mapGetters([
      'sidebar',
      'avatar',
      'name'
    ])
  },
  watch: {
    offsetWidth(newValue, oldValue){
      this.navbarWidth=`calc(100% - ${newValue}px)`
    }
  },
  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'
      })
    })
    this.navbarWidth=`calc(100% - ${this.offsetWidth}px)`
  },
  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);
  position: fixed;
  top:0;
  z-index: 999;

  .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: 24px;
          height: 24px;
          line-height: 24px;
          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>
