<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="q-pa-xs">
          <div class="row q-pt-md">
            <div class="col-12 col-sm-6 col-md-4 q-pa-xs">
              <q-input
                v-model="filter.vkFio"
                placeholder="ФИО инициатора"
                outlined
                dense
              />
            </div>

            <div class="col-12 col-sm-6 col-md-4 q-pa-xs">
              <q-input
                v-model="filter.objectType"
                placeholder="Тип объекта"
                outlined
                dense
              />
            </div>
            <div class="col-12 col-sm-6 col-md-4 q-pa-xs">
              <q-input
                v-model="filter.objectDescription"
                placeholder="Описание объекта"
                outlined
                dense
              />
            </div>
            <div class="col-12 col-sm-6 col-md-4 q-pa-xs">
              <q-input
                v-model="filter.type"
                placeholder="Тип изменения"
                outlined
                dense
              />
            </div>

            <div class="col-12 col-sm-6 col-md-4 q-pa-xs">
              <div class="row">
                <div
                  class="col-3 text-right q-pr-sm golos-label"
                  style="display: inline-grid; align-items: center"
                >
                  Дата события
                </div>
                <div class="col-9">
                  <date-application-input
                    :from.sync="filter.dateFrom"
                    :to.sync="filter.dateTo"
                  />
                </div>
              </div>
            </div>

            <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: 0px 0px 8px 8px;

      .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;
    }
  }
}
</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 { LogObjectSearchFilter } from './log-object-search-filter';

@Component({
  components: {
    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: LogObjectSearchFilter;

  public filterCount = 0;
  public filterVisible = false;

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

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

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

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