<template>
  <div class="mt-5">
    <div class="container-fluid whithoutPadding" id="divSecciones">
      <div class="row pt-4">
        <div class="col-sm-3">
          <div class="row mt-3 mb-3">
            <div class="col-sm-12" v-if="estanteActivo">
              <div
                class="card text-left shadow-sm w-50"
                style="border: 1px solid red;margin:0 auto;"
              >
                <h6 class="text-danger mt-2 ml-1 p-1">{{ estanteActivo.nombre }}</h6>
                <img class="img-responsive p-1" :src="estanteActivo.img" />
              </div>
            </div>
          </div>

          <div class="row" style="background: #E30425 none repeat scroll 0% 0%">
            <div class="col-sm-12 p-4">
              <h6 class="pb-1 text-white">BUSCAR</h6>
              <div class="input-group">
                <div class="input-group-append">
                  <span class="input-group-text" id="inputGroup">
                    <i class="material-icons">search</i>
                  </span>
                </div>
                <input
                  type="text"
                  class="form-control"
                  v-model="buscar"
                  :placeholder="[tabActive === 'section' ? 'Buscar sección' : 'Buscar archivo']"
                />
              </div>
              <hr />

              <h6 class="pb-1 text-white">ORDENAR POR</h6>
              <div class="datepicker-trigger">
                <div class="input-group">
                  <div class="input-group-append">
                    <span class="input-group-text" id="basic-addon2">
                      <i class="material-icons align-middle">date_range</i>
                    </span>
                  </div>
                  <input
                    type="text"
                    class="form-control"
                    id="datepicker-trigger"
                    placeholder="Selecciona un rango"
                    :value="formatoFechaCalendario(filtroFecha.fechaInicial,filtroFecha.fechaFinal)"
                  />
                </div>
                <p>
                  <a
                    href="#"
                    @click.prevent="filtroFecha.fechaInicial='';
                    filtroFecha.fechaFinal='';
                    filtroFecha.activar = false"
                    class="btn btn-sm btn-danger bg-dark text-white mt-3 float-right"
                    v-show="filtroFecha.fechaInicial !== ''&&filtroFecha.fechaFinal !== ''"
                  >Borrar filtro</a>
                </p>
              </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.activar = true"
              />
            </div>
          </div>
        </div>
        <div class="col-sm-9">
          <div class="container-fluid background-todosEstantes">
            <div class="col-sm-12">
              <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                  <li class="breadcrumb-item">
                    <router-link
                      :to="{ name: 'home' }"
                      class="text-danger"
                    >Estantes: {{ $route.params.est | capitalize }}</router-link>
                  </li>
                  <li class="breadcrumb-item active" aria-current="page">Secciones</li>
                </ol>
              </nav>
            </div>
            <div class="col-sm-12 pb-1">
              <h4 class="text-center mt-5">
                {{ tabActive === 'section' ? 'SECCIONES':'ARCHIVOS' }} EN
                <span
                  class="text-danger"
                >{{ estanteActivo.nombre }}</span>
              </h4>
              <hr
                style="border: 3px solid #E30425;
                width: 40px;
                border-radius: 30px 30px 30px 30px;"
              />
            </div>
            <nav>
              <div class="nav nav-tabs justify-content-center" id="nav-tab" role="tablist">
                <a
                  class="nav-item nav-link active"
                  id="nav-secciones-tab"
                  data-toggle="tab"
                  href="#nav-sections"
                  role="tab"
                  aria-controls="nav-sections"
                  aria-selected="true"
                  @click="tabActive='section'"
                >
                  Secciones
                  <span class="badge badge-danger">{{ seccionesFilter.length }}</span>
                </a>
                <a
                  class="nav-item nav-link"
                  id="nav-documents-tab"
                  data-toggle="tab"
                  href="#nav-documents"
                  role="tab"
                  aria-controls="nav-documents"
                  aria-selected="false"
                  @click="tabActive='files'"
                >
                  Archivos
                  <span class="badge badge-danger">{{ archivosFilter.length }}</span>
                </a>
              </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
              <div
                class="tab-pane fade show active"
                id="nav-sections"
                role="tabpanel"
                aria-labelledby="nav-secciones-tab"
              >
                <!-- start secciones -->
                <div class="row m-3">
                  <div class="col-sm-12">
                    <transition-group name="flip-list" tag="a">
                      <div
                        v-for="seccion in buscarSeccion"
                        :key="seccion.IDSE"
                        class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 list-item"
                        style="cursor:pointer"
                      >
                        <router-link
                          :to="{ name:'seccion', params:  { sec: slug( seccion.SECC ) } }"
                          tag="div"
                          class="ribbon-wrapper-reverse card shadow-sm p-1"
                        >
                          <h6 class="mb-0 ml-3 mr-3 mt-3">{{ seccion.SECC }}</h6>
                          <img class="img-responsive p-1" v-lazy="seccion.IDIM" />
                          <label class="m-1 label text-muted">Publicado el {{ seccion.FECR }}</label>
                        </router-link>
                      </div>
                    </transition-group>
                    <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>
                    <p v-if="mensajeSeccionesVacias">No se encontraron secciones para este estante.</p>
                    <p
                      class="text-center"
                      v-if="buscarSeccion.length === 0 &&
                      !loading && 
                      (buscar !== '' || filtroFecha.fechaFinal !== '')"
                    >No se encontraron resultados para su búsqueda.</p>
                  </div>
                </div>
                <!-- end secciones -->
              </div>
              <div
                class="tab-pane fade"
                id="nav-documents"
                role="tabpanel"
                aria-labelledby="nav-documents-tab"
              >
                <!-- start documentos -->
                <div class="row m-3">
                  <div class="col-sm-12">
                    <transition-group name="flip-list" tag="div">
                      <div
                        v-for="archivo in buscarArchivos"
                        :key="archivo.IDAR"
                        class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-3 list-item"
                        style="cursor:pointer"
                      >
                        <div
                          class="card p-1"
                          @click.prevent="downloadFile(archivo.IDAR,archivo.ARCH)"
                        >
                          <img v-lazy="archivo.IDIM" class="card-img-top" />
                          <div class="card-body">
                            <h6 class="text-center">{{ archivo.ARCH }}</h6>
                            <label
                              class="text-center label text-muted"
                            >Publicado el {{ archivo.FECR }}</label>
                          </div>
                        </div>
                      </div>
                    </transition-group>
                    <p v-if="archivosFilter.length === 0 && !loading" class="text-center">
                      <img
                        class="img-responsive"
                        :src="require('@/assets/images/no-files.png')"
                        alt="Sin Archivos"
                        style="max-width:600px"
                      />
                    </p>
                    <p
                      class="text-center"
                      v-if="buscarArchivos.length === 0 && !loading  && 
                      (buscar !== '' || filtroFecha.fechaFinal !== '')"
                    >No se encontraron resultados para su búsqueda.</p>
                  </div>
                </div>
                <!-- end documentos -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- start toast de descarga -->
      <div
        role="status"
        aria-live="polite"
        aria-atomic="true"
        class="toast"
        data-autohide="false"
        data-animation="true"
        id="toastNew"
      >
        <div class="toast-header">
          <i class="material-icons v-middle">save_alt</i>
          <strong v-if="downloadingFile">Descargando archivo...</strong>
          <strong class="mr-auto" v-else-if="downloadedItem.length == 1">
            Se ha descargado
            <span class="badge badge-danger badge-pill">1</span> elemento
          </strong>
          <strong class="mr-auto" v-else>
            Se han descargado
            <span class="badge badge-danger badge-pill">{{ downloadedItem.length }}</span> elementos
          </strong>
          <button
            class="ml-3 mb-1 close"
            type="button"
            data-toggle="collapse"
            data-target="#downloadFiles"
            aria-expanded="false"
            aria-controls="downloadFiles"
          >
            <i
              class="material-icons v-middle"
              @click="toastCollapse=true"
              v-if="!toastCollapse"
            >keyboard_arrow_down</i>
            <i
              class="material-icons v-middle"
              @click="toastCollapse=false"
              v-if="toastCollapse"
            >keyboard_arrow_up</i>
          </button>
          <button
            type="button"
            class="ml-2 mb-1 close"
            data-dismiss="toast"
            aria-label="Close"
            @click="downloadedItem= []"
          >
            <i class="material-icons v-middle">close</i>
          </button>
        </div>
        <div class="collapse" id="downloadFiles">
          <div class="toast-body">
            <div class="row p-1" v-for="item in downloadedItem" :key="item.index">
              <div class="col-sm-12">
                <img
                  class="img_toast"
                  src="https://statics.solerpalau.com/skin/frontend/solerpalau/default/images/svg/icon_pdf_1.svg"
                />
                {{ item.nombre }}
                <i
                  class="material-icons spin"
                  style="color:  rgb(92, 184, 92);vertical-align:middle;float:right"
                  v-if="item.loading"
                >sync</i>
                <i
                  class="material-icons"
                  style="color:  rgb(92, 184, 92);vertical-align:middle;float:right"
                  v-else
                >check_circle_outline</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- end toast downloads -->
    </div>
  </div>
