<template>
  <Panel :header="$t('comments')">
    <DataTable :value="store.items.courses">
      <Column class="w-16" :header="$t('image')">
        <template #body="{ data: { image } }">
          <Avatar
            :image="image"
            size="large"
            shape="circle"
            class="transition-transform hover:scale-150"
          />
        </template>
      </Column>
      <Column field="name" :header="$t('name')" />
      <Column
        :field="({ categories }) => categories[0].name"
        :header="$t('category')"
      />

      <Column :field="({ price }) => numberFormat(price)" :header="$t('price')" />
      <Column
        :field="({ createdAt }) => jDate(createdAt)"
        :header="$t('createdAt')"
        class="w-28"
      />
      <Column
        :field="({ updatedAt }) => jDate(updatedAt)"
        :header="$t('updatedAt')"
        class="w-32 text-center"
      />
      <Column field="averageRating" :header="$t('امتیاز')" />

      <Column :header="$t('مشاهده نظرات')" 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>

    <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>
  </Panel>
</template>
  
  <script setup>
import { useProductsStore } from "@/stores/products";
import { jDate } from "@/utils/jDate";
import { numberFormat } from "@/utils/numberFormat";
import {

  inject,
  watchEffect,
} from "vue";
import { useRoute, useRouter } from "vue-router";


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


const router = useRouter();
const show = (data) => {
  router.push(`/comments/${data._id}`);
};

const store = useProductsStore();
const route = useRoute();
const edit = (data) => {
  router.push(data._id);
};

const remove = (data) => {
  confirm.require({
    message: t("Are you sure you want to proceed?"),
    header: t("Danger Zone"),
    icon: "pi pi-info-circle",
    acceptClass: "p-button-danger p-button-sm",
    rejectClass: "p-button-secondary p-button-outlined p-button-sm",
    rejectLabel: t("cancel"),
    acceptLabel: t("beOmitted"),
    defaultFocus: "reject",
    accept: async () => {
      const deleted = await store.delete(data._id);
      await store.index();
    },
  });
};

watchEffect(async () => {
  const { page = 1, pageSize = 10 } = route.query;
  await store.index(page, pageSize);
  console.log(store);
});
</script>
  
