<script setup lang="ts">
import {AcquisitionsPanel, toAcquiredType} from '@/market/acquisition';
import {useLedgerParam} from "@/ledger";
import {acquisitionApi} from "@/mammon";
import {computedAsync} from "@vueuse/core";

const {ledgerId} = useLedgerParam();

const items = computedAsync(async () => {
    if (!ledgerId.value) {
        return [];
    }

    const {data} = await acquisitionApi.findAllAcquisitions(ledgerId.value);

    return data.map(toAcquiredType).filter(a => a.remaining > 0);
}, []);
</script>

<template>
    <div class="mt-4">
        <AcquisitionsPanel :items="items" :ledgerId="ledgerId" :ignoredColums="['date', 'ledger']" />
    </div>
</template>