<template>
  <div class="AnalyticalUnits">
    <div class="AnalyticalUnits-SearchBlock">
      <div class="AnalyticalUnits-Search" />
      <q-btn
        class="AnalyticalUnits-FilterIcon"
        icon="pgs-filter"
        @click="toggleFilter"
      >
        <q-badge
          v-if="!!filterCount"
          class="AnalyticalUnits-FilterCount"
          floating
        >
          {{ filterCount }}
        </q-badge>
      </q-btn>
    </div>
    <q-slide-transition>
      <q-card
        v-show="filterVisible"
        bordered
        class="AnalyticalUnits-Card"
        flat
      >
        <q-card-section>
          <div class="AnalyticalUnits-InputBlock">
            <r-date-input
              :from.sync="filter.dateFrom"
              :to.sync="filter.dateTo"
              label="Дата события"
            />
          </div>
          <div class="AnalyticalUnits-AcceptBlock">
            <q-btn
              :loading="loading"
              class="AnalyticalUnits-AcceptBtn"
              icon="pgs-search"
              label="Применить"
              @click="executeSearch"
            />
          </div>
        </q-card-section>
        <q-btn
          class="AnalyticalUnits-CloseButton"
          dense
          flat
          icon="close"
          label="сбросить все"
          size="10px"
          @click="resetFilter"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<style lang="scss" scoped>
@import '@/recruits/assets/styles/mixins/search-bar.mixin.scss';

.AnalyticalUnits {
  @include SearchBar;
}
</style>
<script lang="ts">
import {
  Component,
  Emit,
  Prop,
  ModelSync,
  Vue,
  Watch,
} from 'vue-property-decorator';

import { AnalyticalUnitsFilter } from './search-filter';
import RDateInput from '@/recruits/components/common/r-date-input.vue';

@Component({
  components: {
    RDateInput,
  },
})
export default class SearchBar extends Vue {
  @Prop({
    type: Boolean,
    default: false,
  })
  readonly loading: boolean;

  @ModelSync('data', 'change', { type: Object })
  filter: AnalyticalUnitsFilter;

  filterCount = 0;
  filterVisible = false;

  toggleFilter(): void {
    this.filterVisible = !this.filterVisible;
  }

  resetFilter(): void {
    this.filter = new AnalyticalUnitsFilter();
  }

  @Emit('search')
  executeSearch(): void {
    //
  }

  @Watch('filter', { deep: true })
  private filterChange(filter: AnalyticalUnitsFilter) {
    this.filterCount = filter.countFilters();
  }
}
</script>
