<template>
  <Panel :header="$t('users')">
    <DataTable :value="store.items.user">
      <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>

      <template #footer>
        <Pagination :total="store.items.count" />
      </template>
    </DataTable>
  </Panel>
</template>


<script setup>
import Pagination from "@/components/Pagination.vue";
import { useUsersStore } from "@/stores/users";
import { inject, reactive, defineAsyncComponent, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";

const UserDetails = defineAsyncComponent(() =>
  import("../components/UserDetails.vue")
);

const { dialog, t } = inject("service");

const store = useUsersStore();




const show = (user) => {
  dialog.open(UserDetails, {
    props: { modal: true, closable: true, header: t("userDetails") },
    data: { user, confirm: store.confirm },
  });
};

const route = useRoute();

watchEffect(async () => {
  const { page = 1, pageSize = 10 } = route.query;
  await store.index(page, pageSize);
  const pages = await store.page();
});

</script>