<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">Categorías</li>
    </ol>
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-body">
            <!-- Manejo de errores -->
            <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">Categorías</h4>
            <span class="text-dark">En esta página se pueden visualizar las categorías 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 categoría"
                  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
                  id="filtro-ordenar"
                  href
                  @click.prevent="comenzarAMoverElementos(ordenarElementos = !ordenarElementos)"
                >
                  <b-tooltip target="filtro-ordenar" placement="bottom">
                    <span>Ordenar</span>
                  </b-tooltip>
                  <i class="material-icons icon-align" :class="[ordenarElementos ? 'text-primary':'text-danger']">filter_list</i>
                </a>
                <!-- Botones para odernar -->
                <button
                  v-show="updateOrder"
                  class="ml-2 mr-2 btn btn-sm btn-outline-info"
                  @click.prevent="getCategorias();updateOrder = false;ordenarElementos = 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="actualizarOrdenCategorias()"
                  :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-dismis="modal"
                  data-target="#modalCategoria"
                  @click.prevent="seleccionarCategoria('','new')"
                  v-if="strError.length == 0"
                >
                  <i class="material-icons icon-align">add_circle</i> Crear Categoría
                </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.IDSE !== ''
                  ? 'font-bold':'']"
                  @click.prevent="filtroFecha.verModalBusqueda = true"
                >Secciones / Categorías</a>
              </div>

              <div class="btn-group">
                <a
                  href="#"
                  class="dropdown-toggle mr-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.IDSE !== ''"
                >Borrar Filtro</a>
              </div>
            </div>
            <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 categorías</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">Sección</label>
                          <div class="col-sm-9">
                            <select
                              class="custom-select"
                              v-model="clickedFiltro.IDSE"
                              id="estanteFiltro"
                              @change="clickedFiltro.IDCA = ''"
                            >
                              <option value>Seleccione una opción</option>
                              <option
                                v-for="seccion in secciones"
                                :key="seccion.IDSE"
                                :value="seccion.IDSE"
                              >{{seccion.SECC }}</option>
                            </select>
                          </div>
                        </div>
                        <div class="form-group row">
                          <label for="lbl_secciones" class="col-sm-3 col-form-label">Categoría</label>
                          <div class="col-sm-9">
                            <select
                              class="custom-select"
                              v-model="clickedFiltro.IDCA"
                              id="seccionFiltro"
                            >
                              <option value>Seleccione una categoría</option>
                              <option
                                v-for="categoria in categoriasEnModal"
                                :key="categoria.IDCA"
                                :value="categoria.IDCA"
                              >{{categoria.CATE }}</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="modalCategoria"
              tabindex="-1"
              role="dialog"
              aria-labelledby="modalCategoria"
            >
              <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"
                        v-model="clickedCate.CATE"
                        class="form-control"
                        placeholder="Escriba el nombre de la Categoría"
                        name="categoria"
                        v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                        :class="{'input': true, 'is-danger': errors.has('categoria') }"
                      />
                      <span
                        v-show="errors.has('categoria')"
                        class="invalid-feedback-form"
                      >{{ errors.first('categoria') }}</span>
                    </div>
                    <div class="form-group">
                      <label class="font-bold">Sección a vincular</label>
                      <select
                        class="custom-select"
                        v-model="clickedCate.IDSE"
                        name="seccion"
                        v-validate="'required'"
                        :class="{'input': true, 'is-danger': errors.has('seccion') }"
                      >
                        <option value>Seleccione una opción</option>
                        <option
                          v-for="seccion in secciones"
                          :key="seccion.IDSE"
                          :value="seccion.IDSE"
                        >{{seccion.SECC }}</option>
                      </select>
                      <span
                        v-show="errors.has('seccion')"
                        class="invalid-feedback-form"
                      >{{ errors.first('seccion') }}</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="editarCategoria()"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>

                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Agregar'"
                      @click="crearCategoria(clickedCate.CATE,clickedCate.IDSE)"
                      class="btn btn-danger"
                    >{{ mensajeButtonModal }}</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- Start delete categoría modal -->
            <div id="deleteCategoria" class="modal animated bounceInDown fast">
              <div class="modal-dialog">
                <div class="modal-content">
                  <form>
                    <div class="modal-header">
                      <h4 class="modal-title">Borrar Categoría</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>'{{ clickedCate.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="deleteCategoria = false; borrarCategoria()"
                        class="btn btn-danger"
                        value="Borrar"
                        data-dismiss="modal"
                      />
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End delete categoría modal -->
            <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 vinculado</th>
                    <th>Sección vinculada</th>
                    <th>Fecha Creación</th>
                    <th>Fecha de Modificación</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <draggable
                  v-model="categorias"
                  tag="tbody"
                  v-if="categorias.length !== 0"
                  :disabled="!ordenarElementos"
                  @start="drag = true"
                  @end="drag = false"
                  @update="moverCategoria"
                  v-bind="configuracionDragg"
                  :style="ordenarElementos==true ?'background: aliceblue;':''"
                >
                  <tr v-for="categorias in filtroCategorias" :key="categorias.IDCA">
                    <td>
                      <div class="profile-img">
                        <img
                          v-lazy="categorias.IDIM"
                          style="max-width:65px"
                          alt="user"
                          class="img-thumbnail"
                        />
                      </div>
                    </td>
                    <td>{{ categorias.CATE }}</td>
                    <td>
                      <span class="label label-primary">
                        <i class="material-icons icon-align">dns</i>
                        {{ categorias.ESTA }}
                      </span>
                    </td>
                    <td>
                      <span class="label label-info">
                        <i class="material-icons icon-align">collections_bookmark</i>
                        {{ categorias.SECC }}
                      </span>
                    </td>
                    <td>
                      <span v-if="categorias.FECR !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ categorias.FECR | formatDate }}
                      </span>
                    </td>
                    <td>
                      <span v-if="categorias.FEMO !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ categorias.FEMO | formatDate }}
                      </span>
                    </td>
                    <td>
                      <!-- Botones de acciones -->
                      <a
                        href="#modalCategoria"
                        @click="modalCategoria = true; seleccionarCategoria(categorias,'edit')"
                        class="edit"
                        data-toggle="modal"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Editar"
                          style="color:#f42849"
                        >&#xE254;</i>
                      </a>

                      <a
                        href="#deleteCategoria"
                        @click="deleteCategoria = true;seleccionarCategoria(categorias,'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 && filtroCategorias.length !== 0"
                v-model="currentPage"
                :total-rows="categorias.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="categorias.length == 0 &&
                   !loading"
                >No se encontraron categorías para mostrar.</p>
                <p
                  class="mt-3"
                  v-show="categorias.length !== 0 && 
                  filtroCategorias.length === 0 && 
                  (filtroFecha.buscarFechaDias !== 0 || buscar.length !== 0 || clickedFiltro.IDSE !== '') &&
                  !loading"
                >No se encontró ninguna categoría 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: "CategoriasAdmin",
  mixins: [token],
  components: {
    BTooltip,
    uploadImage,
    Multiselect,
    draggable,
    BPagination
  },
  data: () => ({
    deleteCategoria: false,
    mensajeModal: "Agregar categoría",
    mensajeButtonModal: "Agregar",
    clickedCate: {},
    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: async function() {
    await this.getCategorias();
    await this.getSecciones();
    await this.getImages("CA");
  },
  methods: {
    editarCategoria: 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.clickedCate.IDIM = img;
          }
          var formData = this.toFormData(this.clickedCate);
          this.$http
            .post(
              this.url_api + "/categorias/update",
              formData,
              this.config_header
            )
            .then(response => {
              this.clickedCate = {};
              if (!response.data.response) {
                this.$toasted.show(response.data.message, this.$toast_error);
              } else {
                this.$toasted.show(response.data.message, this.$toast_success);
              }
              this.getCategorias();
              this.removeModal("modalCategoria");
            })
            .catch(error => {
              this.strError =
                "Se ha producido un error al actualizar la categoría.";
            });
        }
      });
    },
    seleccionarCategoria: function(categoria, accion) {
      this.clickedCate = {};
      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.clickedCate = { IDSE: "" };
        this.mensajeModal = "Agregar Categoría";
        this.mensajeButtonModal = "Agregar";
      }
      // Si estamos editando
      if (accion == "edit") {
        var datos = {
          IDCA: categoria.IDCA,
          IDSE: categoria.IDSE,
          CATE: categoria.CATE,
          IDIM: categoria.IDIM,
          USMO: this.$store.getters.user.id
        };
        this.clickedCate = datos;
        this.mensajeButtonModal = "Editar";
        this.mensajeModal = "Editar Categoría";
      }
      if (accion == "delete") {
        this.clickedCate = categoria;
      }
    },
    crearCategoria: function(cate, idse) {
      // 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 = {
            CATE: cate,
            IDSE: idse,
            IDIM: imagenUrl,
            USCR: this.$store.getters.user.id
          };
          var formData = this.toFormData(datos);
          this.$http
            .post(this.url_api + "/categorias", 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.getCategorias();
              this.removeModal("modalCategoria");
            })
            .catch(error => {
              this.strError = "Se ha producido un error al crear la categoria.";
            });
        } //end Result
      }); // end validator
    },
    borrarCategoria: function() {
      var formData = this.toFormData(this.clickedCate);
      this.$http
        .post(this.url_api + "/categorias/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.getCategorias();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al borrar la categoría.";
        });
    },
    paginador: function(categorias) {
      // Calcular páginador
      const indiceInicio = (this.currentPage - 1) * this.perPage;
      const indiceFinal =
        indiceInicio + this.perPage > categorias.length
          ? categorias.length
          : indiceInicio + this.perPage;
      return categorias.slice(indiceInicio, indiceFinal);
    },
    moverCategoria: function() {
      this.updateOrder = true;
      var obj = this.categorias;
      var bodyFormData = new FormData();
      obj.forEach((element, i) => {
        i++;
        bodyFormData.append(element.IDCA, i);
      });
      this.arrOrder = bodyFormData;
    },
    actualizarOrdenCategorias: function() {
      var formData = this.arrOrder;
      this.isLoading = true;
      this.$http
        .post(this.url_api + "/categorias/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.getCategorias();
        })
        .catch(error => {
          this.strError = "Se ha producido un error al ordenar la categoría.";
        });
    },
    actualizarImagenes: function(action) {
      if (action) {
        this.getImages("CA");
      }
    },
    borrarFiltro() {
      this.filtroFecha.fechaInicial = "";
      this.filtroFecha.fechaFinal = "";
      this.filtroFecha.buscarFechaDias = 0;
      this.buscar = "";
      this.filtroFecha.filtroSeleccionado = "Cualquier fecha";
      this.clickedFiltro.IDSE = "";
      this.clickedFiltro.IDCA = "";
    },
    comenzarAMoverElementos(ordenandoElementos) {
      this.ordenarElementos = ordenandoElementos;
      if (this.ordenarElementos) {
        this.perPage = this.categorias.length;
        this.paginador(this.categorias);
      } else {
        this.perPage = 25;
        this.paginador(this.categorias);
      }
    }
  },
  computed: {
    categoriasEnModal() {
      let idSeccion = this.clickedFiltro.IDSE;
      return this.categorias.filter(categoria => categoria.IDSE === idSeccion);
    },
    filtroCategorias() {
      var categoriasFiltradas = [];
      var categoriasFiltradasPorInput = [];
      var fechaAhora = moment().format("YYYY-MM-DD");

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

      var categoriasModal = this.categorias.filter(categoria => {
        if (idSeccion !== "" && idCategoria === "") {
          return categoria.IDSE === idSeccion;
        }
        if (idSeccion !== "" && idCategoria !== "") {
          return categoria.IDSE === idSeccion && categoria.IDCA === idCategoria;
        }
        return categoria;
      });

      // filtra por lo que escriba el usuario en la caja de texto
      categoriasFiltradasPorInput = categoriasModal.filter(categoria => {
        return categoria.CATE.toLowerCase().match(this.buscar.toLowerCase());
      });

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

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

          categoriasFiltradas = categoriasFiltradasPorInput.filter(
            categoria => {
              let fechaFormato = moment(categoria.FECR, "DD-MMM-YY").format(
                "YYYY-MM-DD"
              );
              if (
                moment(fechaFormato).isBetween(dias, fechaAhora) ||
                moment(fechaFormato).isSame(fechaAhora)
              ) {
                return categoria;
              }
            }
          );
          break;
        default:
          categoriasFiltradas = categoriasFiltradasPorInput;
          break;
      }
      return this.paginador(categoriasFiltradas);
    }
  }
};
</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;
}

.dropdown-toggle {
  border: 1px solid#d8d8d8;
  padding: 3px;
}
.btn-group label {
  color: #6c757d !important;
}

/* 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>