<script setup>
import Layout from "../../layouts/MainLayout.vue";
import { Head, Link, useForm } from '@inertiajs/vue3';
import rpoFields from '../../Data/MultiSelectOptionsRPO';
import { onMounted, ref } from 'vue';
import { defineEmits } from 'vue'

import RpoRecord2 from '@/Components/RpoRecord2.vue';
import Pagination from '@/Components/Pagination.vue';
import { router } from '@inertiajs/vue3'

const props = defineProps({
    result: Object,
    query: Object,
});
const page = ref(props.result.current_page);
const current_page = ref(props.result.current_page);
const page_last = ref(props.result.last_page);

function goAnotherPage() {
    console.log('result',props.result);
    console.log('page',page.value);
    console.log('query',props.query)
    let urllink = props.result.links.filter((l) => l.label == page.value)[0].url;
    router.post(urllink, props.query);
}

</script>

<template>

    <Head>
        <title>RPO TISK Results</title>
    </Head>
    <Layout>
        <q-page class="column items-center" >

            <div class="col">
                <q-pagination v-model="page" :min="current_page" :max="page_last" @update:model-value="goAnotherPage" input direction-links push color="teal" active-design="push"
                    active-color="orange" />
            </div>
            <div class="col">
                <div class="q-pa-md fit row wrap justify-center items-start content-start">

                    <div class="row">
                        <RpoRecord2 :data="r" v-for="r in result.data" :key="r.id" />
                    </div>
                </div>
            </div>
            <div class="col">
                <q-pagination v-model="page" :min="current_page" :max="page_last" @update:model-value="goAnotherPage" input direction-links push color="teal" active-design="push"
                    active-color="orange" />
            </div>

            <div class="hidden col q-mt-xl">
                {{ query }}
            </div>

        </q-page>
    </Layout>
</template>
