<template>
  <div class="container">
    <div class="row ">
      <div class="col-md-6 col-sm-12 pt-5">
       
        <div class="row p-0">

            <div class=" p-0 col-12 col-md-12 col-lg-2 col-xl-2 d-flex align-items-center  justify-content-start    flex-row  flex-lg-column flex-xl-column ">
              <div v-bind:key="src.id"
          v-for="src in src"
          @click="src2 = src">
          
              <img :src="src" alt="" class="smalll"   />
       </div>
        
            </div>

             <div class="p-0 col-10 d-flex justify-content-center flex-column align-items-center">
            <img :src="src2" alt="" class="libro" />
            <button class="button pre" @click="showModal()">
              Previsualizar
            </button>
             </div>
        </div>
     
        <div v-if="Visible" @close="closeModal()">
          <transition name="modal">
            <div class="modal-backdrop" @click.self="closeModal()">
              <div
                class="modal"
                role="dialog"
                aria-labelledby="modalTitle"
                aria-describedby="modalDescription"
              >
                <section class="modal-body rounded" id="modalDescription">
                  <iframe
                    :src="PDF"
                    width="100%"
                    height="100%"
                    frameborder="0"
                  ></iframe>
                </section>
              </div>
            </div>
          </transition>
        </div>
        <br /><br />   
      </div>
     
      <div class="col-md-6 col-sm-12 py-5 titulo">
        <b>Titulo:</b>
        <p>{{ titulo }}</p>
        <b>Autor: </b>
        <p>{{ autor }}</p>
        <b>Paginas: </b>
        <p>{{ paginas }}</p>
        <b>ISBN: </b>
        <p>{{ isbn }}</p>
        <b>Año de Impresión: </b>
        <p>{{ edicion }}</p>
        
        <b>Versión:</b>
        <p>{{ version }}</p>
        <b>Descripción:</b>
        <div class="overflow-auto">{{ desc }}</div>
        <b>Precio: </b>
        <p>${{ precio }}</p>

        <b>Cantidad:</b>
<div class="row d-flex align-items-center" >

  <div class="col-2 ">

  <select name="num" id="num">
    <option value="volvo"
    v-for="n in inventario"
    :key="n"
    >
    {{n}}
    </option>
 
  </select>
  </div>
  <div class="col-10">
        <a
          href="https://demo-tienda.acatlan.unam.mx/"
          class="button text-white d-flex justify-content-center align-items-center"
          id="buttonC"
        >
          <p class="text-center">Agregar al carrito</p>
        </a>
        </div>
</div>
      </div>
    </div>
    <Title title="Similares" />
   
    <div class="divMaster row ">
      <div class="col-10 offset-1 d-flex flex-wrap justify-content-center mb-5">
        <!-- <div
          class="card m-3"
          style="width: 12rem;"
          v-bind:key="libro.id"
          v-for="libro in Libros"
          @click="descripcion(libro.id)"
        >
          <div 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>
          </div>
        </div> -->

<div  class="carousel-items card m-3  shadow"
style="width: 12rem;"
                v-bind:key="item.id"
          v-for="item in Libros"
          @click="descripcion(libro.id)"
          
                  >
                      <img :src="item.img" class="card-img-top" alt="img"  />
                      <div class="card-body ">
                        <h5 class="text-center"> <b >${{item.precio}}</b></h5>
                        <p class="card-text overflow-clip">{{item.descripcion}}</p>
                      </div>
  
                </div>  
        
      </div>
    </div>
  </div>
</template>

<script>


import Title from "../components/titulo.vue";


