<template>
  <div class="AccountSearchBar">
    <div class="AccountSearchBar__InputBlock">
      <q-input
        v-model="filter.search"
        :placeholder="isAdmin ? 'Фамилия Имя Отчество' : 'Фамилия'"
        dense
        outlined
        @keydown.enter="executeSearch"
        @keydown.esc="filter.search = ''"
        class="AccountSearchBar__Input"
      >
        <template #prepend>
          <q-icon name="pgs-search" />
        </template>
      </q-input>
      <q-btn
        v-if="isAdmin"
        icon="pgs-filter"
        class="AccountSearchBar__FilterIcon"
        @click="toggleFilter"
      >
        <q-badge color="#015E98" floating v-if="!!filterCount">
          {{ filterCount }}
        </q-badge>
      </q-btn>
    </div>
    <q-slide-transition>
      <q-card bordered flat v-show="filterVisible">
        <q-card-section class="AccountSearchBar__Filters">
          <div class="AccountSearchBar__Line">
            <!-- TODO: создать компонент q-select с инпутом -->
            <q-select
              filled
              v-model="filter.organizationId"
              label="Выберите организацию"
              :options="optionsOrg"
              :loading="loadingOrg"
              option-label="shortname"
              option-value="id"
              emit-value
              map-options
              use-input
              input-debounce="1000"
              @filter="filterOrg"
              class="AccountSearchBar__LineElement"
            />
          </div>
          <div class="AccountSearchBar__Line">
            <q-select
              filled
              v-model="filter.departmentId"
              label="Выберите подразделение"
              :options="optionsDepart"
              emit-value
              map-options
              v-if="optionsDepart.length"
              option-label="shortname"
              option-value="id"
              clearable
              class="AccountSearchBar__LineElement"
            />
          </div>
          <div class="AccountSearchBar__Line">
            <!-- TODO: создать компонент q-select с инпутом -->
            <q-select
              filled
              v-model="filter.roleId"
              label="Выберите роль"
              :options="optionsRoles"
              :loading="loadingRoles"
              option-label="displayName"
              option-value="id"
              emit-value
              map-options
              use-input
              input-debounce="1000"
              @filter="filterRoles"
              class="AccountSearchBar__LineElement"
            />
          </div>
          <div class="AccountSearchBar__Btn">
            <r-btn
              label="Применить"
              icon="pgs-search"
              :loading="loading"
              @click="executeSearch"
              action
            />
          </div>
        </q-card-section>
        <q-btn
          dense
          flat
          class="AccountSearchBar__Reset"
          icon="close"
          size="10px"
          @click="resetFilter"
          label="сбросить все"
        />
      </q-card>
    </q-slide-transition>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss" scoped>
.AccountSearchBar {
  margin-top: 4px;

  &__InputBlock {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 8px;
  }

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

  &__Reset {
    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    color: #cf5f14;
    position: absolute;
    top: 0;
    right: 0;
  }

  &__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%;
    }
  }
  ::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: 0px;
      border-bottom: 1px solid #e9f1f8; // такой же толщены что бы не прыгало при фокусе
    }
  }

  &__Filters {
    padding: 8px 18px;
  }

  &__Line {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 12px;
  }

  &__LineElement {
    flex-basis: 100%;
    &:not(:last-child) {
      margin-right: 8px;
    }
  }

  &__Btn {
    display: flex;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1280px) {
  .AccountSearchBar {
    &__Line {
      flex-wrap: wrap;
    }
    &__LineElement {
      &:not(:last-child) {
        margin-right: 0;
      }
    }
  }
}
</style>
