<template>
  <div>
    <ol class="breadcrumb mb-2">
      <li class="breadcrumb-item">
        <router-link :to="{name:'homeAdmin'}">Inicio</router-link>
      </li>
      <li class="breadcrumb-item active">Estantes</li>
    </ol>
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <!-- Manejo de error -->
            <div class="alert alert-danger alert-rounded" v-if="strError.length != 0">
              <button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
              <i class="material-icons icon-align">report_problem</i>
              {{ strError }}
            </div>
            <h4 class="card-title">Estantes</h4>
            <span class="text-dark">En esta página se pueden visualizar los estantes disponibles.</span>

            <form class="form-material mt-2">
              <input
                type="text"
                class="form-control col-sm-3 mb-4 float-left"
                placeholder="Nombre del estante"
                v-model="buscar"
              />
            </form>
            <div class="btn-group">
              <b-tooltip target="busqueda-avanzada" placement="bottom">
                <span>Filtro de Fecha</span>
              </b-tooltip>

              <a
                href="#"
                class="dropdown-toggle pl-2 text-dark"
                data-toggle="dropdown"
                aria-haspopup="true"
                aria-expanded="false"
                id="busqueda-avanzada"
                :class="[filtroFecha.buscarFechaDias !== 0 ? 'font-bold':'']"
              >{{ filtroFecha.filtroSeleccionado }}</a>

              <div class="dropdown-menu">
                <a
                  class="dropdown-item"
                  href="#"
                  @click.prevent="filtroFecha.buscarFechaDias = 0;
                  filtroFecha.filtroSeleccionado = 'Cualquier fecha'"
                >
                  <i
                    class="material-icons align-middle"
                    style="font-weight:bold;margin-left: -30px;"
                    v-show="filtroFecha.buscarFechaDias == 0"
                  >check</i>
                  &nbsp; Cualquier fecha
                </a>
                <a
                  class="dropdown-item"
                  href="#"
                  @click="filtroFecha.buscarFechaDias = 1;
                filtroFecha.filtroSeleccionado = 'Últimas 24 hrs'"
                >
                  <i
                    class="material-icons align-middle"
                    style="font-weight:bold;margin-left: -30px;"
                    v-show="filtroFecha.buscarFechaDias == 1"
                  >check</i>
                  &nbsp; Últimas 24 hrs
                </a>
                <a
                  class="dropdown-item"
                  href="#"
                  @click.prevent="filtroFecha.buscarFechaDias = 7
                  filtroFecha.filtroSeleccionado = 'Última semana'"
                >
                  <i
                    class="material-icons align-middle"
                    style="font-weight:bold;margin-left: -30px;"
                    v-show="filtroFecha.buscarFechaDias == 7"
                  >check</i>
                  &nbsp; Última semana
                </a>
                <div class="dropdown-divider"></div>
                <a
                  class="dropdown-item"
                  href="#"
                  @click.prevent="filtroFecha.buscarFechaDias=-1;
                  filtroFecha.filtroSeleccionado = 'Intervalo personalizado'"
                >
                  <i
                    class="material-icons align-middle"
                    style="font-weight:bold;margin-left: -30px;"
                    v-show="filtroFecha.buscarFechaDias==-1"
                  >check</i>
                  &nbsp; Intervalo personalizado
                </a>
              </div>
            </div>

            <div class="btn-group">
              <div class="form-material" v-show="filtroFecha.buscarFechaDias == -1">
                <!-- Datepicker Show -->
                <div class="datepicker-trigger">
                  <div class="input-group">
                    <span
                      class="input-group-text"
                      style="background-color: transparent; border: none;"
                    >
                      <i class="material-icons align-middle">date_range</i>
                    </span>
                    <input
                      type="text"
                      class="form-control"
                      id="datepicker-trigger"
                      placeholder="Selecciona un rango..."
                      :value="formatoFechaCalendario(filtroFecha.fechaInicial,filtroFecha.fechaFinal)"
                    />
                  </div>
                  <AirbnbStyleDatepicker
                    :trigger-element-id="'datepicker-trigger'"
                    :mode="'range'"
                    :fullscreen-mobile="false"
                    :date-one="filtroFecha.fechaInicial"
                    :date-two="filtroFecha.fechaFinal"
                    :end-date="filtroFecha.fechaLimiteCalendario"
                    @date-one-selected="val => { filtroFecha.fechaInicial = val }"
                    @date-two-selected="val => { filtroFecha.fechaFinal = val }"
                    @apply="filtroFecha.buscarFechaDias = -1"
                  />
                </div>
              </div>
            </div>

            <div class="btn-group">
              <a
                href="#"
                class="ml-3 text-secondary"
                @click="borrarFiltro()"
                v-if="buscar.length !== 0 || 
              filtroFecha.buscarFechaDias > 0 ||
              filtroFecha.fechaInicial !== '' "
              >Borrar Filtro</a>
            </div>

            <a
            class="ml-2"                 
              href="#"
              @click.prevent="comenzarAMoverElementos(ordenarElementos = !ordenarElementos)"
            >
              <b-tooltip target="filtro-ordenar" placement="bottom">
                <span >Ordenar</span>
              </b-tooltip>
              <i id="filtro-ordenar" class="material-icons icon-align" :class="[ordenarElementos ? 'text-primary':'text-danger']">filter_list</i>
            </a>

            <a
              @click.prevent="$root.$emit('bv::show::modal', 'modalClonarEstante', '')"
              href="#"
              class="text-dark ml-3"
            >
              <i class="material-icons text-danger icon-align">dynamic_feed</i>
              Clonar Estante
            </a>

            <!-- Botones de ordenamiento -->
            <button
              v-show="updateOrder"
              class="mr-2 ml-2 btn btn-sm  btn-outline-info"
              @click="getEstantes();updateOrder = false"
              :disabled="isLoading"
            >
              <i class="material-icons icon-align">refresh</i> Deshacer
            </button>
            <button
              v-show="updateOrder"
              class="mr-2 btn btn-sm  btn-outline-success"
              @click="actualizarOrdenEstantes()"
              :disabled="isLoading"
            >
              <div class="save" v-if="!isLoading">
                <i class="material-icons icon-align">save</i>
                Guardar Orden
              </div>
              <div class="loading" v-if="isLoading">
                <span class="spinner-border spinner-grow-sm" role="status" aria-hidden="true"></span> Cargando...
              </div>
            </button>

            <button
              class="btn float-right  btn-outline-danger"
              data-toggle="modal"
              data-target="#modalEstante"
              @click="seleccionarEstante('','new')"
              v-if="strError.length == 0"
            >
              <i class="material-icons icon-align">add_circle</i> Crear estante
            </button>

            <!-- modal clonar estante -->
            <b-modal
              content-class="shadow"
              id="modalClonarEstante"
              title="Clonar estante"
              size="md"
              ok-only
            >
              <div class="form-group">
                <label class="font-bold">Nombre</label>
                <input
                  type="text"
                  class="form-control"
                  v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                  :class="{'input': true, 'is-danger': errors.has('nombre') }"
                  name="nombre"
                  v-model="estanteSeleccionado"
                  placeholder="Escriba el nombre del nuevo estante"
                />
                <span
                  v-show="errors.has('nombre')"
                  class="invalid-feedback-form"
                >{{ errors.first('nombre') }}</span>
              </div>
              <div class="form-group">
                <label class="font-bold">Estante espejo</label>
                <select
                  class="custom-select"
                  v-model="estanteEspejo"
                  name="estanteEspejo"
                  v-validate="'required'"
                  :class="{'input': true, 'is-danger': errors.has('estanteEspejo') }"
                >
                  <option value selected>Seleccione una opción</option>
                  <option
                    v-for="estante in estantes"
                    :key="estante.IDES"
                    :value="estante.IDES"
                  >{{estante.ESTA }}</option>
                </select>
                <span
                  v-show="errors.has('estanteEspejo')"
                  class="invalid-feedback-form"
                >{{ errors.first('estanteEspejo') }}</span>
              </div>

              <template v-slot:modal-footer="{  hide }">
                <div class="w-100">
                  <button
                    id
                    type="button"
                    class="btn btn-danger float-right"
                    @click="clonarEstante()"
                    :disabled=" cargando ? true: false"
                  >Guardar</button>
                  <button
                    id
                    type="button"
                    class="btn btn-secondary mr-2 float-right"
                    @click="hide('hide')"
                  >Cancelar</button>
                </div>
              </template>
            </b-modal>
            <!-- end modal -->
            <!-- add estante modal -->
            <div
              class="modal animated bounceInDown fast"
              id="modalEstante"
              tabindex="-1"
              role="dialog"
              aria-labelledby="modalEstante"
            >
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <div style="width:100%">
                      <h4 class="float-left">{{ mensajeModal }}</h4>
                      <uploadImage
                        class="float-right"
                        v-on:imagenUpdatedEvent="actualizarImagenes"
                      />
                    </div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                      <label class="font-bold">Nombre</label>
                      <input
                        type="text"
                        class="form-control"
                        v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                        :class="{'input': true, 'is-danger': errors.has('estante') }"
                        name="estante"
                        v-model="clickedEstante.ESTA"
                        placeholder="Escriba el nombre del estante"
                      />
                      <span
                        v-show="errors.has('estante')"
                        class="invalid-feedback-form"
                      >{{ errors.first('estante') }}</span>
                    </div>
                    <label class="typo__label font-bold">Seleccione una imagen</label>
                    <multiselect
                      v-model="imagen"
                      placeholder="Seleccione una imagen de la lista"
                      label="title"
                      track-by="IMAG"
                      :options="imagenesData"
                      :option-height="104"
                      :custom-label="({ title, desc }) =>  `${title}` "
                      :show-labels="false"
                    >
                      <template slot="singleLabel" slot-scope="props">
                        <img class="option__image" :src="props.option.URL" style="width:100px" />
                        <span class="option__desc">
                          <span class="option__title ml-2">{{ props.option.IMAG }}</span>
                        </span>
                      </template>
                      <template slot="option" slot-scope="props">
                        <img class="option__image" :src="props.option.URL" style="width:100px" />
                        <span class="option__title ml-2">{{ props.option.IMAG }}</span>
                      </template>
                      <span slot="noOptions">Sin elementos para mostrar.</span>
                    </multiselect>
                    <span
                      v-show="imagenInvalid && imagen.IMAG == 'Seleccione una imagen de la lista'"
                      class="invalid-feedback-form"
                    >La imagen es un campo obligatorio</span>
                    <!-- <pre class="language-json"><code>{{ imagen  }}</code></pre> -->
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">Cerrar</button>
                    <!-- Buttons save and edit -->
                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Editar'"
                      @click="editarEstante()"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>

                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Agregar'"
                      v-on:keyup.13="crearEstante(clickedEstante.ESTA,clickedEstante.IDIM)"
                      @click="crearEstante(clickedEstante.ESTA,clickedEstante.IDIM)"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- end modal -->
            <!-- Start delete Estante -->
            <div id="deleteEstante" class="modal animated bounceInDown fast">
              <div class="modal-dialog">
                <div class="modal-content">
                  <form>
                    <div class="modal-header">
                      <h4 class="modal-title">Borrar estante</h4>
                      <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-hidden="true"
                      >&times;</button>
                    </div>
                    <div class="modal-body">
                      <p>
                        Esta a punto de borrar
                        <b>'{{ clickedEstante.ESTA }}'</b>
                      </p>
                      <p class="text-danger">Esta acción no se puede deshacer.</p>
                    </div>
                    <div class="modal-footer">
                      <input
                        type="button"
                        class="btn btn-default"
                        data-dismiss="modal"
                        value="Cerrar"
                      />
                      <input
                        type="submit"
                        @click="borrarEstante()"
                        class="btn btn-danger"
                        value="Borrar"
                        data-dismiss="modal"
                      />
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End delete Estante -->
            <div class="table-responsive mt-3" v-if="strError.length === 0">
              <table class="table no-wrap table-hover">
                <thead>
                  <tr>
                    <th>Imagen</th>
                    <th>Nombre</th>
                    <th>Fecha Creación</th>
                    <th>Fecha de Modificación</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <draggable
                  v-model="estantes"
                  tag="tbody"
                  v-if="estantes.length != 0"
                  @start="drag=true"
                  @end="drag = false"
                  @update="moverEstantes"
                  v-bind="configuracionDragg"
                  :disabled="!ordenarElementos"
                  :style="ordenarElementos==true ?'background: aliceblue;':''"
                >
                  <tr v-for="estante in filtroEstantes" :key="estante.IDES">
                    <td>
                      <div class="profile-img">
                        <img
                          v-lazy="estante.IDIM"
                          :alt="estante.ESTA"
                          style="max-width:65px;"
                          class="img-thumbnail"
                        />
                      </div>
                    </td>
                    <td>{{ estante.ESTA }}</td>
                    <td>
                      <span v-if="estante.FECR !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ estante.FECR | formatDate }}
                      </span>
                    </td>
                    <td>
                      <span v-if="estante.FEMO !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ estante.FEMO | formatDate }}
                      </span>
                    </td>

                    <td>
                      <!-- Botones de acciones -->
                      <a
                        href="#modalEstante"
                        @click="modalEstante = true; seleccionarEstante(estante,'edit')"
                        class="edit"
                        data-toggle="modal"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Editar"
                          style="color:#f42849"
                        >&#xE254;</i>
                      </a>

                      <a
                        href="#deleteEstante"
                        @click="seleccionarEstante(estante,'delete')"
                        class="delete"
                        data-toggle="modal"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Borrar"
                          style="color:#f42849"
                        >&#xE872;</i>
                      </a>
                    </td>
                  </tr>
                </draggable>
              </table>
              <!-- Pagination -->
              <b-pagination
                v-show="verPaginador && !loading && filtroEstantes.length !== 0"
                v-model="currentPage"
                :total-rows="estantes.length"
                :per-page="perPage"
                align="center"
              ></b-pagination>
              
              <div v-if="loading" class="text-center">
                <p>Cargando...</p>
                <span
                  class="spinner-border spinner-grow-sm"
                  role="status"
                  aria-hidden="true"
                  style="color:red"
                ></span>
              </div>
              <div class="text-center">
                <p
                  class="mt-3"
                  v-if="estantes.length == 0 && !loading"
                >No se encontraron estantes para mostrar.</p>
                <p
                  class="mt-3"
                  v-show="estantes.length !== 0 && 
                  filtroEstantes.length === 0 && 
                  (filtroFecha.buscarFechaDias !== 0 || buscar.length !== 0) &&
                  !loading"
                >No se encontró ningún estante en su búsqueda.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    <vueTopprogress ref="topProgress" color="#ed022c" errorColor="#ffbc34" />
    </div>
  </div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
