<template>
  <el-popover
      placement="top"
      popper-class="user-info-popover"
      trigger="click">
    <div class="user-info-container">
      <div class="user-info">
        <h3>账号</h3>
        <span>{{ user.username }}</span>
      </div>
      <div v-show="isLogin" class="user-info-item" @click="editor.showChangePwd = true">
        <i class="iconfont icon-xiugaimima1"></i>
        <span class="title">修改密码</span>
      </div>
      <div v-show="isLogin" class="user-info-item" @click="editor.showTokenManager = true">
        <i class="iconfont icon-shouquan"></i>
        <span class="title">凭证管理</span>
      </div>
      <div v-show="isLogin && user.type === 2" class="user-info-item" @click="editor.showUserManager = true">
        <i class="iconfont icon-yonghuguanli"></i>
        <span class="title">用户管理</span>
      </div>
      <div class="el-divider el-divider--horizontal" style="margin: 8px 0;" ></div>
      <div v-show="isLogin" class="user-info-item" @click="tologout">
        <i class="iconfont icon-logout"></i>
        <span class="title">退出账户</span>
      </div>
      <div v-show="!isLogin" class="user-info-item" @click="editor.showLogin = true">
        <i class="iconfont icon-login"></i>
        <span class="title">快速登录</span>
      </div>
    </div>
    <el-avatar slot="reference" size="medium" icon="el-icon-user-solid" style="cursor: pointer; margin-top: 4px;"></el-avatar>
  </el-popover>
</template>

<script>
import {mapActions, mapGetters, mapState} from "vuex";

export default {
  name: "FpHeaderUserInfo",
  computed: {
    ...mapGetters({
      'isLogin': 'editor/isLogin'
    }),
    ...mapState({
      'user': state => state.editor.user,
      'editor': state => state.editor,
    })
  },
  methods: {
    ...mapActions({
      'logout': 'editor/logout'
    }),
    tologout() {
      this.logout().then(() => {
      })
    }
  }
}
</script>

<style scoped>


.user-info-container {
  width: 280px;
}

.user-info {
  height: 80px;
  margin-bottom: 8px;
  padding: 10px;
  background: linear-gradient(-45deg, #abc, #fff);
  border-radius: 3px 3px 0 0;
}

.user-info-item {
  height: 40px;
  border-bottom: 1px solid #fff;
  display: flex;
  padding: 0 20px;
  line-height: 40px;
  user-select: none;
}

.user-info-item:hover {
  background-color: #e8eaec;
  cursor: pointer;
}

.user-info-item .iconfont {
  width: 40px;
  color: var(--icon-color);
}

.user-info-item .title {
  color: #000;
}

</style>

<style>
.el-popover.el-popper.user-info-popover {
  padding: 0px 0 12px 0;
}

.el-popover.el-popper.user-info-popover .popper__arrow {
  display: none;
}
</style>