<template>
  <div class="user-login-box">
    <div v-if="!user.id" class="not-login" @click="login">注册/登录</div>
    <el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
      <div class="avatar-wrapper">
        <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
        <span>{{ user.username }}</span>
        <i class="el-icon-caret-bottom" />
      </div>
      <el-dropdown-menu slot="dropdown">
        <router-link to="/console">
          <el-dropdown-item>
            个人中心
          </el-dropdown-item>
        </router-link>
        <span style="display:block;" @click="open">
          <el-dropdown-item divided>
            退出登录
          </el-dropdown-item>
        </span>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import Avatar from '@/assets/images/avatar.png'

export default {
  data() {
    return {
      Avatar: Avatar
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  mounted() {
    this.$nextTick(() => {})
  },
  methods: {
    login(item) {
      this.$router.push({ path: item.url || '/login' })
    },
    logout() {
      this.$store.dispatch('LogOut').then(() => {
        location.reload()
      })
    },
    open() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logout()
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.avatar-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 15px;
  color: #000;
  font-size: 15px;
  &:before {
    position: absolute;
    right: 0;
    height: auto;
    width: 12px;
  }
  img {
    height: 26px;
    width: 26px;
    border-radius: 4px;
    margin-right: 4px;
    border: 0;
  }
  span {
    display: block;
    max-width: 55px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-wrap: normal;
    opacity: 0.8;
  }
  span:hover {
    opacity: 1;
  }
}

.user-login-box {
  padding: 1px 15px 1px;
  font-size: 20px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #000;
  line-height: 48px;
  cursor:pointer;
  user-select: none;
}
.not-login {
  opacity: 0.6;
}
.not-login:hover {
  opacity: 0.85;
}
</style>
