<template>
  <base-modal
    v-if="open"
    fullHeight
    @close="onClose"
  >
    <template #header>
      <div class="search-header">
        <label class="search-field">
          <i class="fas fa-search search-field-icon"></i>
          <input
            type="text"
            :placeholder="searchPlaceholder"
            v-model="searchField"
            @input="onSearchItems"
            class="search-field-entry"
          />
        </label>
        <div class="rel" style="width:56px;height:56px;" v-show="loading">
          <img
            src="../../../img/loading-black.svg"
            alt="Carregando..."
            class="center-middle-absolute"
            width="24"
            height="24"
          >
        </div>
        <button
          type="button"
          v-if="searchField.length > 0"
          class="search-clean"
          @click="onClearSearchField">
          Limpar
        </button>
        <button
          type="button"
          class="search-close"
          @click="onClose">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </template>

    <div class="search-list">
      <span class="search-selected" v-if="itemsSelected.length && !items.length">{{searchCaption}}</span>
      <template v-if="items.length">

        <search-item
          v-for="(item, itemIndex) in items"
          :key="item.id"
          :active="item.selected"
          :thumb="item.thumb"
          :description="item.description"
          :second-description="item.secondDescription"
          :id="item.id"
          @click.native="onClickItem(item, itemIndex)"
        >
        </search-item>
      </template>
      <template v-else-if="itemsSelected.length && !items.length">
        <draggable
          v-model="itemsSelected"
          @start="drag=true"
          @end="drag=false"
        >
          <div v-for="(item, itemIndex) in itemsSelected" :key="item.id">
            <search-item
              active
              :thumb="item.thumb"
              :description="item.description"
              :second-description="item.secondDescription"
              :id="item.id"
              @click.native="onRemoveItem(itemIndex)"
            >
            </search-item>
          </div>
        </draggable>
      </template>
      <template v-else>
        <div class="search-instruction">
          <i class="fas fa-search"></i>
          <span>Faça a pesquisa utilizando a barra de busca acima.</span>
        </div>
      </template>
    </div>

    <template #footer>
      <div v-if="!singleSelect" :class="['search-footer', {'has-amount':itemsSelected.length}]">
        <span class="search-amount" v-if="itemsSelected.length">
          <b>{{ itemsSelectedAmount }}</b> {{searchCaption}}
        </span>
        <base-button @click.native="onApplyItemsSelected">
          Concluir
        </base-button>
      </div>
    </template>

  </base-modal>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css"></style>

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