<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>Date</th>
                                <th>Label</th>
                                <th>Reference</th>
                                <th>type</th>
                                <th>Bank</th>
                                <th>Marking</th>
                                <th>Amount</th>
                            </tr>
                            </thead>
                            <tbody>
                            <urgent-transaction-component v-for="item in list" :key="item.id" :data="item"></urgent-transaction-component>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="col-auto b-a p-t-5 p-b-5 m-l-5 pointer b-grey" v-for="n in pagination.last_page" :key="n" @click="fetchList(n)">
                        <small class="fs-11">{{n}}</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRequest } from '@/composables/useRequest';
import route from '@/general/functions/router';

const { submit } = useRequest();

const list = ref<any[]>([]);
const pagination = ref({
    last_page: 1
});

const fetchList = (Page = 1) => {
    const filters = {
        status: 2,
        type: 1,
        owner_type: 'App\\Models\\Booking',
        per_page: 50,
        order_by: {
            column: 'created_at',
            DESC: true
        }
    };
    submit(route('api.transaction.list.urgent') + '?page=' + Page + '&filters=' + JSON.stringify(filters), 'get', 'urgentListSection', false, true, undefined, {
        successHandler: (response: any) => {
            list.value = response.payload.data;
            pagination.value = response.payload.meta;
        }
    });
};

onMounted(() => {
    fetchList();
});
</script>