export default {
  
  components: {
    Title
    //modal
  },

  data() {
    return {
      inventario:5,
      idLibro: "",
      titulo: "Procesos sociopolíticos y el espacio urbano. El desarrollo histórico urbano de San José Río Hondo, Naucalpan de Juárez (1700 a.C al 2000 d.C.)",
      autor: "Mario Camacho Cardona",
      paginas: "250",
      isbn: "978-607-02-8433-5",
      edicion: "Primera edición 2016",
      precio: "324",
      src: [ "https://demo-tienda.acatlan.unam.mx/55-large_default/metodos-numericos-para-sistemas-de-ecuaciones-no-lineales-interpolacion-y-ajuste-de-curvas.jpg",
      "https://tienda.acatlan.unam.mx/365-large_default/ganz-toll-breves-apuntes-sobre-la-sintaxis-alemana.jpg",
      "https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg"],
     
     src2:"https://tienda.acatlan.unam.mx/363-large_default/corso-di-lettura-in-italiano-orizzonti-di-lettura-2-livello.jpg",
     version: "Impresa",
      desc: `La obra valora la generación y las trasformaciones de la configuración espacial urbano-regional a través del suceder del desarrollo urbano-regional, provocadas por los modelos económico-políticos, administrativos. El sitio de estudio fue: San José Rio Hondo, ubicado en el Estado de México.`,
      boton2: "",
      categoria: "",
      Libros: [
{
      img:'https://tienda.acatlan.unam.mx/330-home_default/taza-ceramica-.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       } ,
       {
      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       },
         {
      img:'https://tienda.acatlan.unam.mx/3-home_default/problemas-de-estadistica-aplicada-a-las-ciencias-sociales-y-a-la-vida-cotidiana.jpg',
       precio:199.00,
       descripcion:'esta es la descripcion del articulo'
       }   
      

      ],
      Visible: false,

      isModalVisible: false,
      //PDF: "http://www.ataun.eus/bibliotecagratuita/Cl%C3%A1sicos%20en%20Espa%C3%B1ol/Nicol%C3%A1s%20Maquiavelo/El%20pr%C3%ADncipe.pdf#toolbar=0&navpanes=0&scrollbar=0&zoom=80"
      //PDF: "RUTA.pdf" //nombre del archivo de previsualizacion del libro
      PDF: "https://venus.acatlan.unam.mx/portal/PDFget/?nombrePDF=espacio_semico_ambiental.pdf"
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },

    async descripcion(idLibro) {
      localStorage.clear();
      window.localStorage.setItem("idLibro", idLibro);
      location.reload();
    },
    showModal() {
      this.Visible = true;
    },
    closeModal() {
      this.Visible = false;
    }
  }
};

</script>

<style scoped>
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #ffffff;
  box-shadow: 2px 2px 20px 1px;
  /* overflow-x: auto; */
  display: flex;
  flex-direction: column;
  position: relative;

  width: 90%;
  height: 90%;
}

.modal-body {
  /* position: relative; */
  padding: 20px 10px;
}
.divMaster {
  height: auto;
}
.card {
  border: none !important;
  border-bottom: 5px solid #1b3d70 !important;
}
a {
  text-decoration: none !important;
  color: black;
}
.img {
  margin-left: 1rem;
  margin-top: 1rem;
}
.izq {
  display: flex;
  justify-content: flex-start;
}
.button {
  background-color: rgb(187, 136, 0);
  border: none;
  color: white;
  height: 2.5rem;
  width: 15rem;
  text-align: center;

  text-decoration: none;
  display: inline-block;
  font-size: 1.5rem;
  border-radius: .5rem;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-top: 2rem;
}
#buttonC{
   margin-top: 0rem;
}
#buttonC p{
  margin: 0;
  font-size: 80%;
}

.button:hover {
  background-color: #46c200;
  color: white;
}
.pre {
  background-color: #1e3c70;
}
.pre:hover {
  background-color: rgb(187, 136, 0);
}

.titulo {
  font-size: 1rem;
  text-align: left;
  color: balck;
}
p {
  margin-bottom: 0.5rem;
}

.libro {
  width: 320px;
  height: 480px;
  margin-right: 0;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
}
.smalll {
  width: 80px;
 margin: .7rem;

  margin-right: 0;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
}

.modal-backdrop{
  opacity: 1;
}

.shadow{
  -webkit-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
box-shadow: -2px 4px 35px 0px rgba(0,0,0,0.75);
}

@media (max-width: 450px) {
  .libro {
    width: 270px;
    height: 380px;
    margin-right: auto;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.57);
  }
  .button {
    text-align: center;
    margin-top: 3rem;
  }
}

@media screen and (max-width: 380px) {
  .button {
    text-align: center;
    margin-top: 3rem;
  }
  #buttonC{
   margin-top: 0rem;
   width: 12rem;
}
}
</style>