<template>
    <q-btn-dropdown
      color="primay"
      push
      flat
      no-caps
      icon="share"
      size="md"
      :label="userStore.currentDomain.domainName"
    >
      <q-list>
        <q-item v-for="domain in domains" :key="domain.domainName"
          clickable v-close-popup @click="onItemClick(domain)">
          <q-item-section side>
            <q-icon name="share" size="sm" color="orange" text-color="white"></q-icon>
          </q-item-section>
          <q-item-section>
            <q-item-label>{{domain.domainName}}</q-item-label>
            <q-item-label caption>{{domain.kintoneUrl}}</q-item-label>
          </q-item-section>
        </q-item>
      </q-list>
    </q-btn-dropdown>

</template>
<script setup lang="ts" >
import { IDomainInfo } from 'src/types/ActionTypes';
import { useAuthStore,IUserState } from 'stores/useAuthStore';
import { ref } from 'vue';
const userStore = useAuthStore();
const domains = ref<IDomainInfo[]>([]);
(async ()=>{
  domains.value = await userStore.getUserDomains();
})();

const onItemClick=(domain:IDomainInfo)=>{
  console.log(domain);
  userStore.setCurrentDomain(domain);
}
</script>
<style lang="scss">

</style>
