<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="row q-pt-md q-mb-md">
            <div class="col-12 col-sm-6 col-md-3 q-pa-xs">
              <r-date-input
                label="Дата рождения"
                :from.sync="filter.birthDateFrom"
                :to.sync="filter.birthDateTo"
              />
            </div>
            <r-gender-select
              class="col-12 col-sm-6 col-md-3 q-pa-xs"
              label="Пол"
              :genders="genderOptions"
              v-model="filter.genders"
            />
            <r-status-select
              class="col-12 col-sm-6 col-md-3 q-pa-xs"
              label="Статус"
              :statuses="statuses"
              v-model="filter.statuses"
            />
            <r-select
              class="col-12 col-sm-6 col-md-3 q-pa-xs"
              dense
              :emitValue="true"
              :clearable="true"
              options-dense
              :mapOptions="true"
              label="Признак заболевания"
              v-model="filter.medExemptAbsent"
              :options="medExemptOptions"
            />
            <div class="checkboxes-wrapper col-12 col-sm-12 col-md-3 q-pa-xs">
              <r-checkbox
                v-model="filter.conscriptionExemptAbsent"
                label="Нет отсрочки или освобождения"
              />
            </div>
          </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 {
  font-family: "Golos UI", sans-serif;

  .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;
      background: rgba(#357eac, 0.05);
      border: 1px solid rgba(1, 72, 116, 0.11);
      border-radius: 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 {
  font-family: "Golos UI", sans-serif;
  padding: 8px 18px;
  &-Line {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px;
    gap: 8px;
    &__Element {
      flex-basis: 100%;
      &__Min {
        flex-basis: 25%;
      }
    }
  }
}

.checkboxes-wrapper {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: -36px;
  z-index: 10;
}

@media screen and (max-width: 1280px) {
  .checkboxes-wrapper {
    width: 100%;
  }
  .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 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 RCheckbox from '@/recruits/components/common/r-checkbox.vue';
import RSelect from '@/recruits/components/common/r-select.vue';
import RMultiSelect from '@/recruits/components/common/r-multi-select.vue';
import RStatusSelect from '@/recruits/components/common/r-status-select.vue';
import RGenderSelect from '@/recruits/components/common/r-gender-select.vue';
import { SearchFilterUtils } from '@/recruits/utils/search-filter';
import { sex } from '@/recruits/models';

@Component({
  components: {
    RDateInput,
    RMultiSelect,
    RStatusSelect,
    RGenderSelect,
    RadioSelect,
    RSelect,
    RInput,
    RCheckbox,
  },
})
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;
  public firstName = '';
  public readonly statuses = ['1', '1.2', '15'];
  public readonly genderOptions = Object.keys(sex);

  get medExemptOptions(): {
    label: string;
    value: string;
  }[] {
    return [
      {
        label: 'Есть признак заболевания',
        value: 'false',
      },
      {
        label: 'Нет признака заболевания',
        value: 'true',
      },
    ];
  }

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

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

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

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