<template>
  <DefaultTable
    v-model:rows="rows"
    :columns="columns"
    :show-search-field="true"
    :add-item="true"
    no-api-call
    add-item-label="Gerar Cobranças"
    @on-add-item="onAddItem"
  >
    <template #top>
      <DefaultInput
        v-model="monthYearDisplay"
        label="Filtrar Mês e Ano"
        dense
        readonly
        clearable
        style="min-width: 180px"
        @clear="onClearMonthYear"
      >
        <template #append>
          <q-icon name="mdi-calendar" class="cursor-pointer">
            <q-popup-proxy
              cover
              transition-show="scale"
              transition-hide="scale"
            >
              <q-date
                v-model="monthYear"
                mask="MM/YYYY"
                emit-immediately
                default-view="Months"
                @update:model-value="onMonthYearSelect"
              >
                <div class="row items-center justify-end">
                  <q-btn v-close-popup label="OK" color="primary" flat />
                </div>
              </q-date>
            </q-popup-proxy>
          </q-icon>
        </template>
      </DefaultInput>
    </template>

    <template #body-cell-tbr_value="{ row }">
      <q-td>{{ formatToBRLCurrency(row.tbr_value) }}</q-td>
    </template>

    <template #body-cell-royalties_value="{ row }">
      <q-td>{{ formatToBRLCurrency(row.royalties_value) }}</q-td>
    </template>

    <template #body-cell-fnm_value="{ row }">
      <q-td>{{ formatToBRLCurrency(row.fnm_value) }}</q-td>
    </template>

    <template #body-cell-maintenance_value="{ row }">
      <q-td>{{ formatToBRLCurrency(row.maintenance_value) }}</q-td>
    </template>

    <template #body-cell-total="{ row }">
      <q-td>{{ formatToBRLCurrency(row.total) }}</q-td>
    </template>

    <template #body-cell-actions>
      <q-td align="center">
        <q-btn flat round dense icon="mdi-eye-outline" size="sm" />
      </q-td>
    </template>
  </DefaultTable>
</template>

<script setup>
import { ref } from "vue";
import { useQuasar } from "quasar";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import DefaultInput from "src/components/defaults/DefaultInput.vue";
import GenerateBillingsDialog from "src/pages/tbr/components/GenerateBillingsDialog.vue";
import { formatToBRLCurrency } from "src/helpers/utils";

const $q = useQuasar();
const rows = ref([
  {
    id: 1,
    unit_name: "Foz do Iguaçu",
    royalties_value: 648.4,
    royalties_rule: "FIXO 40%",
    fnm_value: 324.2,
    fnm_rule: "FIXO 20%",
    maintenance_value: 486.3,
    total: 1458.9,
  },
]);
const monthYear = ref(null);
const monthYearDisplay = ref(null);

const columns = [
  { name: "id", label: "ID", field: "id", align: "left" },
  { name: "unit_name", label: "Unidade", field: "unit_name", align: "left" },
  {
    name: "royalties_value",
    label: "Royalties",
    field: "royalties_value",
    align: "left",
  },
  {
    name: "royalties_rule",
    label: "Regra",
    field: "royalties_rule",
    align: "left",
  },
  { name: "fnm_value", label: "FNM", field: "fnm_value", align: "left" },
  { name: "fnm_rule", label: "Regra", field: "fnm_rule", align: "left" },
  {
    name: "maintenance_value",
    label: "Manutenção",
    field: "maintenance_value",
    align: "left",
  },
  { name: "total", label: "Total", field: "total", align: "left" },
  { name: "actions", label: "Ações", field: "actions", align: "center" },
];

function onMonthYearSelect(value) {
  if (!value) return;
  monthYearDisplay.value = value;
}

function onClearMonthYear() {
  monthYear.value = null;
  monthYearDisplay.value = null;
}

function onAddItem() {
  $q.dialog({ component: GenerateBillingsDialog }).onOk(() => {
    // TODO: reload billings after generation
  });
}
</script>
