<script setup>
import {onMounted, ref} from 'vue';
import TicketApi from "@/servives/TicketApi.js";
import {format, formatDistance} from "date-fns";
import {fr} from 'date-fns/locale';

import {Grid, html} from "gridjs";

const gridWrapper = ref(null)

const grid = new Grid({
  columns: [
    {
      name: 'Fiche',
      formatter: (cell) => `N° ${cell}`
    },
    {
      name: 'Date de création',
      formatter: (cell) => format(new Date(cell), 'dd/MM/yyyy HH:mm:ss')
    }, {
      name: 'Origine',
      formatter: (cell, row) => html(`${cell} <br/> ${row.cells[3].data}`)

    },
    {name: 'Origine 2', hidden: true},
    {
      name: 'Voir',
      formatter: (cell, row) => html('<a href="#" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\' });window.location=\'#\';Affaire(\'11\',\'0\',\'' + cell.id_last_event + '\',\'' + cell.id + '\',\'4\',\'see\')"><i class="fa-solid fa-eye"></i></a>')
    },
    {
      name: 'Attribuer à',
      formatter: (cell, row) => {
        return html('<a href="#" style="text-decoration: none" onclick="$(\'#11\').css({\'left\':\'0\',\'display\':\'block\',\'z-index\':\'1\'});window.location=\'#\';Affaire(\'11\',\'0\',\'' + row.cells[4].data.id_last_event + '\',\'' + row.cells[4].data.id + '\',\'4\',\'see\')"<i class="fa-solid fa-hand-point-down"></i></a>')
      }
    },
    {
      name: 'Depuis',
      formatter: (cell) => formatDistance(new Date(cell), new Date(), {addSuffix: true, locale: fr})
    }, 'Interlocuteur'],
  server: {
    url: '/App/api.php?prj=pharmamp',
    then: data => data.list.map(ticket =>
        [ticket.code, ticket.datetime, ticket.filter1, ticket.filter2, ticket, ticket.advisor, ticket.datetime, ticket.first_name + ' ' + ticket.last_name]
    )
  },
  sort: true,
  pagination: {
    limit: 10,
    summary: false
  }

});

onMounted(() => {
  grid.render(gridWrapper.value)
})

</script>

<template>
  <div ref="gridWrapper"></div>
</template>

<style scoped>

</style>