</template>
<script>
import { token } from "../../_mixin/user_mixin.js";
import { downloadMixin } from "../../_mixin/public_mixin.js";
var _ = require("lodash");
export default {
  name: "Secciones",
  mixins: [downloadMixin, token],
  components: {},
  data() {
    return {
      mensajeSeccionesVacias: false,
      tabActive: "section",
      permisosDatos: [],
      seccionesPermitidas: [],
      estanteActivo: {
        IDES: "",
        img: "",
        nombre: ""
      }
    };
  },
  async mounted() {
    var est = await this.getEstantes();
    var secc = await this.getSecciones();
    var arch = await this.getArchivosPublicos();
    this.permisosDatos = JSON.parse(this.$store.getters.permisos);

    Promise.all([est, secc, arch])
      .then(values => {
        this.permisosSecciones();
      })
      .catch(err => {
        console.log(err);
      });
  },
  methods: {
    permisosSecciones() {
      if (this.$store.getters.user.role === "colaborador") {
        // Buscamos los permisos que coincidan con el estante activo
        let seccionesInEstante = _.values(
          _.filter(this.permisosDatos[0].children, perm => {
            let seccion = perm.text.split(" | ");
            let strPermiso = seccion[0].split(" - ");
            return strPermiso[0] === this.estanteActivo.nombre;
          })
        );
        // Filtramos solo los permisos de las secciones que tengan permiso !== Sin Acceso
        let seccionesPermisos = _.filter(
          seccionesInEstante[0].children,
          perm => !perm.text.match("Sin Acceso")
        );
        // filtramos las secciones que le pertenecen al estante activo
        let secciones = this.secciones.filter(
          secc => secc.IDES === this.estanteActivo.IDES
        );
        // Buscamos las secciones que coincidan con el nombre de las secciones con permisos Ver y/o Ver + Publicar
        let seccionesPermitidas = _.values(
          _.mapValues(seccionesPermisos, secc => {
            let seccion = secc.text.split(" | ");
            let strSeccion = seccion[0].split(" - ");
            return _.find(secciones, ["SECC", strSeccion[0]]);
          })
        );
        this.seccionesPermitidas = seccionesPermitidas;
      }
      if (this.$store.getters.user.role === "admin") {
        this.seccionesPermitidas = this.secciones.filter(
          secc => secc.IDES === this.estanteActivo.IDES
        );
        this.mensajeSeccionesVacias =
          this.seccionesPermitidas.length === 0 ? true : false;
      }
    }
  },
  computed: {
    buscarSeccion() {
      if (
        this.tabActive === "section" &&
        (this.buscar.length !== 0 || this.filtroFecha.activar)
      ) {
        // la funcion filtrarFecha viene de public_mixin.js
        var seccionesFiltroFecha = this.filtrarFecha("sec");
        this.scrollBottom();
        return seccionesFiltroFecha.filter(secc => {
          return secc.SECC.toLowerCase().match(this.buscar.toLowerCase());
        });
      }
      return this.seccionesFilter;
    },
    seccionesFilter() {
      if (this.estantes.length !== 0) {
        var arrFilter = this.estantes.filter(
          esta => this.slug(esta.ESTA) === this.$route.params.est
        );
        if (arrFilter.length !== 0) {
          this.estanteActivo.IDES = arrFilter[0].IDES;
          this.estanteActivo.img = arrFilter[0].IDIM;
          this.estanteActivo.nombre = arrFilter[0].ESTA;
          return this.seccionesPermitidas;
        }
        return [];
      }
      return [];
    },
    buscarArchivos() {
      if (
        this.tabActive === "files" &&
        (this.buscar.length !== 0 || this.filtroFecha.activar)
      ) {
        this.scrollBottom();
        var archivosFiltroFecha = this.filtrarFecha("arch");
        return archivosFiltroFecha.filter(arch => {
          return arch.ARCH.toLowerCase().match(this.buscar.toLowerCase());
        });
      }
      return this.archivosFilter;
    },
    archivosFilter() {
      if (this.archivosPublicos.length !== 0) {
        return this.archivosPublicos.filter(arch => {
          return (
            arch.IDES === this.estanteActivo.IDES &&
            arch.IDSE == null &&
            arch.IDCA == null
          );
        });
      }
      return [];
    }
  }
};
</script>

<style scoped>
#divSecciones {
  background: #fff;
}
.container-fluid.whithoutPadding {
  padding: 0px 0px !important;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spin {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.img_toast {
  width: 28px;
  margin-right: 8px;
  margin-top: -6px;
  float: left;
}
.toast_load {
  background: rgb(248, 103, 103) !important;
}
.toast_success {
  background: rgb(92, 184, 92) !important;
}
#toastNew {
  margin: auto;
  text-align: center;
  border-radius: 4px;
  position: fixed;
  z-index: 1;
  right: 10px;
  bottom: 30px;
  font-size: 15px;
  padding: 10px;
}
.toast {
  max-width: 380px !important;
}
.card {
  transition: ease-in 0.3s;
}
.card:hover {
  box-shadow: 0 0.6rem 0.95rem rgba(0, 0, 0, 0.18) !important;
}
/* transition flip */
.flip-list-move {
  transition: transform 0.8s;
}
.list-item {
  display: inline-block;
  margin-bottom: 10px;
}
a {
  color: #e30425;
  text-decoration: none;
  background-color: transparent;
}

a:hover {
  color: #dc3545;
}
</style>