import { vueTopprogress } from "vue-top-progress";
import uploadImage from "@/components/UploadImage.vue";
import Multiselect from "vue-multiselect";
import moment from "moment";
import draggable from "vuedraggable";
import { BPagination,BTooltip,BModal } from "bootstrap-vue";
import { token } from "../../_mixin/user_mixin.js";

export default {
  name: "EstantesAdmin",
  mixins: [token],
  components: {
    uploadImage,
    Multiselect,
    draggable,
    BPagination,
    BTooltip,
    BModal
  },
  data: () => ({
    estanteSeleccionado: "",
    estanteEspejo: "",
    cargando: false,
    modalEstante: false,
    mensajeModal: "Agregar estante",
    mensajeButtonModal: "Agregar",
    clickedEstante: {},
    imagen: { IMAG: "Seleccione una imagen de la lista" },
    buscar: "",
    perPage: 25,
    currentPage: 1,
    verPaginador: true,
    updateOrder: false,
    arrOrder: {},
    isLoading: false,
    imagenInvalid: false,
    ordenarElementos: false
  }),
  created: function() {
    this.getEstantes();
    this.getImages("ES");
  },
  methods: {
    editarEstante: function() {
      // Verificar que tengamos imagen seleccionada
      this.$validator.validateAll().then(errors => {
        if (errors) {
          if (this.imagen.IMAG != "Seleccione una imagen de la lista") {
            let img = this.imagen.URL;
            this.clickedEstante.IDIM = img;
          }
          var formData = this.toFormData(this.clickedEstante);
          this.$http
            .post(
              this.url_api + "/estantes/update",
              formData,
              this.config_header
            )
            .then(response => {
              this.clickedEstante = {};
              if (!response.data.response) {
                this.$toasted.show(response.data.message, this.$toast_error);
              } else {
                this.$toasted.show(response.data.message, this.$toast_success);
              }
              this.getEstantes();
              this.removeModal("modalEstante");
            })
            .catch(error => {
              this.strError =
                "Se ha producido un error al actualizar el estante.";
            });
        }
      });
    },
    seleccionarEstante: function(estante, accion) {
      this.clickedEstante = {};
      this.imagen = { IMAG: "Seleccione una imagen de la lista" };
      this.imagenInvalid = false;
      // Remove Menssages error
      this.$nextTick().then(() => {
        this.$validator.reset();
        this.errors.clear();
      });
      if (accion == "new") {
        this.mensajeModal = "Agregar estante";
        this.mensajeButtonModal = "Agregar";
      }
      // Si estamos editando
      if (accion == "edit") {
        var datos = {
          IDES: estante.IDES,
          ESTA: estante.ESTA,
          IDIM: estante.IDIM,
          USMO: this.$store.getters.user.id
        };
        this.clickedEstante = datos;
        this.mensajeButtonModal = "Editar";
        this.mensajeModal = "Editar Estante";
      }
      if (accion == "delete") {
        this.clickedEstante = estante;
      }
    },
    crearEstante: function(esta, idim) {
      // Verificar que tengamos imagen seleccionada
      this.imagenInvalid = false;
      if (this.imagen.IMAG == "Seleccione una imagen de la lista") {
        this.imagenInvalid = true;
      }
      this.$validator.validateAll().then(result => {
        if (result && !this.imagenInvalid) {
          let imagenUrl = this.imagen.URL;
          var datos = {
            ESTA: esta,
            IDIM: imagenUrl,
            USCR: this.$store.getters.user.id
          };
          var formData = this.toFormData(datos);
          this.$http
            .post(this.url_api + "/estantes", formData, this.config_header)
            .then(response => {
              if (!response.data.response) {
                this.$toasted.show(response.data.message, this.$toast_error);
              } else {
                this.$toasted.show(response.data.message, this.$toast_success);
              }
              this.getEstantes();
              this.removeModal("modalEstante");
            })
            .catch(error => {
              this.strError = "Se ha producido un error al crear el estante.";
            });
        } //end Result
      }); // end validator
    },
    borrarEstante: function() {
      var formData = this.toFormData(this.clickedEstante);
      this.$http
        .post(this.url_api + "/estantes/delete", formData, this.config_header)
        .then(response => {
          if (!response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_error);
          } else {
            this.$toasted.show(response.data.message, this.$toast_success);
          }
          this.getEstantes();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al borrar el estante.";
        });
    },
    paginador: function(estantes) {
      // Calcular páginador
      const indiceInicio = (this.currentPage - 1) * this.perPage;
      const indiceFinal =
        indiceInicio + this.perPage > estantes.length
          ? estantes.length
          : indiceInicio + this.perPage;
      return estantes.slice(indiceInicio, indiceFinal);
    },
    moverEstantes: function() {
      this.updateOrder = true;
      var obj = this.estantes;
      var bodyFormData = new FormData();
      obj.forEach((element, i) => {
        i++;
        bodyFormData.append(element.IDES, i);
      });
      this.arrOrder = bodyFormData;
    },
    actualizarOrdenEstantes: function() {
      var formData = this.arrOrder;
      this.isLoading = true;
      this.$http
        .post(this.url_api + "/estantes/order", formData, this.config_header)
        .then(response => {
          this.isLoading = false;
          this.updateOrder = false;
          if (!response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_error);
          } else {
            this.$toasted.show(response.data.message, this.$toast_success);
          }
          this.getEstantes();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al ordenar el estante.";
        });
    },
    actualizarImagenes: function(action) {
      if (action) {
        this.getImages("ES");
      }
    },
    borrarFiltro() {
      this.filtroFecha.fechaInicial = "";
      this.filtroFecha.fechaFinal = "";
      this.filtroFecha.buscarFechaDias = 0;
      this.buscar = "";
      this.filtroFecha.filtroSeleccionado = "Cualquier fecha";
    },
    comenzarAMoverElementos(ordenandoElementos) {
      this.ordenarElementos = ordenandoElementos;
      if (this.ordenarElementos) {
        this.perPage = this.estantes.length;
        this.paginador(this.estantes);
      } else {
        this.perPage = 25;
        this.paginador(this.estantes);
      }
    },
    async clonarEstante() {
      const validateNombre = await this.$validator.validate('nombre');
      const validateEspejo = await this.$validator.validate('estanteEspejo');
      
      if ( validateNombre && validateEspejo ) {

        // lanzar Warning
        const alert = await this.$swal({
          position: 'center',
          title: "¡Cuidado!",
          text: "Esta a punto de clonar un Estante, esta acción no se puede regresar una vez ejecutada.",
          type: "warning",
          confirmButtonText: "Aceptar",
          cancelButtonText: "Cancelar",
          showCloseButton: true,
          showCancelButton: true,
        });
        
        if(!alert.value){
            return;
        }

        this.$refs.topProgress.start();
        this.cargando = true;

        let datos = {
          nombre: this.estanteSeleccionado,
          espejo: this.estanteEspejo,
          uscr: this.$store.getters.user.id
        };

        const response = await this.$http.post(
          this.url_api + "/estante/clonar",
          datos,
          this.config_header
        );

        try {
          
          if (!response.data.response) {
            throw new Error(response.data.message);
          }

          this.$toasted.show(response.data.message, this.$toast_success);
          this.$refs.topProgress.done();
          this.estanteEspejo = "";
          this.estanteSeleccionado = "";
          this.getEstantes();
        } catch (error) {
          this.$toasted.show(error, this.$toast_error);
          this.$refs.topProgress.fail();
        }
        this.cargando = false;
        this.$root.$emit("bv::hide::modal", "modalClonarEstante");

      } // End validation
    }
  },
  computed: {
    filtroEstantes() {
      var estantesFiltrados = [];
      var estantesFiltradosPorInput = [];
      var fechaAhora = moment().format("YYYY-MM-DD");

      // Resultados de input buscar
      estantesFiltradosPorInput = this.estantes.filter(estante => {
        return estante.ESTA.toLowerCase().match(this.buscar.toLowerCase());
      });

      switch (this.filtroFecha.buscarFechaDias) {
        case -1:
          // Intervalo personalizado
          estantesFiltrados = estantesFiltradosPorInput.filter(estante => {
            let fechaFormato = moment(estante.FECR, "DD-MMM-YY").format(
              "YYYY-MM-DD"
            );

            if (
              !(
                moment(fechaFormato).isBefore(this.filtroFecha.fechaInicial) ||
                moment(fechaFormato).isAfter(this.filtroFecha.fechaFinal)
              )
            ) {
              return estante;
            }
          });
          break;
        case 1:
        case 7:
          // Filtrar ultimos 7 días y 24 hrs
          var dias = moment()
            .subtract(this.filtroFecha.buscarFechaDias, "days")
            .format("YYYY-MM-DD");

          estantesFiltrados = estantesFiltradosPorInput.filter(estante => {
            let fechaEstante = moment(estante.FECR, "DD-MMM-YY").format(
              "YYYY-MM-DD"
            );
            if (
              moment(fechaEstante).isBetween(dias, fechaAhora) ||
              moment(fechaEstante).isSame(fechaAhora)
            ) {
              return estante;
            }
          });
          break;
        default:
          estantesFiltrados = estantesFiltradosPorInput;
          break;
      }

      return this.paginador(estantesFiltrados);
    }
  }
};
</script>

<style scoped>
.dropdown-item {
  padding: 0px 7px 2px 40px;
}
.page-titles .breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
}
.uploading-image {
  display: flex;
}
.sortable-chosen {
  background: #c2dbff;
}
.table-responsive {
  box-shadow: 0px 0px 7px 2px #f2f2f2;
  padding: 15px;
}
.spinner-grow-sm {
  width: 1.6rem;
  height: 1.6rem;
}
.table td,
.table th {
  vertical-align: middle;
}

</style>