<template>
  <el-dropdown @command="handleCommand" trigger="click">
    <span class="el-dropdown-link">
      <span class="user-name">{{ userInfo.name }}</span>
      <i class="el-icon-arrow-down el-icon--right"></i>
    </span>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="person">
        <vab-icon :icon="['fas', 'user']"></vab-icon>
        个人中心
      </el-dropdown-item>
      <el-dropdown-item command="editPwd">
        <vab-icon :icon="['fas', 'pen-square']"></vab-icon>
        修改密码
      </el-dropdown-item>
      <el-dropdown-item command="logout" divided>
        <vab-icon :icon="['fas', 'sign-out-alt']"></vab-icon>
        退出登录
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { mapGetters } from "vuex"
export default {
  name: "Avatar",
  computed: {
    ...mapGetters({
      avatar: "user/avatar",
      userInfo: "user/userInfo",
    }),
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case "person":
          this.$router.push({ name: "AccountInfo" })
          break
        case "editPwd":
          this.$router.push({ name: "pwd" })
          break
        case "logout":
          this.logout()
          break
      }
    },
    logout() {
      this.$baseConfirm(
        "您确定要退出" + this.$baseTitle + "吗?",
        null,
        async () => {
          const fullPath = this.$route.fullPath
          await this.$store.dispatch("user/logout")
          this.$store.commit("table/removeSelectedIndex")
          this.$router.push(`/home?redirect=${fullPath}`)
        }
      )
    },
  },
}
</script>

<style>
.el-dropdown {
  color: #fff !important;
}
</style>