<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">Secciones</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">Secciones</h4>
            <span class="text-dark">En esta página se pueden visualizar las secciones disponibles.</span>
            <div class="col-sm-12">
              <form class="form-material mt-2">
                <input
                  type="text"
                  class="form-control col-sm-3 mb-2 float-left"
                  placeholder="Nombre de la sección"
                  v-model="buscar"
                />

                <div class="btn-group dropright">
                  <a
                    href="#"
                    class="align-middle text-danger"
                    @click.prevent="filtroFecha.verFiltrosBusqueda = !filtroFecha.verFiltrosBusqueda"
                  >
                    <i class="material-icons align-middle" style="color: #f42849;" id="busqueda-avanzada">more_vert</i>
                    <b-tooltip target="busqueda-avanzada" placement="bottom">
                      <span>Búsqueda avanzada</span>
                    </b-tooltip>
                  </a>
                </div>
                
                <a                 
                  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>

              <!-- botones de ordenar -->
                <button
                  v-show="updateOrder"
                  class="mr-2 btn btn-sm  btn-outline-info"
                  @click.prevent="getSecciones();updateOrder = false;ordenarElementos=false;"
                  :disabled="isLoading"
                >
                  <i class="material-icons icon-align">refresh</i> Deshacer
                </button>
                <button
                  v-show="updateOrder"
                  class="mr-2 ml-2 btn btn-sm  btn-outline-success"
                  @click.prevent="actualizarOrdenSecciones()"
                  :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="#modalSeccion"
                  @click.prevent="seleccionarSeccion('','new')"
                  v-if="strError.length == 0"
                >
                  <i class="material-icons icon-align">add_circle</i> Crear Sección
                </button>
              </form>
            </div>

            <div class="col-sm-12 float-left mb-2" v-show="filtroFecha.verFiltrosBusqueda">
              <div class="btn-group">
                <a
                  href
                  class="dropdown-toggle mr-2 text-dark"
                  :class="[clickedFiltro.IDES !== ''
                  ? 'font-bold':'']"
                  @click.prevent="filtroFecha.verModalBusqueda = true"
                >Estantes / Secciones</a>
              </div>

              <div class="btn-group">
                <a
                  href="#"
                  class="dropdown-toggle pl-2 text-dark"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  :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-dark"
                  style="border: 1px solid #d8d8d8;padding: 3px"
                  @click="borrarFiltro()"
                  v-if="buscar.length !== 0 || 
                    filtroFecha.buscarFechaDias > 0 ||
                    filtroFecha.fechaInicial !== ''  || 
                    clickedFiltro.IDES !== ''"
                >Borrar Filtro</a>
              </div>
            </div>
            <!-- Modal filtro buscar -->
            <transition name="fade" v-if="filtroFecha.verModalBusqueda ">
              <div class="modal-mask">
                <div class="modal-wrapper">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h6>Filtro avanzado de secciones</h6>
                        <button
                          type="button"
                          class="close"
                          @click="filtroFecha.verModalBusqueda = false;"
                          aria-label="Cerrar"
                        >
                          <span aria-hidden="true">&times;</span>
                        </button>
                      </div>
                      <div class="modal-body">
                        <div class="form-group row">
                          <label for="lbl_estantes" class="col-sm-3 col-form-label">Estantes</label>
                          <div class="col-sm-9">
                            <select
                              class="custom-select"
                              v-model="clickedFiltro.IDES"
                              id="estanteFiltro"
                              @change="clickedFiltro.IDSE = ''"
                            >
                              <option value>Seleccione una opción</option>
                              <option
                                v-for="estante in estantes"
                                :key="estante.IDES"
                                :value="estante.IDES"
                              >{{estante.ESTA }}</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="lbl_secciones" class="col-sm-3 col-form-label">Secciones</label>
                          <div class="col-sm-9">
                            <select
                              class="custom-select"
                              v-model="clickedFiltro.IDSE"
                              id="seccionFiltro"
                            >
                              <option value>Seleccione una sección</option>
                              <option
                                v-for="seccion in seccionesFiltro"
                                :key="seccion.IDSE"
                                :value="seccion.IDSE"
                              >{{seccion.SECC }}</option>
                            </select>
                          </div>
                        </div>
                        <button
                          class="btn btn-danger float-right mt-3"
                          @click="filtroFecha.verModalBusqueda = false;"
                        >Aplicar</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>

            <!-- add seccion modal -->
            <div
              class="modal animated bounceInDown fast"
              id="modalSeccion"
              tabindex="-1"
              role="dialog"
              aria-labelledby="modalSeccion"
            >
              <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"
                        name="seccion"
                        v-model="clickedSec.SECC"
                        class="form-control"
                        placeholder="Escriba el nombre de la Sección"
                        v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                        :class="{'input': true, 'is-danger': errors.has('seccion') }"
                      />
                      <span
                        v-show="errors.has('seccion')"
                        class="invalid-feedback-form"
                      >{{ errors.first('seccion') }}</span>
                    </div>
                    <div class="form-group">
                      <label class="font-bold">Estante</label>
                      <select
                        class="custom-select"
                        v-model="clickedSec.IDES"
                        name="estante"
                        v-validate="'required'"
                        :class="{'input': true, 'is-danger': errors.has('estante') }"
                      >
                        <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('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>
                  </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.prevent="editarSeccion()"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>

                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Agregar'"
                      @click.prevent="crearSeccion(clickedSec.SECC,clickedSec.IDES)"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- end modal -->
            <!-- Start delete Sección -->
            <div id="deleteSeccion" class="modal animated bounceInDown fast">
              <div class="modal-dialog">
                <div class="modal-content">
                  <form>
                    <div class="modal-header">
                      <h4 class="modal-title">Borrar Sección</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>'{{ clickedSec.SECC }}'</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="deleteSeccion = false; borrarSeccion()"
                        class="btn btn-danger"
                        value="Borrar"
                        data-dismiss="modal"
                      />
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End delete Sección -->
            <div class="table-responsive mt-2" v-if="strError.length == 0">
              <table class="table no-wrap table-hover">
                <thead>
                  <tr>
                    <th>Imagen</th>
                    <th>Nombre</th>
                    <th>Estante</th>
                    <th>Fecha Creación</th>
                    <th>Fecha de Modificación</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <draggable
                  v-model="secciones"
                  tag="tbody"
                  v-if="secciones.length !== 0"
                  @start="drag=true"
                  @end="drag = false"
                  @update="moverSeccion"
                  v-bind="configuracionDragg"
                  :disabled="!ordenarElementos"
                  :style="ordenarElementos==true ?'background: aliceblue;':''"
                >
                  <tr v-for="secciones in filtroSecciones" :key="secciones.IDSE">
                    <td>
                      <div class="profile-img">
                        <img
                          v-lazy="secciones.IDIM"
                          style="max-width:65px"
                          alt="user"
                          class="img-thumbnail"
                        />
                      </div>
                    </td>

                    <td>{{ secciones.SECC }}</td>
                    <td>
                      
                      <span class="label label-danger">
                        <i class="material-icons icon-align">dns</i>
                        {{ secciones.ESTA }}</span>
                    </td>
                    <td>
                      <span v-if="secciones.FECR !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ secciones.FECR | formatDate }}
                      </span>
                    </td>
                    <td>
                      <span v-if="secciones.FEMO !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ secciones.FEMO | formatDate }}
                      </span>
                    </td>
                    <td>
                      <!-- Botones de acciones -->
                      <a
                        href="#modalSeccion"
                        @click="modalSeccion = true; seleccionarSeccion(secciones,'edit')"
                        class="edit"
                        data-toggle="modal"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Editar"
                          style="color:#f42849"
                        >&#xE254;</i>
                      </a>

                      <a
                        href="#deleteSeccion"
                        @click="deleteSeccion = true;seleccionarSeccion(secciones,'delete')"
                        class="delete"
                        data-toggle="modal"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Borrar"
                          style="color:#f42849"
                        >&#xE872;</i>
                      </a>
                    </td>
                  </tr>
                  <!-- </tbody> -->
                </draggable>
              </table>
              <!-- Pagination -->
              <b-pagination
                v-show="verPaginador && !loading && filtroSecciones.length !== 0"
                v-model="currentPage"
                :total-rows="this.secciones.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="secciones.length == 0 && !loading"
                >No se encontraron secciones para mostrar.</p>

                <p
                  class="mt-3"
                  v-show="secciones.length !== 0 && 
                  filtroSecciones.length === 0 && 
                  (filtroFecha.buscarFechaDias !== 0 || buscar.length !== 0 || clickedFiltro.IDES !== '') &&
                  !loading"
                >No se encontró ninguna sección en su búsqueda.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<script>
import uploadImage from "@/components/UploadImage.vue";
import Multiselect from "vue-multiselect";
import moment from "moment";
import draggable from "vuedraggable";
import { BPagination,BTooltip } from "bootstrap-vue";
import { token } from "../../_mixin/user_mixin.js";

export default {
  name: "SeccionesAdmin",
  mixins: [token],
  components: {
    uploadImage,
    Multiselect,
    draggable,
    BPagination,
    BTooltip

  },
  data: () => ({
    deleteSeccion: false,
    mensajeModal: "Agregar Sección",
    mensajeButtonModal: "Agregar",
    clickedSec: {},
    imagen: { IMAG: "Seleccione una imagen de la lista" },
    buscar: "",
    perPage: 25,
    currentPage: 1,
    verPaginador: true,
    updateOrder: false,
    arrOrder: {},
    isLoading: false,
    imagenInvalid: false,
    ordenarElementos: false
  }),
  mounted: function() {
    this.getSecciones();
    this.getEstantes();
    this.getImages("SE");
  },
  methods: {
    editarSeccion: 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.clickedSec.IDIM = img;
          }
          var formData = this.toFormData(this.clickedSec);
          this.$http
            .post(
              this.url_api + "/secciones/update",
              formData,
              this.config_header
            )
            .then(response => {
              this.clickedSec = {};
              if (!response.data.response) {
                this.$toasted.show(response.data.message, this.$toast_error);
              } else {
                this.$toasted.show(response.data.message, this.$toast_success);
              }
              this.getSecciones();
              this.removeModal("modalSeccion");
            })
            .catch(error => {
              this.strError =
                "Se ha producido un error al actualizar el sección.";
            });
        }
      });
    },
    seleccionarSeccion: function(seccion, accion) {
      this.clickedSec = {};
      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.clickedSec = { IDES: "" };
        this.mensajeModal = "Agregar Sección";
        this.mensajeButtonModal = "Agregar";
      }
      // Si estamos editando
      if (accion == "edit") {
        var datos = {
          IDSE: seccion.IDSE,
          IDES: seccion.IDES,
          SECC: seccion.SECC,
          IDIM: seccion.IDIM,
          USMO: this.$store.getters.user.id
        };
        this.clickedSec = datos;
        this.mensajeButtonModal = "Editar";
        this.mensajeModal = "Editar Sección";
      }
      if (accion == "delete") {
        this.clickedSec = seccion;
      }
    },
    crearSeccion: function(secc, ides) {
      // 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 = {
            SECC: secc,
            IDES: ides,
            IDIM: imagenUrl,
            USCR: this.$store.getters.user.id
          };
          var formData = this.toFormData(datos);
          this.$http
            .post(this.url_api + "/secciones", 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.getSecciones();
              this.removeModal("modalSeccion");
            })
            .catch(error => {
              this.strError = "Se ha producido un error al crear la sección.";
            });
        } //end Result
      }); // end validator
    },
    borrarSeccion: function() {
      var formData = this.toFormData(this.clickedSec);
      this.$http
        .post(this.url_api + "/secciones/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.getSecciones();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al borrar la sección.";
        });
    },
    paginador: function(secciones) {
      // Calcular páginador
      const indiceInicio = (this.currentPage - 1) * this.perPage;
      const indiceFinal =
        indiceInicio + this.perPage > secciones.length
          ? secciones.length
          : indiceInicio + this.perPage;
      return secciones.slice(indiceInicio, indiceFinal);
    },
    moverSeccion: function() {
      this.updateOrder = true;
      var obj = this.secciones;
      var bodyFormData = new FormData();
      obj.forEach((element, i) => {
        i++;
        bodyFormData.append(element.IDSE, i);
      });
      this.arrOrder = bodyFormData;
    },
    actualizarOrdenSecciones: function() {
      var formData = this.arrOrder;
      this.isLoading = true;
      this.$http
        .post(this.url_api + "/secciones/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.getSecciones();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al ordenar las secciones.";
        });
    },
    actualizarImagenes: function(action) {
      if (action) {
        this.getImages("SE");
      }
    },
    borrarFiltro() {
      this.filtroFecha.fechaInicial = "";
      this.filtroFecha.fechaFinal = "";
      this.filtroFecha.buscarFechaDias = 0;
      this.buscar = "";
      this.filtroFecha.filtroSeleccionado = "Cualquier fecha";
      this.clickedFiltro.IDES = "";
      this.clickedFiltro.IDSE = "";
    },
    comenzarAMoverElementos(ordenandoElementos) {
      this.ordenarElementos = ordenandoElementos;
      if (this.ordenarElementos) {
        this.perPage = this.secciones.length;
        this.paginador(this.secciones);
      } else {
        this.perPage = 25;
        this.paginador(this.secciones);
      }
    }
  },
  computed: {
    seccionesFiltro() {
      let idEstante = this.clickedFiltro.IDES;
      return this.secciones.filter(seccion => seccion.IDES === idEstante);
    },
    filtroSecciones() {
      var seccionesFiltradas = [];
      var seccionesFiltradasPorInput = [];
      var fechaAhora = moment().format("YYYY-MM-DD");

      //Filtro de Modal Búsqueda Avanzada
      var idEstante = this.clickedFiltro.IDES;
      var idSeccion = this.clickedFiltro.IDSE;

      var seccionesModal = this.secciones.filter(seccion => {
        if (idEstante !== "" && idSeccion === "") {
          return seccion.IDES === idEstante;
        }
        if (idEstante !== "" && idSeccion !== "") {
          return seccion.IDES === idEstante && seccion.IDSE === idSeccion;
        }
        return seccion;
      });

      // filtra por lo que escriba el usuario en la caja de texto
      seccionesFiltradasPorInput = seccionesModal.filter(seccion => {
        return seccion.SECC.toLowerCase().match(this.buscar.toLowerCase());
      });

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

            if (
              !(
                moment(fechaFormato).isBefore(this.filtroFecha.fechaInicial) ||
                moment(fechaFormato).isAfter(this.filtroFecha.fechaFinal)
              )
            ) {
              return seccion;
            }
          });
          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");

          seccionesFiltradas = seccionesFiltradasPorInput.filter(seccion => {
            let fechaFormato = moment(seccion.FECR, "DD-MMM-YY").format(
              "YYYY-MM-DD"
            );
            if (
              moment(fechaFormato).isBetween(dias, fechaAhora) ||
              moment(fechaFormato).isSame(fechaAhora)
            ) {
              return seccion;
            }
          });
          break;
        default:
          seccionesFiltradas = seccionesFiltradasPorInput;
          break;
      }
      return this.paginador(seccionesFiltradas);
    }
  }
};
</script>
<style scoped>
.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;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  background-color: #f62d51 !important;
  border-color: #f62d51 !important;
}
.dropdown-item {
  padding: 0px 7px 2px 40px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.dropdown-toggle {
  border: 1px solid#d8d8d8;
  padding: 3px;
}
/* Modal filtro */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.1);
  display: table;
  transition: opacity 0.3s ease;
}
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.modal-dialog {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}
</style>
