<template>
  <el-dropdown @command="handleCommand">
    <span class="user-info">
      <img v-if="userInfo.headImg" :src="userInfo.headImg" alt="" class="logo-img" />
      <img v-else src="../images/user-default.png" alt="" class="logo-img" />
      <span class="realname-box">
        <span class="realname">{{ userInfo.staffName }}</span>
        <i class="el-icon-arrow-down user-info-arrow"></i>
      </span>
    </span>
    <el-dropdown-menu slot="dropdown" class="user-info-menu">
      <!-- <el-dropdown-item command="info">账户信息</el-dropdown-item>
      <el-dropdown-item command="modify-password">修改密码</el-dropdown-item> -->
      <!-- <el-dropdown-item divided command="logout">退出登录</el-dropdown-item> -->
      <el-dropdown-item command="logout">退出登录</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
import { postRequest } from '@/api/api.js';
import errorMsg from '@/common/js/error.js';

export default {
  name: 'UserInfo',
  data() {
    return {
      userInfo: {
        headImg: '',
        staffName: ''
      }
    };
  },
  created() {
    const userInfo = JSON.parse(sessionStorage.getItem('userInfos') || '{}');
    this.userInfo.headImg = userInfo.headImg;
    this.userInfo.staffName = userInfo.staffName;
  },
  methods: {
    handleCommand(command) {
      switch (command) {
        case 'info':
          break;
        case 'modify-password':
          break;
        case 'logout':
          this.$confirm('确认退出吗?', '提示', { type: 'warning' }).then(this.logout);
          break;
      }
    },
    logout() {
      this.$emit('showLoading', true);
      postRequest('/haoban-manage3-web/login-out', {})
        .then(res => {
          const { errorCode } = res.data || {};
          if (errorCode != 1) {
            errorMsg.errorMsg(res.data);
            return;
          }
          this.$message.success('退出成功');
          this.$router.push('/login');
        })
        .finally(() => this.$emit('showLoading', false));
    }
  }
};
</script>

<style lang="scss" scoped>
.user-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 24px;
  padding-right: 20px;
  &:hover {
    .user-info-arrow {
      transform: rotateZ(180deg);
    }
  }
  .logo-img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
  }
  .realname-box {
    font-size: 14px;
    color: #303133;
    cursor: pointer;
    .realname {
      margin-right: 5px;
      font-size: 14px;
    }
    .user-info-arrow {
      transition: all 0.3s;
    }
  }
}
</style>

<style lang="scss">
.user-info {
  .el-icon-arrow-down {
    font-family: 'iconfont-hb3' !important;
    &::before {
      content: '\E9E9';
    }
  }
}
.user-info-menu {
  width: 119px;
  text-align: center;
  z-index: 2000000000 !important;
}
</style>
