<template>
  <div>
      
    <div class="card sombra">
      <div class="card-body">
       

        <h2 class="card-title">Mi Compra</h2>
        <div class="my-5">
        <div>
        <div v-if="detalles == false">
        <p class="card-text  ">Tienes {{articulos.length}} Articulo(s)</p>
        <a  @click="detalle()" class="text-primary">mostrar detalles</a>
        </div>

        <div v-if="detalles == true">
            <ul class="productos">
              <li v-for="articulo in articulos" :key="articulo.id" >
                <p>{{articulo.nombre}}</p>
                <div class="d-flex justify-content-between">
                <p>{{articulo.cantidad}}pz.</p>
                <p>${{articulo.precio * articulo.cantidad}}</p>
              </div>
              </li>
            </ul>


 <a  @click="detalle()" class="text-primary">ocultar detalles</a>
        </div>

       </div>
       <div class="mt-3">
           <div class="d-flex justify-content-between">
        <p >Subtotal </p>
        <p >${{SubTotal}}</p>
        </div>
        
         <div class="d-flex justify-content-between">
        <p> Envio  </p>
        <p>${{Envio}}</p>
         </div>
     

       <div class="d-flex justify-content-between  align-items-center border-top border-bottom">
        <p> Total  </p>
        <p>${{Total}}</p>
         </div>
       </div>
       </div>
       
      </div>
      <div class="card-footer bg-transparent border-top-0 d-flex justify-content-center">
        <a href="#" class="btn doradoColor text-white my-3">Modificar</a>

      </div>
    </div>
  </div>
  

</template>

<script>
export default {
    data(){
        return{
          detalles:false,
            articulos:[
                {
                    id:0,
                    nombre:'ejemploq',
                    cantidad:'2',
                    precio:'654.00'
                },
                {
                  id:1,
                    nombre:'asdsa',
                    cantidad:'3',
                    precio:'4654.00'
                }
            ],
            SubTotal:'00.00',
            Envio:'00.00',
            Total:'00.00'

        }
    },
    methods:{
      detalle(){
        this.detalles = !this.detalles
      }
    }

}
</script>

<style scoped>
.productos{
  list-style: none;
  padding-left: 0%;
}
.sombra{
  -webkit-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 10px 5px 0px rgba(0,0,0,0.75);
}
.doradoColor{
  background-color: #bb8800 !important;
}
</style>