<script setup>
import dayjs from "dayjs";
const supabase = useSupabaseClient()
const profileStore = useProfileStore()
const router = useRouter()

const tickets = ref([])

const setup = async () => {
  if(profileStore.currentTenant === 5) {
    tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*), tenant(*)")).data
  } else {
    tickets.value = (await supabase.from("tickets").select("*,created_by(*), ticketmessages(*)").eq("tenant",profileStore.currentTenant)).data
  }
}

setup()

</script>

<template>
  <UDashboardNavbar
    title="Suport Tickets"
  >
    <template #right>
      <UButton
        @click="router.push('/support/create')"
      >
        + Ticket
      </UButton>
    </template>
  </UDashboardNavbar>
  <UTable
    :rows="tickets"
    :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: `Keine Tickets anzuzeigen` }"
    @select="(i) => router.push(`/support/${i.id}`)"
    :columns="[{key:'created_at',label:'Datum'}, ...profileStore.currentTenant === 5 ? [{key:'tenant',label:'Tenant'}] : [],{key:'title',label:'Titel'},{key:'created_by',label:'Ersteller'},{key:'ticketmessages',label:'Nachrichten'}]"
  >
    <template #tenant-data="{ row }">
     {{row.tenant.name}}
    </template>
    <template #created_by-data="{ row }">
     {{row.created_by.fullName}}
    </template>
    <template #created_at-data="{ row }">
     {{dayjs(row.created_at).format('DD.MM.YYYY HH:mm')}}
    </template>
    <template #ticketmessages-data="{ row }">
     {{row.ticketmessages.length}}
    </template>
  </UTable>
</template>

<style scoped>

</style>