<template>
    <Panel :header="$t('admins')">
        <DataTable :value="admins">
          <Column class="w-16">
            <template #body="{ data: { avatarMedia } }">
              <Avatar
                :image="avatarMedia"
                size="large"
                shape="circle"
                class="transition-transform hover:scale-150"
              />
            </template>
          </Column>
          <Column field="name" :header="$t('name')" />
          <Column field="id" :header="$t('id')" />
          <Column field="phone" :header="$t('phoneNumber')" />
          <Column field="statusText" :header="$t('status')" />
          <Column field="userName" :header="$t('username')" />
          <Column headerClass="w-32">
            <template #body="{ data }">
              <div class="flex justify-end">
                <Button
                  icon="pi pi-eye"
                  rounded
                  text
                  severity="secondary"
                  @click="show(data)"
                />
              </div>
            </template>
          </Column>
          <template #empty>
            <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
          </template>
        </DataTable>
      </Panel>
</template>
<script setup>
import { useUsersStore } from "@/stores/users";
import { inject, defineAsyncComponent, ref, watchEffect, watch } from "vue";
const store = useUsersStore();
const admins = ref()
const UserDetails = defineAsyncComponent(() =>
  import("../components/UserDetails.vue")
);
const { dialog, t } = inject("service");


const show = (user) => {
  dialog.open(UserDetails, {
    props: { modal: true, closable: true, header: t("userDetails") },
    data: { user, confirm: store.confirm },
  });
};
watchEffect(async () => {
  await store.index();
   admins.value = store.items.user.filter(item => item.roles[1] === 'Admin' );
});
watch(admins, async()=>{
  await store.index();
   admins.value = store.items.user.filter(item => item.roles[1] === 'Admin' );
})
</script>