<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.series"
              :mask="maskSeries"
            />
            <r-input
              class="SearchBar__Element"
              label="Номер повестки"
              v-model="filter.number"
              :mask="maskNumber"
            />
            <r-input
              class="SearchBar__Element"
              label="ИД ЕРН"
              v-model="filter.idERN"
            />
          </div>
          <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-status-select
              class="SearchBar__Element SearchBar__Element_Middle SearchBar__Element_Column"
              :statuses="reasonOptions"
              :dictionary-path="REASON_STATUSES"
              label="Причина вызова"
              v-model="filter.causes"
            />
            <r-status-select
              class="SearchBar__Element SearchBar__Element_Middle SearchBar__Element_Column"
              :statuses="statusOptions"
              :dictionary-path="SUBPOENA_STATUSES"
              label="Статус"
              v-model="filter.statuses"
            />
          </div>
          <div class="SearchBar__Line">
            <r-date-input
              class="SearchBar__Element SearchBar__Element_Middle"
              label="Дата явки"
              :from.sync="filter.turnoutDateFrom"
              :to.sync="filter.turnoutDateTo"
            />
            <r-date-input
              class="SearchBar__Element SearchBar__Element_Middle"
              label="Дата рождения гражданина"
              :from.sync="filter.birthDateFrom"
              :to.sync="filter.birthDateTo"
            />
          </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%;
    }
    &_Column {
      flex-direction: column;
      max-width: 50%;
    }
  }
  ::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;
    }
  }
}
</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 RInput from '@/recruits/components/common/r-input.vue';
import RDateInput from '@/recruits/components/common/r-date-input.vue';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';
import RStatusSelect from '@/recruits/components/common/r-status-select.vue';

const FILTER_STATUS_TYPE = ['3.7', '3.13'];

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

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

  public filterCount = 0;
  public filterVisible = false;

  SUBPOENA_STATUSES = 'ervuDictionaries/subpoenaStatusDictionary';
  REASON_STATUSES =
    'ervuDictionaries/militaryRegistrationUpdatingGoalsDictionary';

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

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

  get subpoenaDictionary() {
    return this.$store.getters[this.SUBPOENA_STATUSES];
  }

  get reasonDictionary() {
    return this.$store.getters[this.REASON_STATUSES];
  }

  get statusOptions(): Array<string> {
    return Object.keys(this.subpoenaDictionary).filter(e => FILTER_STATUS_TYPE.includes(e));
  }

  get reasonOptions() {
    return Object.keys(this.reasonDictionary);
  }

  maskSeries(value: string) {
    return value.replace(/[^А-Яа-я]/g,'').split('').splice(0,2).join('').toUpperCase();
  }

  maskNumber(value: string) {
    return value.replace(/\D+/g, '').split('').splice(0,9).join('');
  }

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

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