<template>
  <div class="SearchBar">
    <div class="SearchBar__Flex">
      <div class="SearchBar__Flex SearchBar__Flex_Large">
        <q-input
          v-model="filter.search"
          dense
          outlined
          placeholder="Введите для поиска"
          @keydown.enter="executeSearch"
          @keydown.esc="filter.search = ''"
          class="SearchBar__Search"
        >
          <template #prepend>
            <q-icon name="pgs-search" />
          </template>
        </q-input>
        <q-btn
          icon="pgs-filter"
          class="SearchBar__FilterIcon"
          @click="toggleFilter"
        >
          <q-badge color="#015E98" floating v-if="!!filterCount">
            {{ filterCount }}
          </q-badge>
        </q-btn>
      </div>
    </div>
    <q-slide-transition>
      <q-card
        class="SearchBar SearchBar_Margin"
        bordered
        flat
        v-show="filterVisible"
      >
        <q-card-section class="SearchBar SearchBar_Padding">
          <div class="SearchBar__Line">
            <r-input
              class="SearchBar__Element"
              label="Фамилия"
              v-model="filter.lastName"
            />
            <r-input
              class="SearchBar__Element"
              label="Имя"
              v-model="filter.firstName"
            />
            <r-input
              class="SearchBar__Element"
              label="Отчество"
              v-model="filter.middleName"
            />
          </div>
          <div class="SearchBar__Line">
            <r-input
              class="SearchBar__Element SearchBar__Element_Middle"
              label="ИД ЕРН"
              v-model="filter.idERN"
            />
            <div class="SearchBar__Element SearchBar__Element_Middle">
              <r-date-input
                label="Дата рождения"
                :from.sync="filter.birthDateFrom"
                :to.sync="filter.birthDateTo"
              />
            </div>
            <r-input
              class="SearchBar__Element SearchBar__Element_Middle"
              label="СНИЛС"
              v-model="filter.snils"
            />
          </div>
          <div class="SearchBar__Line">
            <r-input
              class="SearchBar__Element SearchBar__Element_Min"
              label="Серия паспорта"
              v-model="filter.documentSeries"
            />
            <r-input
              class="SearchBar__Element SearchBar__Element_Min"
              label="Номер паспорта"
              v-model="filter.documentNumber"
            />
            <r-input
              class="SearchBar__Element SearchBar__Element_Min"
              label="Серия повестки"
              v-model="filter.subpoenaSeries"
            />
            <r-input
              class="SearchBar__Element SearchBar__Element_Min"
              label="Номер повестки"
              v-model="filter.subpoenaNumber"
            />
          </div>
          <div class="SearchBar__Flex SearchBar__Flex_End">
            <div>
              <q-btn
                icon="pgs-search"
                label="Применить"
                class="SearchBar__ActionButton"
                :loading="loading"
                @click="executeSearch"
              />
            </div>
          </div>
        </q-card-section>
        <q-btn
          dense
          flat
          class="SearchBar__CloseButton"
          icon="close"
          size="10px"
          @click="resetFilter"
          label="сбросить все"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<style lang="scss" scoped>
.SearchBar {
  font-family: 'Golos UI', sans-serif;
  &_Padding {
    padding: 10px;
  }
  &_Margin {
    margin: 10px 0;
  }
  &__Flex {
    display: flex;
    &_End {
      justify-content: flex-end;
    }
    &_Large {
      width: 100%;
    }
  }
  &__Search {
    flex: 1 1 0;
  }
  &__CloseButton {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #cf5f14;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    padding-right: 4px;
  }
  &__ActionButton {
    font-family: 'Golos UI';
    text-transform: capitalize;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 16px;
    border-radius: 24px;
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(92.91deg, #1491cf 0%, #0f68a0 100%);
    box-shadow: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
      0 3.2px 8px rgba(7, 46, 71, 0.15);
  }
  &__FilterIcon {
    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%;
    }
  }

  &__Line {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px;
  }
  &__Element {
    display: flex;
    flex-basis: 100%;

    &:not(:last-child) {
      margin-right: 8px;
    }

    &_Min {
      flex-basis: 25%;
    }
    &_Middle {
      flex-basis: 33.3333%;
    }
  }
  ::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: 0;
      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;
    }
  }
}
@media screen and (max-width: 1280px) {
  SearchBar {
    &__Line {
      display: flex;
      flex-wrap: wrap;
    }
    &__Element {
      display: flex;
      &:not(:last-child) {
        margin-right: 0;
      }
      &_Min {
        flex-basis: 100%;
      }
    }
  }
}
</style>

<script lang="ts">
import {
  Component,
  Emit,
  Prop,
  Vue,
  Watch,
} from 'vue-property-decorator';
import RDateInput from '@/recruits/components/common/r-date-input.vue';
import RadioSelect from '@/recruits/components/common/radio-select.vue';
import RInput from '@/recruits/components/common/r-input.vue';
import RMultiSelect from '@/recruits/components/common/r-multi-select.vue';
import { statusDictionary } from '@/recruits/models';
import { RecruitsFromListSearchFilter } from './recruits-from-list-search-filter';

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

  @Prop( { type: Object })
  public mainFilter: RecruitsFromListSearchFilter;

  filter = new RecruitsFromListSearchFilter();

  public filterCount = 0;
  public filterVisible = false;
  public firstName = '';
  public readonly statusOptions = [
    'vk_relocation',
    'personal_file_requested',
    'personal_file_received',
    'personal_file_extracted',
    'registration_signing',
    'registered',
  ].map((key) => ({
    label: statusDictionary[key],
    value: key,
  }));

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

  public resetFilter(): void {
    this.filter = new RecruitsFromListSearchFilter();
    this.$emit('change', this.filter)
  }

  @Watch('mainFilter', { deep: true })
  setFilterFromParent(mainFilter: RecruitsFromListSearchFilter) {
    this.filter = mainFilter;
  }

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

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

  // public handleStatusChange(statuses: Array<Option>): void {
  //   this.filter.status = statuses;
  // }
}
</script>
