<template>
  <q-btn flat no-caps dense icon="account_circle" :label="userInfo.fullName">
    <q-menu class="bar-user-menu">
      <div class="row no-wrap q-px-md q-pt-sm ">
        <div class="column items-center justify-center">
          <q-icon name="account_circle" color="grey" size="3em" />
        </div>
        <div class="column q-ml-sm overflow-hidden">
          <div class="text-subtitle1 ellipsis full-width">{{ userInfo.fullName }}</div>
          <div class="text-grey-7 ellipsis text-caption q-mb-sm full-width">{{ userInfo.email }}</div>
        </div>
      </div>
      <div class="row q-pb-sm q-px-md">
        <q-chip v-if="authStore.isSuperAdmin" square color="accent" text-color="white" icon="admin_panel_settings"
            label="システム管理者" size="sm" />
        <q-chip v-else v-for="(item) in roles" square class="role-label" color="primary" text-color="white" :key="item.id" :label="item.name" size="sm" />
      </div>
      <div class="row q-pb-sm q-px-md">
        <q-btn outline color="negative" icon="logout" label="Logout" @click="authStore.logout()" class="full-width"  size="sm" v-close-popup />
      </div>
    </q-menu>
  </q-btn>
</template>
<script setup lang="ts">
import { useAuthStore } from 'stores/useAuthStore';
import { computed } from 'vue';

const authStore = useAuthStore();

const userInfo = computed(() => authStore.userInfo);
const roles = computed(() => authStore.roles);
</script>
<style lang="scss" >
.bar-user-menu {
  max-width: 230px !important;
}
.role-label {
  margin: 2px;
}
</style>