<template>
  <div class="recruits-search-bar q-gutter-y-md">
    <div class="row no-wrap q-mb-sm">
      <div class="col-grow flex">
        <q-input
          v-model="filter.search"
          dense
          outlined
          placeholder="Введите для поиска"
          @keydown.enter="executeSearch"
          @keydown.esc="filter.search = ''"
          class="q-pr-xs"
          style="flex: 1"
        >
          <template #prepend>
            <q-icon name="pgs-search" />
          </template>
        </q-input>
        <q-btn icon="pgs-filter" class="filter-icon" @click="toggleFilter">
          <q-badge color="#015E98" floating v-if="!!filterCount">
            {{ filterCount }}
          </q-badge>
        </q-btn>
      </div>
    </div>
    <q-slide-transition>
      <q-card bordered flat v-show="filterVisible" style="margin-top: 0">
        <q-card-section class="SearchBar">
          <div class="SearchBar-Line">
            <r-input
              class="SearchBar-Line__Element"
              label="Фамилия"
              v-model="filter.lastName"
            />
            <r-input
              class="SearchBar-Line__Element"
              label="Имя"
              v-model="filter.firstName"
            />
            <r-input
              class="SearchBar-Line__Element"
              label="Отчество"
              v-model="filter.middleName"
            />
          </div>
          <div class="SearchBar-Line">
            <r-input
              class="SearchBar-Line__Element"
              label="ИД ЕРН"
              v-model="filter.idERN"
            />
            <r-date-input
              class="SearchBar-Line__Element"
              label="Дата рождения"
              :from.sync="filter.birthDateFrom"
              :to.sync="filter.birthDateTo"
            />
          </div>
          <div class="SearchBar-Line">
            <r-input
              class="SearchBar-Line__Element"
              label="Номер"
              v-model="filter.number"
            />
            <r-select
              map-options
              emit-value
              class="SearchBar-Line__Element"
              label="Поставщик"
              :options="incidentProviderOptions"
              v-model="filter.sourceCode"
            />
          </div>
          <div class="SearchBar-Line">
            <r-date-input
              class="SearchBar-Line__Element"
              label="Дата регистрации"
              :from.sync="filter.registeredDateFrom"
              :to.sync="filter.registeredDateTo"
            />
            <r-status-select
              class="SearchBar-Line__Element"
              label="Статус"
              :dictionary-path="dictionaryPath"
              :statuses="statuses"
              v-model="filter.statuses"
            />
          </div>
          <div class="row">
            <div class="col-12">
              <div class="float-right q-gutter-sm">
                <q-btn
                  icon="pgs-search"
                  class="redesigned-action-btn text-capitalize"
                  label="Применить"
                  :loading="loading"
                  @click="executeSearch"
                />
              </div>
            </div>
          </div>
        </q-card-section>
        <q-btn
          dense
          flat
          class="absolute-top-right close-button q-pr-xs"
          icon="close"
          size="10px"
          @click="resetFilter"
          label="сбросить все"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<style lang="scss" scoped>
.recruits-search-bar {
  .close-button {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #cf5f14;
  }

  .filter-icon {
    color: #1491cf;
    border-radius: 24px;

    ::v-deep .q-badge {
      top: 2px;
      right: 10px;
      font-family: 'Golos Text', sans-serif;
      font-style: normal;
      font-weight: 600;
      font-size: 10px;
      line-height: 12px;
      letter-spacing: 0.05em;
      border-radius: 50%;
    }
  }

  .golos-label {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 10px;
    line-height: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    overflow: hidden;
  }

  ::v-deep {
    > .q-card {
      background: #eef2f6;
      border: 1px solid rgba(1, 72, 116, 0.11);
      border-radius: 0 0 8px 8px;
      .q-field--focused .q-field__control {
        background: #ffffff !important;
        box-shadow: inset 0 0 2px rgba(15, 104, 160, 0.87);
        border-bottom: 1px solid #1487cf;
        border-radius: 4px 4px 0 0;
      }

      .q-field__control {
        background: #e5edf5 !important;
        //color: rgba(2, 12, 18, 0.7);
      }
    }

    .q-field:not(.q-field--focused) {
      .q-field__control {
        border-bottom: 1px solid rgba(1, 72, 116, 0.18);
      }
    }

    .q-field--outlined .q-field__control:before {
      border: none;
    }

    .q-field__control {
      font-family: 'Golos Text', sans-serif;
      background: #e9f1f8 !important;
      color: #1491cf;
      background-blend-mode: multiply;
      border-radius: 0px;
      border-bottom: 1px solid #e9f1f8; // такой же толщены что бы не прыгало при фокусе
    }

    .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;
    }
  }
}
.SearchBar {
  padding: 8px 18px;
  &-Line {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    &__Element {
      flex-basis: 100%;
      &:not(:last-child) {
        margin-right: 8px;
      }
      &__Min {
        flex-basis: 25%;
      }
    }
  }
}
@media screen and (max-width: 1280px) {
  .SearchBar {
    &-Line {
      &__Element {
        &:not(:last-child) {
          margin-right: 0;
        }
        &__Min {
          flex-basis: 100%;
        }
      }
      flex-wrap: wrap;
    }
  }
}
</style>

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

import MultiSelect from '@components/statements/components/multi-select.vue';
import DateApplicationInput from '@components/statements/components/date-application-input.vue';
import RadioSelect from '@/recruits/components/common/radio-select.vue';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';
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 RStatusSelect from '@/recruits/components/common/r-status-select.vue';
import { Option } from '@/recruits/models';
import { DictionariesElement } from '@/recruits/openapi/ervu-service';

@Component({
  components: {
    RStatusSelect,
    RDateInput,
    RInput,
    RSelect,
    DateApplicationInput,
    MultiSelect,
    RadioSelect,
  },
})
export default class SearchBar extends Vue {
  @Prop({
    type: Boolean,
    default: false,
  })
  public readonly loading: boolean;

  dictionaryPath = 'ervuDictionaries/incidentsStatusesDictionary';

  hiddenStatuses = ['6', '7', '1000'];

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

  public filterCount = 0;
  public filterVisible = false;
  public incidentProvider: string | null = null;

  public toggleFilter() {
    this.filterVisible = !this.filterVisible;
  }

  public resetFilter() {
    this.filter = new SearchFilterUtils();
  }

  get incidentProviderOptions(): Option[] {
    const options = (
      this.$store.getters['ervuDictionaries/incidentsSource'] || []
    ).map(({ code, value }: DictionariesElement) => {
      return {
        label: value,
        value: code,
      };
    });
    return [
      ...options,
    ];
  }

  get statuses(): Array<string> {
    const dictionary = this.$store.getters['ervuDictionaries/incidentsStatusesDictionary'];
    const statuses = dictionary ? Object.keys(dictionary) : [];
    return statuses.filter((status) => !this.hiddenStatuses.includes(status));
  }

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

    // if (this.filter.incidentProvider && this.filter.incidentProvider !== this.incidentProvider) {
    //   this.incidentProvider = this.filter.incidentProvider
    // }
  }

  // @Watch('incidentProvider')
  // private incidentProviderChange(value: number) {
  //   this.filter.incidentProvider = value.toString();
  // }

  @Emit('search')
  public executeSearch() {
    //
  }
}
</script>
