<template>
  <div>
    <el-dropdown>
      <div class="menu-userinfo">
        <el-avatar shape="square" size="small" :src="avatar" @error="errorHandler">
          <img :src="avatarDefault"/>
        </el-avatar>
        <span>{{ userName }}</span>
      </div>
      <el-dropdown-menu slot="dropdown">
        <!--          <el-dropdown-item>详细信息</el-dropdown-item>-->
        <el-dropdown-item @click.native="updateUserPwd">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import avatarDefault from '@/assets/images/default.png'
import {getUserName, getUserId, clearUserInfo} from "@/utils/auth";
import {logout} from "@/api/user";
import {Message} from "element-ui";

export default {
  name: "HeaderMain",
  data() {
    return {
      avatarDefault: avatarDefault,
      avatar: '',
      userName: getUserName(),
      userId: getUserId()
    }
  },
  methods: {
    errorHandler() {
      return true
    },
    /**
     * 修改密码
     */
    updateUserPwd() {
      Message.success("敬请期待")
    },
    /**
     * 退出登录
     */
    logout() {
      this.$confirm('您确定要退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        logout().then(res => {
          clearUserInfo()
          location.href = '/index';
        });
      }).catch(() => {
      });
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.menu-userinfo {
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;

  i {
    color: white;
  }
}

.el-avatar {
  margin-right: 5px;
}
</style>