<script setup>
import { 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, Number],
        default: '',
    },
    params: {
        type: Object,
        default: null,
    },
});

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

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

async function fetch(fetchFilter = {}) {
    try {
        const filter = { ...fetchFilter, ...$props.filter }; // eslint-disable-line vue/no-dupe-keys
        if ($props.where && !fetchFilter.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: JSON.stringify(filter), ...$props.params },
        });

        emit('onFetch', data);
        return data;
    } catch (e) {
        //
    }
}
</script>
<template>
    <template></template>
</template>
