<template>
  <q-table
    class="sales-summary"
    :rows="props.rows"
    :columns="props.columns"
    :rows-per-page-options="[0, 10, 20, 50, 100]"
    :pagination="{ rowsPerPage: 10 }"
    :filter="props.filter"
  >
    <template v-slot:top-left>
      <q-input
        borderless
        dense
        debounce="300"
        v-model="props.filter"
        placeholder="Filter"
      >
        <template v-slot:prepend>
          <q-icon name="filter_alt" />
        </template>
      </q-input>
    </template>

    <template v-slot:body-cell-deltasales="props">
      <q-td :props="props">
        <div v-if="props.row.deltasales < 0" class="text-red-10 text-bold">
          {{ globalStore.toCurrency(props.row.deltasales) }}
        </div>
        <div v-else>
          {{ globalStore.toCurrency(props.row.deltasales) }}
        </div>
      </q-td>
    </template>
    <template v-slot:body-cell-deltapercent="props">
      <q-td :props="props">
        <div v-if="props.row.deltapercent < 0" class="text-red-10 text-bold">
          {{ props.row.deltapercent + '%' }}
        </div>
        <div v-else>
          {{ props.row.deltapercent + '%' }}
        </div>
      </q-td>
    </template>
  </q-table>
</template>

<script setup lang="ts">
const globalStore = window.PiniaStores.useGlobalStore();
const props = defineProps(['rows', 'columns', 'filter']);
</script>
