<template>
  <div>
    <DefaultHeaderPage title="Franqueados" :show-filter-icon="false" />

    <div class="q-px-sm">
      <DefaultTable
        title="Lista de Unidades"
        description="unidades"
        :female="false"
        :columns
        add-item
        open-item
        open-item-route="UnitEditPage"
        :api-call="getUnits"
        :delete-function="deleteUnit"
        add-item-route="UnitAddPage"
      />
    </div>
  </div>
</template>

<script setup>
import { getUnits, deleteUnit } from "src/api/unit";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import { formatDateYMDtoDMY, formatUnitName } from "src/helpers/utils";
import { ref } from "vue";

const columns = ref([
  {
    name: "name",
    label: "Unidade",
    field: (row) => formatUnitName(row),
    align: "left",
    sortable: true,
  },
  {
    name: "name_responsible",
    label: "Responsável",
    field: "name_responsible",
    align: "left",
    sortable: true,
  },
  {
    name: "location",
    label: "Cidade / Estado",
    field: (row) =>
      row.city && row.state ? `${row.city.name} / ${row.state.code}` : "—",
    align: "left",
  },
  {
    name: "phone_number",
    label: "Telefone",
    field: "phone_number",
    align: "left",
  },
  {
    name: "email",
    label: "E-mail",
    field: "email",
    align: "left",
  },
  {
    name: "created_at",
    label: "Cadastrado em",
    field: "created_at",
    format: (val) => formatDateYMDtoDMY(val),
    align: "left",
    sortable: true,
  },
  {
    name: "actions",
    label: "Ações",
    field: null,
    align: "center",
  },
]);
</script>
