<template>
  <div class="divMaster row mb-5">
    <div class="col-10 offset-1 d-flex flex-wrap justify-content-center">
      <div
        class="card m-3"
        style="width: 12rem;"
        v-bind:key="libro.id"
        v-for="libro in Libros"
        @click="descripcion(libro.id)"
      >
        <router-link :to="{ path: 'home' }" class="textt">
          <img :src="libro.img" class="card-img-top rounded" alt="libro" />
          <div class="card-body cd textt">
            <p class="card-text textt">
              {{ libro.title }}
            </p>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
export default {
  data() {
    return {
      Libros: []
    };
  },
  methods: {
    async descripcion(idLibro) {
      console.log(` Este es el id del libro ${idLibro}`);
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      this.$router.push("/desc");
    }
  },
  async created() {
    try {
      let novedades = await axios.get(`${config.api}/librosNovedades`);
      let path = `${config.api}/libroImagen?idLibro=`;
      novedades = novedades.data.data;
      console.log(`${novedades}`);
      for (let i = 0; i < novedades.length; i++) {
        //alert(novedades[i].titulo);
        //this.Libros[i].title = novedades[i].titulo;
        let config = {
          // example url
          url: `${path}${novedades[i].idLibro}`,
          method: "GET",
          responseType: "blob"
        };
        try {
          await axios(config).then(response => {
            let reader = new FileReader();
            reader.readAsDataURL(response.data);
            reader.onload = () => {
              this.Libros.push({
                id: novedades[i].idLibro,
                title: novedades[i].titulo,
                img: reader.result
              });
            };
          });
        } catch (error) {
          console.log(`No existe esa imagen`);
        }
      }
    } catch (error) {
      console.log(`Ocurrio un error ${error}`);
    }
  }
};
</script>

<style scoped>
.divMaster {
  height: auto;
}
.card {
  border: none !important;
  border-bottom: 5px solid #1b3d70 !important;
}
a {
  text-decoration: none !important;
  color: black;
}
</style>
