<template>
  <div class="x-admin-user-info">
    <Avatar class="x-admin-user-info__avatar" size="small" :src="image"></Avatar>
    <Dropdown class="x-admin-user-info__dropdown" @command="handleCommand">
      <div>
        {{name}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <DropdownMenu slot="dropdown" class="x-admin-user-info__menu">
        <DropdownItem v-for="item in tools"
                      :key="item.name"
                      :command="item.name">
          {{item.label}}
        </DropdownItem>
      </DropdownMenu>
    </Dropdown>
  </div>
</template>

<script>
import {
  Avatar,
  Dropdown,
  DropdownMenu,
  DropdownItem
} from 'element-ui';

import defaultAvatar from '../assets/avatar.png';

export default {
  inheritAttrs: false,
  inject: ['$admin'],
  components: {
    Avatar,
    Dropdown,
    DropdownMenu,
    DropdownItem
  },
  props: {
    defaultAvatar: {
      type: String,
      default: defaultAvatar
    },
    avatar: {
      type: String
    },
    name: String,
    tools: Array
  },
  computed: {
    image() {
      return this.avatar || this.defaultAvatar;
    }
  },
  methods: {
    handleCommand(command) {
      this.$emit('command', command);
      this.$admin.$emit('user-tool-click', command);
    }
  }
};
</script>
