<script setup>
import { h, onMounted } from 'vue';
import axios from 'axios';

const $props = defineProps({
    autoLoad: {
        type: Boolean,
        default: false,
    },
    url: {
        type: String,
        default: '',
    },
    filter: {
        type: Object,
        default: null,
    },
    limit: {
        type: String,
        default: '20',
    },
});

const emit = defineEmits(['fetch-data']);

onMounted(async () => {
    if ($props.autoLoad) {
        await fetch();
    }
});

async function fetch() {
    const { data } = await axios.get($props.url, {
        params: { filter: $props.filter },
    });

    return emit('fetch-data', data);
}

const render = () => {
    return h('div', []);
};
</script>
<template>
    <render />
</template>
