<template>
    <div :class="userManagementStyle">
        <img @click="extendUserMenu" class="userpic" src="../application/assets/user.png">
        <span v-if="!isUsermenuCollapsed" class="username align-self-center">{{ userinfo }}</span>
        <span v-if="!isUsermenuCollapsed" class="logout align-self-center" @click="logoff">
            <i class="fa fa-power-off"></i>
        </span>
    </div>
</template>

<style lang="scss">
.usermanagement {
  background: white;
  margin-left: 1rem;
  padding: 0.25rem;
  border-radius: 5px;
}

.usermanagementcollapsed {
  width: 50px;
}

.usermanagementexpanded {
  width: 150px;
}
</style>

<script>
import { mapGetters } from "vuex";
export default {
  name: "user",
  data() {
    return {};
  },
  methods: {
    extendUserMenu() {
      this.$store.commit("application/toggleUserMenu");
    },
    logoff() {
      this.$store.commit("user/clear_auth");
      this.$store.commit("application/resetSidebar");
      this.$store.commit("application/resetUserMenu");
      this.$router.push("/login");
    }
  },
  computed: {
    ...mapGetters("user", ["userinfo"]),
    ...mapGetters("application", ["isUsermenuCollapsed"]),
    userManagementStyle() {
      return {
        "ui-element": true,
        "d-flex": true,
        "flex-row": true,
        "justify-content-around": true,
        usermanagement: true,
        usermanagementcollapsed: this.isUsermenuCollapsed,
        usermanagementexpanded: !this.isUsermenuCollapsed,
        shadow: true
      };
    }
  }
};
</script>