<script setup>
import {
  isLoaded,
  isLoading,
  list,
  loadList,
  metaCurrentPage,
  metaItemsPerPage,
  metaTotalItems,
  setEndpoint,
  setMetaItemsPerPage,
  setPage,
  search,
  setFilter
} from "@/components/pagination/paginatedList.vue";
import PaginationNavigation from "@/components/displays/pagination/PaginationNavigation.vue";

import LoadButtonWhileAwait from "@/components/request/LoadButtonWhileAwait.vue";
import PaginationDisplay from "@/components/displays/pagination/PaginationDisplay.vue";
import VehiclesTable from "@/components/displays/user/vehicles/vehiclesTable.vue";
import OrdersTable from "@/components/displays/department/pos/orders/ordersTable.vue";
import InvoicesTable from "@/components/displays/user/invoices/invoicesTable.vue";
import {defineProps} from "vue";
const props = defineProps({
  onlyFromInvoiceCollection: {
    type: Number,
    default: 0
  },
  autoLoad: {
    type: Boolean,
    default: true
  }
})
setEndpoint("/orders", false);
if (props.onlyFromInvoiceCollection > 0) {
  setFilter("invoice_collection_id", props.onlyFromInvoiceCollection, false);
}

if (props.autoLoad) {
  loadList();
}

</script>

<template>
  <input @input="search($event.target.value)" class="input mt-2" type="text" placeholder="Søg efter vask" v-model="metaSearch" />
  <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage" />
  <!-- <invoicesTable :objects="list" /> -->
  <orders-table
      v-bind:orders="list"
      v-bind:is-customer-view="true"
  />
  <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
  <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
</template>

<style scoped>

</style>