<script setup>
import {defineProps, ref} from 'vue';
import { SessionUser } from "@/components/session/token/SessionUser.vue";

const props = defineProps({
  invoices: {
    type: Array,
    required: true,
    description: 'The transactions contained in the invoice collection'
  },
  total: {
    type: Number,
    required: true,
    description: 'The total amount of the invoices in the collection'
  },
  collectedOrderInvoice: {
    type: Object,
    required: true,
    description: 'The collected order invoice object'
  }
});
const column_width = 'is-3';
const displays = [
  {
    title: 'Transaktioner',
    value: props.invoices.length,
    icon: 'fas fa-file-invoice-dollar',
  },
  {
    title: 'Total beløb',
    value: (props.collectedOrderInvoice.total_net_amount ? SessionUser.functions.currency.toLocal(props.collectedOrderInvoice.total_net_amount) : SessionUser.objects.global.language.no_data),
    icon: 'fas fa-money-bill-wave',
  },
  {
    title: 'Arkiveret',
    value: props.collectedOrderInvoice.closed_at ? props.collectedOrderInvoice.closed_at : 'Nej',
    icon: 'fas fa-lock',
  },
  {
    title: 'Eksternt identifikationsnummer',
    value: props.collectedOrderInvoice.external_id,
    icon: 'fas fa-lock-open',
  },
  {
    title: 'PO-nummer',
    value: props.collectedOrderInvoice.po_number || SessionUser.objects.global.language.no_data,
    icon: 'fas fa-file-alt',
  },
];
</script>

<template>
  <div class="columns is-multiline">
    <template v-for="display in displays">
      <div class="column" :class="column_width">
        <div class="card">
          <!-- Header -->
          <header class="card-header">
            <!-- Icon -->
            <a class="card-header-icon">
              <span class="icon">
                <i :class="display.icon"></i>
              </span>
            </a>
            <!-- Title -->
            <p class="card-header-title">{{ display.title }}</p>
            <!-- Dropdown icon -->
            <a class="card-header-icon">
              <span class="icon">
                <i class="fas fa-angle-down"></i>
              </span>
            </a>
          </header>
          <div class="card-content">
            <p class="title is-4">{{ display.value }}</p>
            <p class="subtitle is-6">{{ display.title }}</p>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped>

</style>