<template>
  <label   id="BaseSelectSearch" :class="['field', `field-${size}`, classObject] ">
    <span v-if="label" class="field-label">{{ label }}</span>

    <span v-if="description" class="field-description" v-html="description"></span>

    <div v-if="error" class="field-error-container">
      <i class="field-error-icon fas fa-exclamation-circle"></i>
      <div class="field-error-message">
        {{ error }}
      </div>
    </div>

    <div v-if="valid" class="field-valid-container">
      <i class="field-valid-icon fas fa-check-circle"></i>
    </div>

    <div class="search row" id="dropdown-select">
      <div class="col-xs-12">
        <base-input
          type="select"
          :name="name"
          id="inputSelect"
          :value="filters"
          v-model.native="filters"
          @keyup.prevent.native="filterKeyPress"
          @keydown.native="preventDefault"
          @focusin="showOpt"
         >
        </base-input>
      </div>
    </div>
    <base-card >
    <div :style="valtop" v-show="showOption" class="dropdown-select background-white shadow-small rounded-x-small" id="dropdown-select-option">
          <base-card >
            <div class="ul">
              <div class="li"
                @click.prevent="selectOption"
                v-for="(category, index) in (listOption.length ? listOption: option)"
                :key="index"
                :data-id-category="category.id"
                :value="category.id">
                <div :data-id-category="category.id" v-text="category.name"></div>
              </div>
            </div>
          </base-card>
    </div>
      </base-card >
  </label>
</template>
<style src="../../identity.css"></style>

<style src="../BaseSelectSearch/styles.css"></style>
<style scoped src="../BaseInput/styles.css" /></style>


<script src="./scripts.js"></script>