<template>
        <Panel :header="$t('سوالات متداول')">
          <template #icons>
            <Button
              icon="pi pi-plus"
              :label="$t('ایجاد آیتم جدید')"
              severity="success"
              @click="create()"
            />
          </template>
          <DataTable :value="store.items">
  
            <Column field="title" :header="$t('title')" />

            <Column :header="$t('options')" headerClass="w-32">
              <template #body="{ data }">
                <div class="flex justify-end">
                  <Button icon="pi pi-eye" rounded text severity="secondary" @click="show(data)" />
   
                
                  <Button
                  @click="remove(data)"
                    icon="pi pi-trash"
                    rounded
                    text
                    severity="danger"
                    :loading="removing"
            
                  />
                </div>
              </template>
            </Column>
 
            <template #empty>
              <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
            </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 { defineAsyncComponent, inject, ref, watchEffect } from "vue";
import { useFaqStore } from "@/stores/faq";
const store = useFaqStore();
const { dialog, t } = inject('service');
const FaqDetails = defineAsyncComponent(() => import('../components/FaqDetails.vue'));
const AddFaq = defineAsyncComponent(() => import('../components/AddFaq.vue'));
const removing = ref(false)
const show = (product) => {
    dialog.open(FaqDetails, {
        props: { modal: true, closable: true, header: t('جزئیات آیتم') },
        data: {
            product
        }
    });
}
const create = () =>{
    dialog.open(AddFaq, {
        props: { modal: true, closable: true, header: t('ایجاد آیتم جدید') },
    });
}
const remove = async (item) => {
    removing.value = true
   const {data} = await store.remove(item.id)
   removing.value = false
await store.index()
};
watchEffect(async() =>{
await store.index()

})
</script>