<script setup>
import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";

defineProps(['objects']);
import { ref } from 'vue';
import { loadList } from "@/components/pagination/paginatedList.vue";
import { SessionUser } from "@/components/session/token/SessionUser.vue";
import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSettingsWheelButton.vue";
import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";

const redirect = (path) => {
  window.location = path;
}

</script>

<template>
    <table class="table is-fullwidth is-hoverable is-striped">
      <thead>
      <tr>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.id.label }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.customer_number.label }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.name.label }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.notes.label }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.processor.label }}</th>
        <th>{{ SessionUser.objects.orders.meta.title }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.closed_at.label }}</th>
        <th>{{ SessionUser.objects.collectedOrderInvoices.columns.created_at.label }}</th>
        <th><!-- Actions --></th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="object in objects" :key="object.id">
        <td>{{ object.id }}</td>
        <!-- Customer number -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="customer_id"
        />
        <!-- Name -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.collectedOrderInvoices.showEditObjectFieldForm"
            column="name"
        />
        <!-- Notes -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.collectedOrderInvoices.showEditObjectFieldForm"
            column="notes"
        />
        <!-- Processor -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            :editFunction="SessionUser.objects.collectedOrderInvoices.showEditObjectFieldForm"
            column="processor"
        />
        <!-- Transactions -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="orders"
        />
        <!-- Closed at -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="closed_at"
        />
        <!-- Created at -->
        <EditableTableColumn
            :object="object"
            :loadList="loadList"
            column="created_at"
        />
        <!-- Actions -->
        <td>
          <ActionSettingsWheelButton>
            <template #actions>
              <ActionSettingsWheelItem
                icon="fas fa-eye"
                @click="redirect('/admin/' + object.department_id + '/modules/pos/orders/' + object.id)"
                label="Vis"
              />
            </template>
          </ActionSettingsWheelButton>
        </td>
      </tr>
      <!-- If the list is empty -->
      <tr v-if="objects.length === 0">
        <td colspan="9">
          Ingen transaktioner fundet
        </td>
      </tr>
      <!-- Show a count of the total number of objects -->
      <tr>
        <td colspan="9">Viser {{ objects.length }} transaktioner i faktura kollektion</td>
      </tr>
      </tbody>
    </table>
</template>

<style scoped>

</style>