<script setup>

const createddocuments = ref([])
const selected = ref([])
const setup = async () => {
    createddocuments.value = (await useEntities("createddocuments").select()).filter(i => i.payment_type === "direct-debit")
    selected.value = createddocuments.value
}

setup()

const createExport = async () => {
  //NUMMERN MAPPEN ZU IDS UND AN BACKEND FUNKTION ÜBERGEBEN
  const ids = selected.value.map((i) => i.id)

  const res = await useNuxtApp().$api("/api/exports/sepa", {
    method: "POST",
    body: {
      idsToExport: ids
    }
  })


}


</script>

<template>
  <UDashboardNavbar title="SEPA Export erstellen">
    <template #right>
      <UButton @click="createExport">
        Erstellen
      </UButton>
    </template>
  </UDashboardNavbar>
  <UTable
      v-if="createddocuments.length > 0"
      :loading="true"
      v-model="selected"
      :loading-state="{ icon: 'i-heroicons-arrow-path-20-solid', label: 'Loading...' }"
      :data="createddocuments" />
</template>

<style scoped>

</style>