<template>
  <div class="userboard">
    <!-- <el-badge :is-dot="!!(messages && messages.length)" class="message">
      <xm-icon name="ring" :style="{ fontSize: '18px' }"></xm-icon>
    </el-badge> -->
    <el-dropdown @command="clickUser">
      <span>
        <xm-icon name="user" :style="{ fontSize: '18px' }"></xm-icon>
        <xm-icon name="arrowdown"></xm-icon>
      </span>
      <el-dropdown-menu slot="dropdown">
        <!-- <el-dropdown-item command="resetPassword">重置密码</el-dropdown-item> -->
        <el-dropdown-item command="logout">登出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'user-board',
  props: [
    'messages',
    'user',
  ],
  methods: {
    clickUser(cmd) {
      switch (cmd) {
        case 'resetPassword':
          this.$emit('resetPassword')
          break
        case 'logout':
          this.$emit('logout')
          break
        default:
          // todo
      }
    }
  }
}
</script>


<style lang="scss" scoped>
.userboard {
  .message {
    margin-right: 12px;
    vertical-align: baseline;
  }
}
</style>

