<template>
  <div>
    <DefaultHeaderPage title="Emissão de Notas" :show-filter-icon="false" />

    <div class="q-px-md">
      <DefaultTable
        v-model:rows="rows"
        no-api-call
        :add-item="canAdd"
        title="Emissão de Notas"
        description="notas"
        :female="true"
        :columns="columns"
        @on-add-item="handleAddItem"
      >
        <template #body-cell-actions="{ row }">
          <q-td align="center">
            <q-btn
              outline
              icon="mdi-file-outline"
              style="width: 36px"
              @click.prevent.stop="handleView(row)"
            />
          </q-td>
        </template>
      </DefaultTable>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import { permissionStore } from "src/stores/permission";

const rows = ref([]);
const canAdd = permissionStore().getAccess("franchisor_financial", "add");

const columns = [
  { name: "nf", label: "NF", field: "nf", align: "left" },
  { name: "name", label: "Nome", field: "name", align: "left" },
  { name: "due_date", label: "Data de Vencimento", field: "due_date", align: "left" },
  { name: "value", label: "Valor", field: "value", align: "left" },
  { name: "status", label: "Status", field: "status", align: "left" },
  { name: "actions", label: "Ações", field: "actions", align: "center" },
];

const handleAddItem = () => {};
const handleView = () => {};
</script>
