<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: '',
    },
});

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

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

async function fetch() {
    try {
        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);
    } catch (e) {
        //
    }
}

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