<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,
    },
    where: {
        type: Object,
        default: null,
    },
    sortBy: {
        type: String,
        default: '',
    },
    limit: {
        type: String,
        default: '',
    },
});

defineExpose({ fetch });
const emit = defineEmits(['onFetch']);

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

async function fetch() {
    const filter = Object.assign({}, $props.filter);
    if ($props.where) filter.where = $props.where;
    if ($props.sortBy) filter.order = $props.sortBy;
    if ($props.limit) filter.limit = $props.limit;

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

    emit('onFetch', data);
}

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