<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="notifyUnavailable"
      >
        <template #body-cell-actions="{ row }">
          <q-td align="center">
            <q-btn outline icon="mdi-file-outline" style="width: 36px" @click.stop="viewInvoice(row)" />
          </q-td>
        </template>
      </DefaultTable>
    </div>
  </div>
</template>

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

const $q = useQuasar();
const rows = ref([]);
const canAdd = permissionStore().getAccess("franchisee_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: null, align: "center" },
];
const notifyUnavailable = () => $q.notify({ type: "info", message: "Emissão fiscal ainda não configurada para esta unidade." });
const viewInvoice = (row) => row.url && window.open(row.url, "_blank");
</script>
