<template>
  <div class="JournalSmevSearchBar">
    <div class="JournalSmevSearchBar-SearchBlock">
      <q-input
        v-model="filter.search"
        dense
        outlined
        placeholder="Введите для поиска"
        @keydown.enter="executeSearch"
        @keydown.esc="filter.search = ''"
        class="JournalSmevSearchBar-Search"
      >
        <template #prepend>
          <q-icon name="pgs-search" />
        </template>
      </q-input>
      <q-btn
        icon="pgs-filter"
        class="JournalSmevSearchBar-FilterIcon"
        @click="toggleFilter"
      >
        <q-badge
          v-if="!!filterCount"
          floating
          class="JournalSmevSearchBar-FilterCount"
        >
          {{ filterCount }}
        </q-badge>
      </q-btn>
    </div>
    <q-slide-transition>
      <q-card
        class="JournalSmevSearchBar-Card"
        bordered
        flat
        v-show="filterVisible"
      >
        <q-card-section>
          <div class="JournalSmevSearchBar-InputBlock">
            <r-input label="Фамилия" v-model="filter.lastName" />
            <r-input label="Имя" v-model="filter.firstName" />
            <r-input label="Отчество" v-model="filter.middleName" />
            <r-select
              map-options
              emit-value
              v-model="filter.mzDirection"
              :options="mzDirections"
              label="Тип"
            />
            <r-select
              emit-value
              v-model="filter.mzName"
              :options="mvzGroups"
              label="Наименование ВС"
              @filter="filterFn"
            />
            <r-date-input
              label="Дата"
              :from.sync="filter.createDateFrom"
              :to.sync="filter.createDateTo"
            />
            <r-select
              v-model="filter.externalSystem"
              :options="externalSystem"
              label="ФОИВ"
              emit-value
            />
            <r-input label="СНИЛС" v-model="filter.snils" />
          </div>

          <div class="JournalSmevSearchBar-AcceptBlock">
            <q-btn
              icon="pgs-search"
              class="JournalSmevSearchBar-AcceptBtn"
              label="Применить"
              :loading="loading"
              @click="executeSearch"
            />
          </div>
        </q-card-section>
        <q-btn
          dense
          flat
          class="JournalSmevSearchBar-CloseButton"
          icon="close"
          size="10px"
          @click="resetFilter"
          label="сбросить все"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

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

.JournalSmevSearchBar {
  @include SearchBar;
}
</style>

<script lang="ts">
import {
  Component,
  Emit,
  Prop,
  ModelSync,
  Vue,
  Watch,
} from 'vue-property-decorator';

import DateApplicationInput from '@components/statements/components/date-application-input.vue';
import { JournalSmevSearchFilter } from '@/recruits/components/journal-smev/search-filter';
import { mzDirections } from './utils';
import { Option } from '@/recruits/models';
import { getDictionaryFormatedToOptions } from '@/recruits/utils';
import RInput from '@/recruits/components/common/r-input.vue';
import RSelect from '@/recruits/components/common/r-select.vue';
import RDateInput from '@/recruits/components/common/r-date-input.vue';
import {
  DictionariesElement,
  ErvuMzMonitorServiceApi,
} from '@/recruits/openapi/ervu-service';

const ERVU_MZ_MONITOR_SERVICE_API = new ErvuMzMonitorServiceApi();

@Component({
  components: {
    DateApplicationInput,
    RInput,
    RSelect,
    RDateInput,
  },
})
export default class SearchBar extends Vue {
  @ModelSync('data', 'change', { type: Object })
  filter: JournalSmevSearchFilter;

  @Prop({
    type: Boolean,
    default: false,
  })
  readonly loading: boolean;

  mzDirections = mzDirections;
  filterCount = 0;
  filterVisible = false;
  mvzGroups: DictionariesElement['value'][] = [];
  externalSystem: string[] = [];

  created(): void {
    ERVU_MZ_MONITOR_SERVICE_API.getMvzGroupsDictionary().then(({ data }) => {
      this.mvzGroups = data.map((dictionary) => dictionary.value);
    });
    ERVU_MZ_MONITOR_SERVICE_API.getExternalSystemV1().then(({ data }) => {
      this.externalSystem = data;
    });
  }

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

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

  get mzClassOptions(): Option[] {
    const dict = this.$store.getters['ervuDictionaries/typesMzClass'];
    return getDictionaryFormatedToOptions(dict);
  }

  // FIXME Функция фильтра для q-select - создать компонент q-select с инпутом
  public filtermzClassOptions: Option[] = [];
  filterFn(val: string, update: any): void {
    update(() => {
      const needle = val.toLowerCase();
      this.filtermzClassOptions = this.mzClassOptions.filter(
        (v) => v.label.toLowerCase().indexOf(needle) > -1
      );
    });
  }

  @Watch('filter', { deep: true })
  private filterChange(filter: JournalSmevSearchFilter) {
    this.filterCount = filter.countFilters();
  }

  @Emit('search')
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  executeSearch(): void {}
}
</script>
