<template>
    <Panel :header="$t('تیکت ها')">
        <DataTable :value="data">
       
          <Column field="subject" :header="$t('موضوع')" />
          <Column field="id" :header="$t('id')" />
          <Column :field="({ createdBy }) => createdBy.name" :header="$t('کاربر')" />
          <Column field="status" :header="$t('status')" />
          <Column :field="({ createdAt }) => jDate(createdAt)" :header="$t('createdAt')" />
          <Column :header="$t('options')" headerClass="w-32">
            <template #body="{ data }">
                <div class="flex">
                    <Button
                      icon="pi pi-comments"
                      rounded
                      text
                      severity="secondary"
                      @click="chat(data)"
                    />
                  <Button icon="pi pi-times-circle" style="color: red" rounded text severity="secondary" @click="closeTicket(data)" />
              </div>
            </template>
          </Column>
          <template #empty>
            <p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
          </template>
  
        </DataTable>
      </Panel>
</template>

<script setup>
import { ref, watchEffect } from "vue";
import {useTicketsStore} from "@/stores/tickets"
import { useRouter } from "vue-router";
import {jDate} from "@/utils/jDate"
const store = useTicketsStore()
const router = useRouter()
const data = ref([])
const chat = (data) =>{
    router.push(`/tickets/${data.id}`)

}
const closeTicket = async(data) =>{
   const closess = await store.close(data.id)
  await store.index()
}
watchEffect(async() =>{
    data.value = await store.index()

     })
</script>