<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">Archivos</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">Archivos</h4>
            <span class="text-dark">En esta página se pueden visualizar los archivos disponibles.</span>
            <form class="form-material mt-3" @click.prevent>
              <input
                type="text"
                class="form-control col-sm-4 col-11 float-left"
                placeholder="Buscar archivo..."
                v-model="buscar"
              />
              <div class="btn-group dropright">
                <a
                  href="#"
                  class="align-middle"
                  @click.prevent="filtroFecha.verFiltrosBusqueda = !filtroFecha.verFiltrosBusqueda"
                >
                  <i
                    class="material-icons align-middle"
                    style="color: #f42849;padding-top: 8px;"
                  >more_vert</i>
                </a>
              </div>
              <button
                class="btn float-right btn-outline-danger p-1"
                data-toggle="modal"
                data-dismis="modal"
                data-target="#modalArchivos"
                @click="seleccionarArchivo('','new')"
              >
                <i class="material-icons icon-align">add_circle</i> Agregar Archivo
              </button>
            </form>
            <div class="col-sm-12 pt-3">
              <transition
                name="custom-classes-transition"
                enter-active-class="animated fadeInDown"
                leave-active-class="animated fadeOutUp"
              >
                <div class="float-left pb-2" v-show="filtroFecha.verFiltrosBusqueda">
                  <div class="btn-group">
                    <input
                      type="checkbox"
                      class="form-check-input"
                      id="check"
                      v-model="filtroFecha.inputFiltroChecked"
                      @click="filtroFecha.verModalBusqueda=true;"
                    />
                    <label
                      for="check"
                      :class="[filtroFecha.clickedFiltro.IDES !== ''
                     ? 'font-bold':'']"
                    >Estantes / Secciones / Categorías</label>
                  </div>
                  <div class="btn-group">
                    <a
                      href="#"
                      class="dropdown-toggle text-secondary ml-2"
                      data-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                      :class="[filtroFecha.buscarFechaDias !== 0 ? 'font-bold':'']"
                    >Fecha</a>
                    <div class="dropdown-menu">
                      <a
                        class="dropdown-item"
                        href="#"
                        @click.prevent="filtroFecha.buscarFechaDias = 0"
                      >
                        <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">
                        <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"
                      >
                        <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.verFiltroFecha=true;filtroFecha.buscarFechaDias=-2"
                      >
                        <i
                          class="material-icons align-middle"
                          style="font-weight:bold;margin-left: -30px;"
                          v-show="filtroFecha.verFiltroFecha&&filtroFecha.buscarFechaDias==-2||filtroFecha.buscarFechaDias==-1"
                        >check</i>
                        &nbsp; Intervalo personalizado
                      </a>
                    </div>
                  </div>
                  <div class="btn-group">
                    <div
                      class="form-material"
                      v-show="filtroFecha.verFiltroFecha&&filtroFecha.buscarFechaDias==-2||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="borrarFiltroBusqueda()"
                      v-if="buscar.length !== 0 || 
                    filtroFecha.buscarFechaDias !== 0 ||
                    filtroFecha.clickedFiltro.IDES !== '' "
                    >Borrar Filtro</a>
                  </div>
                </div>
              </transition>
            </div>
            <!--  modal agregar / editar -->
            <div
              class="modal animated bounceInDown fast"
              id="modalArchivos"
              tabindex="-1"
              role="dialog"
              aria-labelledby="modalArchivos"
            >
              <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-row">
                      <div class="form-group col-md-6">
                        <label class="font-bold">Nombre</label>
                        <input
                          class="form-control"
                          v-validate="'required|regex:^(?:[A-Za-z0-9 _.]*)$'"
                          :class="{'input': true, 'is-danger': errors.has('nombre') }"
                          v-model="clickedArch.ARCH"
                          name="nombre"
                          placeholder="Nombre del archivo"
                        />
                        <span
                          v-show="errors.has('nombre')"
                          class="invalid-feedback-form"
                        >{{ errors.first('nombre') }}</span>
                      </div>
                      <div class="form-group col-md-6">
                        <label class="font-bold">Estante</label>
                        <select
                          class="custom-select"
                          v-model="clickedArch.IDES"
                          name="estante"
                          v-validate="'required'"
                          :class="{'input': true, 'is-danger': errors.has('estante') }"
                          id="estante"
                          @change="clickedArch.IDSE = ''"
                        >
                          <option value>Seleccione una opción</option>
                          <option
                            v-for="estantes in permisosEstantes"
                            :key="estantes.IDES"
                            :value="estantes.IDES"
                          >{{estantes.ESTA }}</option>
                        </select>
                        <span
                          v-show="errors.has('estante')"
                          class="invalid-feedback-form"
                        >{{ errors.first('estante') }}</span>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label class="font-bold">Sección</label>
                        <select
                          class="custom-select"
                          v-model="clickedArch.IDSE"
                          name="seccion"
                          v-validate.immediate="clickedArch.IDCA !== '' ? 'required' : '' "
                          :class="{'input': true, 'is-danger': errors.has('seccion') }"
                          id="seccion"
                          @input="clickedArch.IDCA = ''"
                        >
                          <option value>Seleccione una opción</option>
                          <option
                            v-for="seccion in permisosSecciones"
                            :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>
                      <div class="form-group col-md-6">
                        <label class="font-bold">Categoría</label>
                        <select class="custom-select" v-model="clickedArch.IDCA">
                          <option value>Seleccione una opción</option>
                          <option
                            v-for="categoria in permisosCategorias"
                            :key="categoria.IDCA"
                            :value="categoria.IDCA"
                          >{{categoria.CATE }}</option>
                        </select>
                      </div>
                    </div>
                    <div class="form-group" v-if="mensajeButtonModal=='Agregar'">
                      <label class="font-bold">Archivo</label>
                      <b-form-file
                        v-model="file"
                        placeholder="Seleccione un archivo..."
                        drop-placeholder="Suelte los archivos aquí..."
                        accept=".xlsx, .pdf, .docx"
                        name="archivo"
                        v-validate="file==null&&mensajeButtonModal=='Agregar' ? 'required' : ''"
                        :class="{'input': true, 'is-danger': errors.has('archivo') }"
                      ></b-form-file>
                      <span
                        v-show="errors.has('archivo') && mensajeButtonModal=='Agregar'"
                        class="invalid-feedback-form"
                      >{{ errors.first('archivo') }}</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 }) => `${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"
                      :disabled="isLoading"
                      data-dismiss="modal"
                    >Cerrar</button>
                    <!-- Buttons save and edit -->
                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Editar'"
                      data-target="#modalCorreo"
                      @click="validarFormEditar()"
                      class="btn btn-danger"
                      :disabled="isLoading"
                    >
                      <div class="save" v-if="!isLoading">
                        <i class="material-icons icon-align">save</i>
                        {{ mensajeButtonModal }}
                      </div>
                      <div class="loading" v-if="isLoading">
                        <span
                          class="spinner-border spinner-grow-sm"
                          role="status"
                          aria-hidden="true"
                        ></span> Cargando...
                      </div>
                    </button>
                    
                    <button
                      type="button"
                      v-if="mensajeButtonModal=='Agregar'"
                      class="btn btn-danger"
                      data-target="#modalCorreo"
                      @click="validarFormulario(clickedArch.ARCH,clickedArch.IDES,clickedArch.IDSE,clickedArch.IDCA);"
                    >
                      <div class="save" v-if="!isLoading">
                        <i class="material-icons icon-align">save</i>
                        {{ mensajeButtonModal }}
                      </div>
                      <div class="loading" v-if="isLoading">
                        <span
                          class="spinner-border spinner-grow-sm"
                          role="status"
                          aria-hidden="true"
                        ></span> Cargando...
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <!-- end modal -->
            
            <!--  Modal notificar por correo -->
            <div id="modalCorreo" class="modal animated bounceInDown fast">
              <div class="modal-dialog">
                <div class="modal-content">
                  <form>
                    <div class="modal-header">
                      <h4 class="modal-title">¿Desea notificar a los usuarios por correo?</h4>
                      <button
                        type="button"
                        class="close"
                        data-dismiss="modal"
                        aria-hidden="true"
                      >&times;</button>
                    </div>
                    <div class="modal-body">
                      <p>
                        Si selecciona "Si" todos los usuarios que tengan permisos para descargar el archivo recibirán un correo electrónico con el aviso; si se selecciona "No", sólo se publicará el archivo sin enviar ninguna notificación.
                      </p>
                    </div>
                    <div class="modal-footer">
                      <input
                        type="button"
                        class="btn btn-default"
                        data-dismiss="modal"
                        value="No"
                        @click="notificarCorreo = 'No'; respuestaModalCorreo(textCorreo); "
                      />
                      <input
                        type="submit"
                        @click="notificarCorreo = 'Si'; respuestaModalCorreo(textCorreo);"
                        class="btn btn-danger"
                        value="Sí"
                        data-dismiss="modal"
                      />
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- end modal notificar por correo-->
            
            <!-- 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 archivos</h6>
                        <button
                          type="button"
                          class="close"
                          @click="filtroFecha.verModalBusqueda = false;filtroFecha.inputFiltroChecked = 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="filtroFecha.clickedFiltro.IDES"
                              id="estanteFiltro"
                              @change="filtroFecha.clickedFiltro.IDSE = ''"
                            >
                              <option value>Seleccione una opción</option>
                              <option
                                v-for="estantes in permisosEstantes"
                                :key="estantes.IDES"
                                :value="estantes.IDES"
                              >{{estantes.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="filtroFecha.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>
                        <div class="form-group row">
                          <label for="lbl_secciones" class="col-sm-3 col-form-label">Categorías</label>
                          <div class="col-sm-9">
                            <select
                              class="custom-select"
                              v-model="filtroFecha.clickedFiltro.IDCA"
                              id="seccionFiltro"
                            >
                              <option value>Seleccione una sección</option>
                              <option
                                v-for="categoria in categoriaFiltro"
                                :key="categoria.IDCA"
                                :value="categoria.IDCA"
                              >{{categoria.CATE }}</option>
                            </select>
                          </div>
                        </div>
                        <button
                          class="btn btn-danger float-right mt-3"
                          @click="filtroFecha.inputFiltroChecked = true;filtroFecha.verModalBusqueda = false;"
                        >Aplicar</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </transition>

            <!-- Start delete categoría -->
            <div id="deleteArchivos" 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>'{{ clickedArch.ARCH }}'</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="borrarArchivo()"
                        class="btn btn-danger"
                        value="Borrar"
                        data-dismiss="modal"
                      />
                    </div>
                  </form>
                </div>
              </div>
            </div>
            <!-- End delete categoría -->
            <div class="table-responsive" 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>Categoría vinculada</th>
                    <th>Fecha Creación</th>
                    <th v-if="$store.getters.user.role === 'admin'">Creado Por</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <draggable
                  v-model="archivos"
                  tag="tbody"
                  v-if="archivos.length != 0"
                  @start="drag=true"
                  @end="drag = false"
                  @update="moverArchivos"
                  v-bind="configuracionDragg"
                >
                  <tr v-for="archivos in buscarArchivo" :key="archivos.IDAR">
                    <td>
                      <div class="profile-img">
                        <img
                          v-lazy="archivos.IDIM"
                          style="max-width:65px"
                          alt="user"
                          class="img-thumbnail"
                        />
                      </div>
                    </td>
                    <td>{{ archivos.ARCH }}</td>
                    <td>
                      <span class="label label-primary">
                        <i class="material-icons icon-align">dns</i>
                        {{ archivos.ESTA }}
                      </span>
                    </td>
                    <td>
                      <span class="label label-info" v-if="archivos.SECC !== null">
                        <i class="material-icons icon-align">collections_bookmark</i>
                        {{ archivos.SECC }}
                      </span>
                    </td>
                    <td>
                      <span class="label label-success" v-if="archivos.CATE !== null">
                        <i class="material-icons icon-align">book</i>
                        {{ archivos.CATE }}
                      </span>
                    </td>
                    <td>
                      <span v-if="archivos.FECR !== null ">
                        <i class="material-icons icon-align" style="color:red">access_time</i>
                        {{ archivos.FECR | formatDate }}
                      </span>
                    </td>
                    <td v-if="$store.getters.user.role === 'admin'">
                      <i class="material-icons icon-align" style="color:red">person</i>
                      <span>{{ archivos.DINOMBRE }}</span>
                    </td>
                    <td>
                      <!-- Botones de acciones -->
                      <a
                        href="#modalArchivos"
                        class="edit"
                        data-toggle="modal"
                        @click="seleccionarArchivo(archivos,'edit')"
                      >
                        <i
                          class="material-icons"
                          data-toggle="tooltip"
                          title="Editar"
                          style="color:#f42849"
                        >&#xE254;</i>
                      </a>
                      <a
                        href="#deleteArchivos"
                        @click="seleccionarArchivo(archivos,'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="archivos.length != 0 && buscarArchivo.length != 0"
                v-model="inicioPagina"
                :total-rows="totalFilas"
                :per-page="porPagina"
                align="center"
              ></b-pagination>
              <!-- Actualizar orden de los archivos  -->
              <button
                v-show="actualizarOrden"
                class="mr-2 btn btn-sm float-right hidden-sm-down btn-outline-success"
                @click="actualizarOrdenArchivos()"
                :disabled="isLoading"
              >
                <div class="save" v-if="!isLoading">
                  <i class="material-icons icon-align">save</i>
                  Guardar Cambios
                </div>
                <div class="loading" v-if="isLoading">
                  <span class="spinner-border spinner-grow-sm" role="status" aria-hidden="true"></span> Cargando...
                </div>
              </button>
              <button
                v-show="actualizarOrden"
                class="mr-2 btn btn-sm float-right hidden-sm-down btn-outline-danger"
                @click="removerOrden()"
                :disabled="isLoading"
              >
                <i class="material-icons icon-align">refresh</i> Deshacer cambios
              </button>
              <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-show="mensajeArchivosVacios"
                >No se encontraron archivos para mostrar.</p>
                <p
                  class="mt-3"
                  v-show=" archivos.length !== 0 && buscarArchivo.length == 0 && archivos.length != 0 && !loading"
                >No se encontró ningún archivo 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";
// Components bootstrap-vue
import { BPagination, BFormFile } from "bootstrap-vue";
// Date Pickers
import format from "date-fns/format";
import "bootstrap-vue/dist/bootstrap-vue.css";
import { BFormCheckbox } from "bootstrap-vue";
import { token } from "../../_mixin/user_mixin.js";
var _ = require("lodash");
export default {
  name: "ArchivosAdmin",
  mixins: [token],
  components: {
    uploadImage,
    Multiselect,
    draggable,
    BPagination,
    BFormFile,
    BFormCheckbox
  },
  data: () => ({
    mensajeArchivosVacios: false,
    estantesPermitidos: [],
    seccionesPermitidas: [],
    categoriasPermitidas: [],
    permisosDatos: [],
    mensajeModal: "Agregar Archivo",
    mensajeButtonModal: "Agregar",
    file: null,
    clickedArch: {
      IDES: "",
      IDSE: "",
      IDCA: ""
    },
    imagen: { IMAG: "Seleccione una imagen de la lista" },
    buscar: "",
    totalFilas: 0,
    porPagina: 25,
    inicioPagina: 1,
    actualizarOrden: false,
    arrOrder: {},
    isLoading: false,
    imagenInvalid: false,
    filtroFecha: {
      fechaLimiteCalendario: moment().format("YYYY-MM-DD"),
      verFiltroFecha: false,
      verFiltrosBusqueda: false,
      verModalBusqueda: false,
      inputFiltroChecked: false,
      fechaInicial: "",
      fechaFinal: "",
      buscarFechaDias: 0,
      clickedFiltro: {
        IDES: "",
        IDSE: "",
        IDCA: ""
      }
    },
    notificarCorreo: 'No',
    textCorreo: ''
  }),
  async mounted() {
    this.permisosDatos = JSON.parse(this.$store.getters.permisos);
    var est = await this.getEstantes();
    var secc = await this.getSecciones();
    var cate = await this.getCategorias();
    var img = await this.getImages("AR");
    var arch = await this.getArchivos(
      this.$store.getters.user.id,
      this.$store.getters.user.role
    );
  },
  methods: {
    editarArchivo: function() {
      var formData = this.toFormData(this.clickedArch);
      let IDES = this.clickedArch.IDES;
      let IDSE = this.clickedArch.IDSE;
      let IDCA = this.clickedArch.IDCA;
      this.isLoading = true;
      this.$http
        .post(
          this.url_api + "/archivos/update",
          formData,
          this.config_header
        )
        .then(response => {
          this.clickedArch = {};
          if (response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_success);
            if(this.notificarCorreo == 'Si'){
              this.buscarUsuariosEnvioCorreo(IDES, IDSE, IDCA);
              this.notificarCorreo = 'No';
            }
            this.getArchivos(
              this.$store.getters.user.id,
              this.$store.getters.user.role
            );
          } else {
            this.$toasted.show(response.data.message, this.$toast_error);
          }
          this.isLoading = false;
          this.removeModal("modalArchivos");
        })
        .catch(error => {
              this.strError =
                "Se ha producido un error al actualizar los archivos.";
              this.removeModal("modalArchivos");
            });
        
    },
    seleccionarArchivo: function(archivos, accion) {
      this.clickedArch = {};
      this.file = null;
      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.clickedArch = { IDES: "", IDSE: "", IDCA: "" };
        this.mensajeModal = "Agregar Archivo";
        this.mensajeButtonModal = "Agregar";
      }
      // Si estamos editando
      if (accion == "edit") {
        let secc = archivos.IDSE !== null ? archivos.IDSE : "";
        let cate = archivos.IDCA !== null ? archivos.IDCA : "";
        var datos = {
          IDAR: archivos.IDAR,
          ARCH: archivos.ARCH,
          IDES: archivos.IDES,
          IDSE: secc,
          IDCA: cate,
          IDIM: archivos.IDIM,
          USMO: this.$store.getters.user.id
        };
        this.clickedArch = datos;
        this.mensajeButtonModal = "Editar";
        this.mensajeModal = "Editar Archivo";
      }
      if (accion == "delete") {
        this.clickedArch = archivos;
      }
    },
    crearArchivo: function(arch, ides, idse, idca) { 
      let imagenUrl = this.imagen.URL;
      var datos = {
        ARCH: arch,
        IDES: ides,
        IDSE: idse,
        IDCA: idca,
        IDIM: imagenUrl,
        USCR: this.$store.getters.user.id,
        NOMBRE_FILE: this.file.name,
        file: this.file
      };
      var formData = this.toFormData(datos);
      this.isLoading = true;
      this.$http
        .post(this.url_api + "/archivos", formData, this.config_header)
        .then(response => {
          if (response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_success);
            if(this.notificarCorreo == 'Si'){
              this.buscarUsuariosEnvioCorreo(ides, idse, idca);
              this.notificarCorreo = 'No';
            }
          } else {
            this.$toasted.show(response.data.message, this.$toast_error);
          }
          this.getArchivos(
            this.$store.getters.user.id,
            this.$store.getters.user.role
          );
          this.isLoading = false;
          this.removeModal("modalArchivos");
        })
        .catch(error => {
          this.removeModal("modalArchivos");
          this.getArchivos(
            this.$store.getters.user.id,
            this.$store.getters.user.role
          );
          this.strError = "Se ha producido un error al crear el archivo.";
        });
    },
    borrarArchivo: function() {
      var formData = this.toFormData(this.clickedArch);
      this.$http
        .post(this.url_api + "/archivos/delete", formData, this.config_header)
        .then(response => {
          if (response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_success);
            this.getArchivos(
              this.$store.getters.user.id,
              this.$store.getters.user.role
            );
          } else {
            this.$toasted.show(response.data.message, this.$toast_error);
          }
        })
        .catch(error => {
          this.strError = "Se ha producido un error al borrar el archivo.";
        });
    },
    moverArchivos: function() {
      this.actualizarOrden = true;
      var obj = this.archivos;
      var bodyFormData = new FormData();
      obj.forEach((element, i) => {
        i++;
        bodyFormData.append(element.IDAR, i);
      });
      this.arrOrder = bodyFormData;
    },
    removerOrden: function() {
      this.getArchivos(
        this.$store.getters.user.id,
        this.$store.getters.user.role
      );
      this.actualizarOrden = false;
    },
    actualizarOrdenArchivos: function() {
      var formData = this.arrOrder;
      this.isLoading = true;
      this.$http
        .post(this.url_api + "/archivos/order", formData, this.config_header)
        .then(response => {
          this.isLoading = false;
          this.actualizarOrden = false;
          if (response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_success);
          } else {
            this.$toasted.show(response.data.message, this.$toast_error);
          }

          this.getArchivos(
            this.$store.getters.user.id,
            this.$store.getters.user.role
          );
        })
        .catch(error => {
          this.strError = "Se ha producido un error al ordenar el archivo,.";
        });
    },
    paginador: function(archivos) {
      // Cálcular páginador
      const indiceInicio = (this.inicioPagina - 1) * this.porPagina;
      const indiceFinal =
        indiceInicio + this.porPagina > archivos.length
          ? archivos.length
          : indiceInicio + this.porPagina;
      return archivos.slice(indiceInicio, indiceFinal);
    },
    borrarFiltroBusqueda: function() {
      this.filtroFecha.verFiltroFecha = false;
      this.filtroFecha.verModalBusqueda = false;
      this.filtroFecha.inputFiltroChecked = false;
      this.filtroFecha.fechaInicial = "";
      this.filtroFecha.fechaFinal = "";
      this.filtroFecha.buscarFechaDias = 0;
      this.buscar = "";
      this.filtroFecha.clickedFiltro.IDES = "";
      this.filtroFecha.clickedFiltro.IDSE = "";
      this.filtroFecha.clickedFiltro.IDCA = "";
    },
    actualizarImagenes: function(action) {
      if (action) {
        this.getImages("AR");
      }
    },
    fachadaSecciones(idEstante) {
      var secciones = [];
      if (idEstante !== "") {
        if (this.permisosDatos.length !== 0) {
          secciones = this.secciones.filter(secc => secc.IDES === idEstante);
          // Verificamos el perfil del usuario
          if (this.permisosDatos[0].children[0].text !== "ADMIN | Ver + Publicar") {
            let estanteSeleccionado = this.estantes.filter(
              est => {
                if(est.IDES == idEstante){
                  return est;
                }
              }
            );

            let ESTA = estanteSeleccionado[0].ESTA;

            let seccionesInEstante = _.values(
              _.filter(this.permisosDatos[0].children, perm => {
                let arrEstanteAndId = perm.text.split(" | ");
                let strEstante = arrEstanteAndId[0].split(" - ");
                return strEstante[0] == ESTA;
              })
            );
            
            // Filtramos solo los permisos de las secciones que tengan permiso = Ver + Publicar
            let seccionesPermisos = _.filter(
              seccionesInEstante[0].children,
              perm => {
                let permiso = perm.text.split(" | ");
                return permiso[1] === "Ver + Publicar";
              }
            );

            // Buscamos las secciones que coincidan con las secciones permisos para saber a cuales esta permitido entrar
            let seccionesPermitidas = _.values(
              _.mapValues(seccionesPermisos, secc => {
                let seccion = secc.text.split(" | ");
                let strSeccion = seccion[0].split(" - ");
                return _.find(secciones, ["SECC", strSeccion[0]]);
              })
            );

            if (seccionesPermitidas.length === 0) {
              // Limpiar categoria
              this.filtroFecha.clickedFiltro.IDCA = "";
              this.clickedArch.IDCA = "";
            }

            secciones = seccionesPermitidas;
          }
        }
        return secciones;
      }
    },
    fachadaCategoria(idEstante, idSeccion) {
      if (idEstante === "") {
        this.clickedArch.IDCA = "";
        this.filtroFecha.clickedFiltro.IDCA = "";
      }
      var categorias = [];
      if (idSeccion !== "") {
        categorias = this.categorias.filter(cate => cate.IDSE === idSeccion);

        // Verificamos el perfil del usuario
        if (this.permisosDatos[0].children[0].text !== "ADMIN | Ver + Publicar") {
          let estanteSeleccionado = this.estantes.filter(
            est => est.IDES === idEstante
          );
          let seccionSeleccionada = this.secciones.filter(
            secc => secc.IDSE === idSeccion
          );
          let SECC = seccionSeleccionada[0].SECC;
          let ESTA = estanteSeleccionado[0].ESTA;

          let permisosInCategorias = [];
          // Encontrar los permisos disponibles para cada sección
          _.filter(this.permisosDatos[0].children, perm => {
            let arrEstante = perm.text.split(" | ");
            let strNombre = arrEstante[0].split(" - ");
            if (strNombre[0] === ESTA) {
              _.filter(perm.children, permiso => {
                let seccion = permiso.text.split(" | ");
                let strSeccion = seccion[0].split(" - ");

                if (strSeccion[0] === SECC) {
                  permisosInCategorias.push(permiso);
                }
              });
            }
          });

          // Filtramos solo los permisos de las categorias que tengan permiso = Ver + Publicar
          let categoriasPermisos = _.filter(
            permisosInCategorias[0].children,
            perm => {
              let permiso = perm.text.split(" | ");
              return permiso[1] === "Ver + Publicar";
            }
          );
          // Buscamos las categorias que coincidan con el nombre de las secciones con permisos Ver y/o Ver + Publicar
          let categoriasPermitidas = _.values(
            _.mapValues(categoriasPermisos, cate => {
              let categoria = cate.text.split(" | ");
              let strCategoria = categoria[0].split(" - ");

              return _.find(categorias, ["CATE", strCategoria[0]]);
            })
          );
          categorias = categoriasPermitidas;
        }
        return categorias;
      }
      if (idSeccion === "") {
        // Limpiar categoria
        this.filtroFecha.clickedFiltro.IDCA = "";
        this.clickedArch.IDCA = "";
      }
    },
    buscarUsuariosEnvioCorreo(ides, idse, idca){
      let data = {
        IDES: ides,
        IDSE: idse,
        IDCA: idca
      };
      data = this.toFormData(data);
      this.$http
        .post(this.url_api + "/envioCorreos", data, this.config_header)
        .then(response => {
          if (response.data.response) {
            this.$toasted.show(response.data.message, this.$toast_success);
          } else {
            this.$toasted.show(response.data.message, this.$toast_error);
          }
          // this.isLoading = false;
          // this.removeModal("modalArchivos");
        })
        .catch(error => {
          this.strError = "Ha ocurrido un error en el envío de correos.";
        });
    },
    validarFormulario(arch, ides, idse, idca){
    // 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) {
          this.showModal('modalCorreo');
          this.textCorreo = 'Nuevo';
        } //end Result
      }); // end validator
      
    },
    validarFormEditar: 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.clickedArch.IDIM = img;
            
          }
          
          this.showModal('modalCorreo');
          this.textCorreo = 'Editando';
        }
      });
    },
    respuestaModalCorreo(text){
      if(text == 'Nuevo'){
        this.crearArchivo(
          this.clickedArch.ARCH, 
          this.clickedArch.IDES, 
          this.clickedArch.IDSE,
          this.clickedArch.IDCA
          );
      }else if(text == 'Editando'){
        this.editarArchivo();
      }
     
    }
  },
  computed: {
    permisosEstantes() {
      if (this.permisosDatos.length) {
        if (this.$store.getters.user.role === "colaborador") {
          let estantesConAcceso = _.filter(
            this.permisosDatos[0].children,
            perm => {
              let permiso = perm.text.split(" | ");
              return permiso[1] === "Ver + Publicar";
            }
          );

          if (this.estantes.length) {
            let estantesPermitidos = _.values(
              _.mapValues(estantesConAcceso, est => {
                let arrEstanteAndId = est.text.split(" | ");
                let strEstante = arrEstanteAndId[0].split(" - ");

                let resultadoFinal = _.find(this.estantes, [
                  "ESTA",
                  strEstante[0]
                ]);
                return resultadoFinal;
              })
            );
            return estantesPermitidos;
          }
        }
        return this.estantes;
      }
    },
    permisosSecciones() {
      let idEstante = this.clickedArch.IDES;
      return idEstante === "" ? [] : this.fachadaSecciones(idEstante);
    },
    permisosCategorias() {
      let idEstante = this.clickedArch.IDES;
      let idSeccion = this.clickedArch.IDSE;
      return idEstante === "" && idSeccion === ""
        ? []
        : this.fachadaCategoria(idEstante, idSeccion);
    },
    seccionesFiltro() {
      let idEstante = this.filtroFecha.clickedFiltro.IDES;
      return idEstante === "" ? [] : this.fachadaSecciones(idEstante);
    },
    categoriaFiltro() {
      let idEstante = this.filtroFecha.clickedFiltro.IDES;
      let idSeccion = this.filtroFecha.clickedFiltro.IDSE;
      return idEstante === "" && idSeccion === ""
        ? []
        : this.fachadaCategoria(idEstante, idSeccion);
    },
    buscarArchivo() {
       var palabraAbuscar = this.buscar.toLowerCase();
      // Fecha actual
      var fechaAhora = moment().format("YYYY-MM-DD");
      // Arrays Temporales
      var archivosFiltrados = [];
      var filtroArchivosModal = [];
      var filtroArchivosInput = [];

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

      filtroArchivosModal = this.archivos.filter(archivo => {
        if (idEstante !== "" && idSeccion === "" && idCategoria === "") {
          return archivo.IDES === idEstante;
        }
        if (idEstante !== "" && idSeccion !== "" && idCategoria === "") {
          return archivo.IDES === idEstante && archivo.IDSE === idSeccion;
        }
        if (idEstante !== "" && idSeccion !== "" && idCategoria !== "") {
          return (
            archivo.IDES === idEstante &&
            archivo.IDSE === idSeccion &&
            archivo.IDCA === idCategoria
          );
        }
        return archivo;
      });

      // filtra por lo que escriba el usuario en la caja de texto
      filtroArchivosInput = filtroArchivosModal.filter(arch => {
        return (
          arch.ARCH.toLowerCase().match(palabraAbuscar) ||
          arch.ESTA.toLowerCase().match(palabraAbuscar) ||
          (arch.SECC !== null &&
            arch.SECC.toLowerCase().match(palabraAbuscar)) ||
          (arch.CATE !== null && arch.CATE.toLowerCase().match(palabraAbuscar))
        );
      });

      // Filtrar por rango de fecha
      switch (this.filtroFecha.buscarFechaDias) {
        case -1:
          archivosFiltrados = filtroArchivosInput.filter(arch => {
            let fechaFormato = moment(arch.FECR, "DD-MMM-YY").format(
              "YYYY-MM-DD"
            );

            if (
              !(
                moment(fechaFormato).isBefore(this.filtroFecha.fechaInicial) ||
                moment(fechaFormato).isAfter(this.filtroFecha.fechaFinal)
              )
            ) {
              return filtroArchivosInput;
            }
          });
          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");
          // filtramos que nuestra fecha esté en el intervalo
          archivosFiltrados = filtroArchivosInput.filter(arch => {
            let frm = moment(arch.FECR, "DD-MMM-YY").format("YYYY-MM-DD");
            if (
              moment(frm).isBetween(dias, fechaAhora) ||
              moment(frm).isSame(fechaAhora)
            ) {
              return filtroArchivosInput;
            }
          });
          break;
        default:
          archivosFiltrados = filtroArchivosInput;
          break;
      } // End Switch

      this.totalFilas = archivosFiltrados.length;
      if (archivosFiltrados.length === 0) {
        this.mensajeArchivosVacios = true;
      }
      return this.paginador(archivosFiltrados);
    }
  }
};
</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;
}
.dropdown-item {
  padding: 0px 7px 2px 40px;
}
.btn-group label {
  color: #6c757d !important;
}
/* Modal Filtro */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.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);
}
.dropdown-toggle {
  border: 1px solid#d8d8d8;
  padding: 3px;
}
</style>