<template lang="">
  <div
    class="tableOptions__filters"
    style="height: 100%; max-height: 0px"
  >
    <div class="tableOptions__filtersContainer column wrap content-start">
      <div
        v-for="(filter, i) in tableFilters"
        :key="i"
        class="filterInput"
      >
        <q-input
          v-model="tableFilters[i].value"
          clearable
          outlined
          dense
          :type="filter.type"
          :label="filter.label"
          v-bind="filter"
          @update:model-value="emit('updateTableFilters')"
          @focus="currentInput = $event.target"
          @blur="currentInput = null"
          @keyup.enter="hideKeyboard"
        />
        <q-btn
          color="error"
          square
          icon="close"
          @click="deleteFilter(filter)"
        />
      </div>
      <q-btn
        :label="$t('addFilter')"
        class="addFilterBtn bg-k-primary "
        outline
        @click="add = true"
      />
      <q-dialog
        v-model="add"
        persistent
      >
        <q-card style="min-width: 350px">
          <q-card-section>
            <div class="text-h6">
              {{ $t("columnToFilter") }}
            </div>
          </q-card-section>

          <q-select
            v-model="columnSelected"
            :options="columns"
            :label="$t('column')"
            filled
          />

          <q-card-actions
            align="right"
            class="text-primary"
          >
            <q-btn
              v-close-popup
              flat
              label="Cancel"
            />
            <q-btn
              v-close-popup
              flat
              label="Añadir Filtro"
              @click="addFilter()"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const emit = defineEmits('updateTableFilters')
const currentInput = ref(null)

</script>
<style>
</style>
