<script setup>
import {onMounted, reactive} from "vue";

const costUnits = reactive({
    'openCostUnits': '',

})

onMounted(async () => {
    const response = await fetch('/api/v1/dashboard/open-cost-units');
    const data = await response.json();
    Object.assign(costUnits, data);
});

</script>

<template>
    <table class="widget-content-item" v-if="costUnits.openCostUnits.length > 0">
        <tr>
            <td style="font-weight: bold">Kostenstelle</td>
            <td style="font-weight: bold">Neu</td>
            <td style="font-weight: bold">Ang</td>
            <td style="font-weight: bold">Betrag</td>
        </tr>

        <tr v-for="costUnit in costUnits.openCostUnits">
            <td><a :href="'/cost-unit/' + costUnit.id" class="link">{{costUnit.name}}</a></td>
            <td>{{costUnit.new_invoices_count}}</td>
            <td>{{costUnit.approved_invoices_count}}</td>
            <td>{{costUnit.totalAmount}}</td>
        </tr>
    </table>

    <p v-else style="padding: 10px; font-weight: bold">Es existieren im Moment keine Abrechnugnen, um die du dich kümmern musst.</p>

</template>

<style scoped>

</style>
