<script setup lang="ts">
import { ref } from 'vue'
import KeyCloakService from '@/services/KeyCloakService'
const dropdownOpen = ref<boolean>(false)
const accountName = ref<string>()

accountName.value = KeyCloakService.GetUserName()
</script>

<template>
  <div
    @click="() => (dropdownOpen = !dropdownOpen)"
    class="row q-px-md cursor"
    id="app-toolbar-title"
  >
    <div class="col">
      <q-avatar>
        <img :src="`https://cdn.quasar.dev/img/avatar1.jpg`" />
      </q-avatar>
    </div>

    <div class="cow">
      <div class="row q-pl-sm">
        <span class="text-body1">
          {{ accountName }}
        </span>
      </div>
      <div class="row q-pl-sm">
        <span class="text-caption text-grey"> เจ้าหน้าที่ </span>
      </div>
    </div>
  </div>
  <q-btn-dropdown stretch flat v-model="dropdownOpen">
    <q-list>
      <q-item
        clickable
        v-close-popup
        tabindex="0"
        @click="
          () => {
            KeyCloakService.CallLogOut()
          }
        "
      >
        <q-item-section avatar>
          <q-avatar icon="logout" color="primary" text-color="white" caption>
          </q-avatar>
        </q-item-section>
        <q-item-section>
          <q-item-label>Logout</q-item-label>
        </q-item-section>
      </q-item>
      <q-separator inset spaced></q-separator>
    </q-list>
  </q-btn-dropdown>
</template>

<style lang="scss" scoped>
.cursor {
  cursor: pointer;
}
</style>
