<template>
  <div class="divMaster doradoUnam row d-flex justify-content-center">
    <div class="col-10 offset-1">
      <nav class="navbar navbar-expand-sm navbar-dark  ">
        <button
          @click="method()"
          class="navbar-toggler col-5"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon blanco d-flex"></span>
          <!-- <span class="mx-2">Menu</span> -->
        </button>

        <div class="collapse navbar-collapse " id="navbarTogglerDemo02">
          <ul
            class="navbar-nav mr-auto w-100 d-flex align-items-center justify-content-between mt-0 mt-lg-0"
          >
            <li class="nav-item">
              <a class="nav-link text-white" href="#" @click="inicio()"
                >Inicio</a
              >
            </li>
            <li class="nav-item">
              <a class="nav-link text-white" href="#" @click="presentacion()"
                >Presentación</a
              >
            </li>

            <li class="nav-item ">
              <div class="dropdown">
                <a
                  class="btn nav-link  dropdown-toggle text-white"
                  href="#"
                  role="button"
                  id="dropdownMenuLink"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Libros
                </a>

                <div
                  class="dropdown-menu azulUnam"
                  aria-labelledby="navbarDropdown"
                >
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Ciencias Socioeconomicas')"
                    >Ciencias Socioeconomicas</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Diseño y Edificacion')"
                    >Diseño y Edificacion</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Enseñanza de Idiomas')"
                    >Enseñanza de Idiomas</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Estudios de Posgrado')"
                    >Estudios de Posgrado</a
                  >
                  <div class="dropdown-divider "></div>
                  <a
                    class="dropdown-item text-white "
                    @click="tema('Humanidades')"
                    >Humanidades</a
                  >
                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Matematicas e Ingenieria')"
                    >Matemáticas e Ingenieria</a
                  >

                  <div class="dropdown-divider"></div>
                  <a
                    class="dropdown-item text-white"
                    @click="tema('Universidad Abierta y Educación a Distancia')"
                    >Universidad Abierta y Educación a Distancia</a
                  >
                </div>
              </div>
            </li>

            <li class="nav-item">
              <a class="nav-link text-white" href="#" @click="difusion()"
                >Difusión Editorial</a
              >
            </li>
          </ul>
        </div>

        <form
          id="buscador"
          v-if="isExist"
          class="form-inline   my-0 my-lg-0 buscador col-4 d-flex justify-content-end"
        >
          <div class="input-group input-group-sm mb-0">
            <input
              type="text"
              class="form-control reIzq "
              placeholder="Buscar"
              aria-label="Recipient's username"
              aria-describedby="basic-addon2"
              v-model="nombre"
            />
            <div class="input-group-append reDer bg-white dropdown">
              <button class="btn  my-0" type="submit">
                <svg
                  width="1em"
                  height="1em"
                  viewBox="0 0 16 16"
                  class="bi bi-search blanco"
                  fill="currentColor"
                >
                  <path
                    fill-rule="evenodd"
                    d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z"
                  />
                  <path
                    fill-rule="evenodd"
                    d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z"
                  />
                </svg>
              </button>
            </div>
          </div>
          <!-- <div>-->
          <div v-if="nombre.length > 2" class=" rescont   ">
            <ul class=" dropdown-menu d-block  dropdown-menu-right  ">
              <li
                class=" dropdown-item dropdown-itemBusqueda text-wrap "
                v-for="item in buscarLibro"
                v-bind:key="item.idLibro"
                @click="descripcion(item.idLibro)"
              >
                {{ item.titulo }}
              </li>
            </ul>

            <!-- <ul class=" dropdown-menu d-block  dropdown-menu-right">
                    <li class="dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>

          <li class="dropdown-item dropdown-itemBusqueda text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>
          <li class=" dropdown-item  text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>

          <li class=" dropdown-item text-wrap">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat nam molestiae delectus aliquid dignissimos ullam illo provident laborum perspiciatis sapiente. Officiis eveniet animi ad beatae iusto cupiditate earum quo enim?</li>

          </ul> -->
          </div>
        </form>
      </nav>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
export default {
  data() {
    return {
      isExist: true,
      libros: [],
      nombre: ""
    };
  },
  methods: {
    async descripcion(idLibro) {
      console.log(` Este es el id del libro ${idLibro}`);
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      this.$router.push("/desc").catch(() => {
        location.reload();
      });
    },
    inicio() {
      this.$router.push("/").catch(() => {
        location.reload();
      });
    },
    difusion() {
      this.$router.push("/difusion").catch(() => {
        location.reload();
      });
    },
    presentacion() {
      this.$router.push("/presentacion").catch(() => {
        location.reload();
      });
    },
    async tema(categoria) {
      window.localStorage.setItem("categoria", categoria);
      this.$router.push("/tema").catch(() => {
        location.reload();
      });
    },
    method() {
      this.isExist = !this.isExist;
    }
  },
  async created() {
    let path = `${config.api}`;
    try {
      let libros = await axios.get(`${path}/getLibros`);
      this.libros = await libros.data.data;
    } catch (error) {
      console.log(`Error ${error}`);
    }
  },
  computed: {
    buscarLibro: function() {
      return this.libros.filter(item =>
        item.titulo.toLowerCase().includes(this.nombre.toLowerCase())
      );
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.divMaster {
  /* max-width: 1280px; */
  height: auto;
  margin: 0 auto;
}
nav {
  padding: 0.5rem 0;
}

.azulUnam {
  background-color: #1e3c70;
}

.doradoUnam {
  background-color: #bb8800;
}

.dropdown-item:hover {
  background-color: #bb8800;
}

.dropdown-itemBusqueda:hover {
  background-color: #1e3c70;
  color: white;
}

.nav-link:focus {
  background-color: #1e3c70;
  border-radius: 1rem;
}

.nav-link:hover {
  background-color: #1e3c70;
  color: white;
  border-radius: 0.2rem;
}

.nav-link {
  transition: 0.3s;
  font-size: 20px;
}

.dropdown-item {
  padding: 0.3rem 1rem;
}

.menuText {
  display: none;
}

.reDer {
  border-top-right-radius: 20px 20px !important;
  border-bottom-right-radius: 20px 20px !important;
}

.reIzq {
  border-top-left-radius: 20px 20px !important;
  border-bottom-left-radius: 20px 20px !important;
}

/* 
.dropdown-menu {
  width: 10% !important;
} */

.dropdown {
  position: relative;
  display: inline-block;
  height: auto;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  /* padding: 12px 16px; */
  top: 0.8rem;
  left: -10rem;
  display: block;
}
.rescont {
  z-index: 2;
}

.list-group-item {
  padding: 12px 16px;
}

.navbar-toggler {
  font-size: 1rem;
}
.navbar-dark .navbar-toggler {
  border: none;
}

@media (max-width: 450px) {
  .menuText,
  .buscador {
    display: block !important;
  }

  .dropdown-menu {
    width: 80vw !important;
  }
}
</style>
