<template>
<div>


    <b-row v-show="loading">

    <b-col >

         <b-spinner style="width: 3em; height: 3em;" larger type="grow" ></b-spinner>

      </b-col>
    </b-row>
<b-row v-if="productList.length > 0 && !loading">

   <b-col >
      
        <div v-for="productPerCampaign in productList" :key="productPerCampaign.id">
          <product-info-card
            :name="productPerCampaign.product.name"
            :code="productPerCampaign.product.code"
            :product_category="productPerCampaign.product.product_subcategory.product_category.name"
            :price="productPerCampaign.catalog_value"
            :regular_price="productPerCampaign.regular_price"
            :page="productPerCampaign.page"
          />
        </div>
      </b-col>
</b-row>
</div>
</template>

<script>
import ProductService from "@/services/resources/ProductPerCampaignService";
import ProductListHeader from "./ProductListHeader.vue";
import ProductInfoCard from "./ProductInfoCard.vue";
const service = ProductService.build();
export default {
    components:{
ProductListHeader,
ProductInfoCard
    },
    data(){
        return {
            loading: false,
            products: []
        }
    },
    computed:{
        productList(){
            return this.products;
        }
    },
methods:{
    search(){
        var vm = this;

        service.search({best_sellers: true, limit:20})
        .then(resp => {
            vm.loading = false;
            vm.products = resp;
        })
        .catch(err => {
            vm.loading = false;
            vm.$fire({
                title: "Falha ao buscar produtos",
                icon: "error"
            });
        });
    }
},
mounted(){
    this.search();
}    
}

</script>