<template>
  <div class="RecruitsSearchBar">
    <q-input
      v-model="filter.search"
      dense
      outlined
      placeholder="Фамилия сотрудника"
      @keydown.enter="executeSearch"
      @keydown.esc="filter.search = ''"
      class="RecruitsSearchBar__Input"
    >
      <template #prepend>
        <q-icon name="pgs-search" />
      </template>
    </q-input>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, ModelSync, Emit } from 'vue-property-decorator';
import { SearchFilter } from '@/recruits/models';

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

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

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

<style lang="scss" scoped>
.RecruitsSearchBar {
  font-family: 'Golos UI', sans-serif;
  margin-top: -16px;
  margin-bottom: 8px;
  display: flex;

  &__Input {
    flex: 1 1 0%;
    padding-right: 4px;
  }

  ::v-deep {
    .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; // такой же толщены что бы не прыгало при фокусе
    }
  }
}
</style>
