<template>
<div>

<b-row>

<b-col md='2'>
  nº
</b-col>

<b-col md='2'>
  CP
</b-col>

<b-col md='2'>
  Consultora
</b-col>

</b-row>
  <div class="table-responsive">
    
    <table class="table table-custom">
      <orders-header />

    <orders-info-card @deleted="fetchOrders()" v-for="order in orderList" :key="order.id" :order="order" />
    </table>
    
</div>

 <p v-if="loading" class="text-center">
        <b-spinner style="width: 3rem; height: 3rem;" label="Large Spinner" type="grow"></b-spinner>
      </p>

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

  </div>
</template>

<script>
import OrderService from "@/services/resources/OrderService";
import OrdersInfoCard from "@/components/orders/orders-list/OrdersInfoCard.vue";
import OrdersHeader from "@/components/orders/orders-list/OrdersHeader.vue";
import Paginate from "@/components/shared-components/Paginate";

const service = OrderService.build();

export default {
  name: "order-list",
  components: {
    OrdersInfoCard,
    OrdersHeader,
    Paginate
  },
  data() {
    return {
      orders: [],
    loading: false,
      pagination: {
        totalPages: 1,
        currentPage: 1,
        perPage: 20
      }
    };
  },
  computed: {
    orderList() {
      return this.orders;
    }
  },
  methods: {
    toPage(page) {
      this.pagination.currentPage = page;
      this.fetchOrders();
    },
    perPage(qtd) {
      this.pagination.currentPage = 1;
      this.pagination.perPage = qtd;

      this.fetchOrders();
    },
    fetchOrders() {
      var vm = this;
      var withAttributes = "campaign,itens,campaign_benchmarking_range";
      vm.loading = true;
      vm.orders = [];

    if(!this.$store.getters.isSalesConsultant){
      withAttributes = "campaign,itens,campaign_benchmarking_range,sales_consultant.sector.division.region";
      }



      let filters = {
        campaign_id: 20,
        paginate: true,
        order_by: 'id',
        order_direction: "DESC",
        with: withAttributes,
        current_page: this.pagination.currentPage,
        per_page: this.pagination.perPage
      };
      service
        .search(filters)
        .then(response => {
          vm.orders = response.data;
           vm.pagination.totalPages = response.last_page;
          vm.pagination.total = response.total;
          vm.loading = false;
        })
        .catch(err => {
          vm.loading = false;
          console.log(err);
        });
    }

  },
  mounted() {
    this.fetchOrders();
  }
};
</script>

<style scoped>
</style>
