<template>
  <div>
    <b-row>
      <b-col>
        <product-list-header @order-by="orderBy" @search="searchBy" />
      </b-col>
    </b-row>

    <b-row>
      <b-col v-show="sending">

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

      </b-col>
      <b-col v-if="productList.length > 0">
      
        <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>

    <paginate
      :totalPages="pagination.totalPages"
      :activePage="pagination.currentPage"
      @to-page="toPage"
      @per-page="perPage"
    />
  </div>
</template>

<script>
import ProductService from "@/services/resources/ProductPerCampaignService";
import ProductListHeader from "@/components/products/product-list/ProductListHeader.vue";
import ProductInfoCard from "@/components/products/product-list/ProductInfoCard.vue";
import Paginate from "@/components/shared-components/Paginate";
import { send } from 'q';

const service = ProductService.build();

export default {
  name: "product-list",
  props: {
    categories: {
      type: Array,
      dafault: () => {
        return [];
      }
    }
  },
  components: {
    ProductListHeader,
    ProductInfoCard,
    Paginate
  },
  data() {
    return {
      products: [],

      pagination: {
        totalPages: 1,
        currentPage: 1,
        perPage: 20
      },
      name: "",
      order: "",
      sending: false
    };
  },
  watch: {
    categories: {
      handler: function(val, oldVal) {
        this.pagination.currentPage = 1;
        this.fetchProducts();
      },
      deep: true
    }
  },
  computed: {
    productList() {
      return this.products;
    }
  },
  methods: {
    toPage(page) {
      this.pagination.currentPage = page;
      this.fetchProducts();
    },
    perPage(qtd) {
      this.pagination.currentPage = 1;
      this.pagination.perPage = qtd;

      this.fetchProducts();
    },
    fetchProducts() {
      var vm = this;

      let filters = this.getFilters();
      this.sending = true;
      this.products = [];
      this.pagination.totalPages = 1;
      service
        .search(filters)
        .then(response => {
          vm.products = response.data;
          vm.pagination.totalPages = response.last_page;
          vm.sending = false;
        })
        .catch(err => {
          console.log(err);
          vm.sending = false;
        });
    },
    getFilters() {
      let filters = {
        campaign_id: 20,
        paginate: true,
        current_page: this.pagination.currentPage,
        per_page: this.pagination.perPage
      };

      if (this.categories.length > 0) {
        filters.categories = this.categories;
      }

      if (this.name.length > 0) {
        filters.name = this.name;
      }

  if(this.order.length > 0){
  filters.order_by = this.order;
  }

      return filters;
    },
    searchBy(name) {
      this.name = name;
      this.pagination.currentPage = 1;
      this.fetchProducts();
    },
    orderBy(orderBy){
      this.order = orderBy;
      this.pagination.currentPage = 1;
      this.fetchProducts();
    }
  },
  mounted() {
    this.fetchProducts();
  }
};
</script>

<style scoped>
</style>
