<template>
  <base-modal
    v-if="open"
    fullHeight
    @close="onClose"
  >
    <template #header>
      <div class="search-product-header">
        <label class="search-product-field">
          <i class="fas fa-search search-product-field-icon"></i>
          <input
            type="text"
            placeholder="Buscar produto"
            v-model="searchField"
            @input="onSearchProducts"
            class="search-product-field-entry text-dark"
          />
        </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-product-clean text-dark"
          @click="onClearSearchField">
          Limpar
        </button>
        <button
          type="button"
          class="search-product-close"
          @click="onClose">
          <i class="fas fa-times"></i>
        </button>
      </div>
    </template>

    <div class="search-product-list">
      <span class="search-product-selected" v-if="productsSelected.length && !products.length">Produtos selecionados</span>
      <template v-if="products.length">
        <search-product-item
          v-for="(product, productIndex) in products"
          :key="product.product_id"
          :active="product.selected"
          :thumb="product.thumb"
          :name="product.name"
          :product-id="product.product_id"
          @click.native="onClickProduct(product, productIndex)"
        >
        </search-product-item>
      </template>
      <template v-else-if="productsSelected.length && !products.length">
        <draggable
          v-model="productsSelected"
          @start="drag=true"
          @end="drag=false"
        >
          <div v-for="(product, productIndex) in productsSelected" :key="product.product_id">
            <search-product-item
              active
              :thumb="product.thumb"
              :name="product.name"
              :product-id="product.product_id"
              @click.native="onRemoveProduct(productIndex)"
            >
            </search-product-item>
          </div>
        </draggable>
      </template>
      <template v-else>
        <div class="search-product-instruction">
          <i class="fas fa-search"></i>
          <span>Busque seus produtos utilizando a barra de busca acima.</span>
        </div>
      </template>
    </div>

    <template #footer>
      <div v-if="!singleSelect" :class="['search-product-footer', {'has-amount':productsSelected.length}]">
        <span class="search-product-amount" v-if="productsSelected.length">
          <b>{{ productsSelectedAmount }}</b> produtos selecionados
        </span>
        <base-button @click.native="onApplyProductsSelected">
          Concluir
        </base-button>
      </div>
    </template>

  </base-modal>
</template>

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

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