<template>
  <div class="q-gutter-y-md">
    <q-input
      v-model="filter.search"
      dense
      filled
      debounce="1000"
      placeholder="Номер заявления"
      @input="onSearchUpdate"
      @keydown.enter="onSearchUpdate"
      @keydown.esc="filter.search = ''"
    >
      <template #prepend>
        <q-icon name="search" />
      </template>
      <template #append>
        <q-btn dense flat icon="settings" round @click="toggleExpand" />
      </template>
    </q-input>

    <q-slide-transition>
      <q-card bordered flat v-show="expanded">
        <q-card-section>
          <x-date-range
            :from.sync="filter.dateFrom"
            :to.sync="filter.dateTo"
            @input="$emit('updateFilter', filter)"
          />
        </q-card-section>
        <q-btn
          dense
          flat
          class="absolute-top-right"
          color="grey-7"
          icon="close"
          size="10px"
          @click="resetFilter"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<script lang="ts">
import XDateRange from '@components/statements/components/x-date-range.vue';
import { Component, PropSync, Vue } from 'vue-property-decorator';
import { TableFilter } from '@models/base/TableFilter';

@Component({
  components: {
    XDateRange,
  },
})
export default class SearchBar extends Vue {
  @PropSync('tableFilter', { type: Object }) filter!: TableFilter;
  expanded = false;

  toggleExpand(): void {
    this.expanded = !this.expanded;
  }

  onSearchUpdate(search: string) {
    this.$set(this.filter.pagination, 'page', 0);
    this.$emit('search', search);
  }

  resetFilter(): void {
    this.filter.dateTo = undefined;
    this.filter.dateFrom = undefined;
    this.$emit('updateFilter', this.filter);
  }
}
</script>

<style lang="sass">
.m-search-bar .q-field__control-container > .q-field__native.row.items-center > span
  white-space: nowrap
  text-overflow: ellipsis
  overflow: hidden

.m-search-bar
  justify-content: space-between
  background: white
  //#F2F2F2
  color: #757575
</style>
