<template>
  <div class="q-pa-md">
    <DefaultTable
      ref="tableRef"
      :columns="columns"
      :api-call="loadContracts"
      :show-search-field="true"
      :add-item="false"
      :female="false"
      title="Contratos"
      description="Contratos"
    >
      <template #body-cell-contract_dates="{ row }">
        <q-td
          >{{ formatDateYMDtoDMY(row.start_date) }} -
          {{ formatDateYMDtoDMY(row.end_date) }}</q-td
        >
      </template>

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

      <template #body-cell-royalties="{ row }">
        <q-td>
          {{
            row.tbr_fixed_value_percentage != null
              ? `${(row.tbr_fixed_value_percentage * 100).toFixed(2)}%`
              : "-"
          }}
        </q-td>
      </template>

      <template #body-cell-fnm="{ row }">
        <q-td>
          {{
            row.marketing_fund_percentage != null
              ? `${(row.marketing_fund_percentage * 100).toFixed(2)}%`
              : "-"
          }}
        </q-td>
      </template>

      <template #body-cell-maintenance="{ row }">
        <q-td>
          {{
            row.maintance_tax_percentage != null
              ? `${(row.maintance_tax_percentage * 100).toFixed(2)}%`
              : "-"
          }}
        </q-td>
      </template>

      <template #body-cell-inhabitant_classification="{ row }">
        <q-td>{{ row.inhabitant_classification?.description ?? "-" }}</q-td>
      </template>

      <template #body-cell-actions="{ row: contract }">
        <q-td align="center">
          <q-btn
            flat
            round
            dense
            icon="mdi-eye-outline"
            @click="openViewDialog(contract)"
          />
        </q-td>
      </template>
    </DefaultTable>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from "vue";
import { useQuasar } from "quasar";
import DefaultTable from "src/components/defaults/DefaultTable.vue";
import { getFranchiseeContractsByUnit } from "src/api/franchisee_contract";
import { formatDateYMDtoDMY, formatToBRLCurrency } from "src/helpers/utils";

const props = defineProps({
  unitId: {
    type: Number,
    default: null,
  },
});

const $q = useQuasar();

const tableRef = ref(null);

const ViewContractDialog = defineAsyncComponent(
  () => import("src/pages/unit/components/ViewContractDialog.vue"),
);

const loadContracts = () => getFranchiseeContractsByUnit(props.unitId);

function openViewDialog(contract) {
  $q.dialog({
    component: ViewContractDialog,
    componentProps: { unitId: props.unitId, contract },
  });
}

const columns = [
  {
    name: "protocol",
    label: "Contrato",
    field: "protocol",
    align: "left",
  },
  {
    name: "contract_dates",
    label: "Data Inicial - Final",
    field: "start_date",
    align: "left",
  },
  {
    name: "tbr_fixed_value",
    label: "TBR",
    field: "tbr_fixed_value",
    align: "left",
  },
  {
    name: "royalties",
    label: "Royalties",
    field: "tbr_fixed_value_percentage",
    align: "left",
  },
  {
    name: "fnm",
    label: "FNM",
    field: "marketing_fund_percentage",
    align: "left",
  },
  {
    name: "maintenance",
    label: "Taxa de Manutenção",
    field: "maintance_tax_percentage",
    align: "left",
  },
  {
    name: "inhabitant_classification",
    label: "Faixa de Habitantes",
    field: "inhabitant_classification",
    align: "left",
  },
  {
    name: "actions",
    label: "Ações",
    field: "actions",
    align: "center",
  },
];
</script>
