<template>
    <div class="list">
        <jarch-page-title :title="titlePage" :description="descriptionPage" :icon="icon"/>

        <jarch-filter-search :title="titleFilter" :search="search" @onClear="objectSearch()" @onSearch="searchData()"/>

        <jarch-list-data-table :title="titleDatatable" :search="search" :path="path" :paginator="paginator"
                               :size-column-action="sizeColumnAction" :router-name-data="routerNameData"
                               :show-column-action="showColumnAction"
                               :show-column-action-dynamic="showColumnActionDynamic"
                               @onPage="updatePaginator($event)"
                               @onMenuActionDynamic="this.$emit('onMenuActionDynamic', $event)"/>
    </div>
</template>

<script>
import JarchPageTitle from "../content/PageTitle";
import JarchFilterSearch from "../content/FilterSearch";
import JarchListDataTable from "../content/ListDataTable";
import {useLoading} from 'vue3-loading-overlay';

export default {

    name: "List",
    components: {
        JarchPageTitle,
        JarchFilterSearch,
        JarchListDataTable
    },
    props: {
        title: {type: String, required: true},
        icon: {type: String, required: false},
        routerNameData: {type: String},
        path: {type: String, required: true},
        sizeColumnAction: {default: 100},
        showColumnAction: {type: Boolean, default: true},
        showColumnActionDynamic: {type: Boolean, default: false}
    },
    data() {
        return {
            search: {},
            paginator: {},
        }
    },
    mounted() {
        this.load()
    },
    computed: {
        titlePage() {
            return this.$t('label.list') + " - " + this.title
        },
        descriptionPage() {
            return this.$t('label.keep') + " - " + this.title
        },
        titleFilter() {
            return this.$t('label.filter') + " - " + this.title
        },
        titleDatatable() {
            return this.$t('label.list') + " - " + this.title
        }
    },
    methods: {
        updatePaginator(event) {
            this.search.first = event.first
            this.searchData()
        },
        async objectSearch() {
            await this.$http.get(`${this.path}/object/search`).then(res => this.search = res.data)
            this.$emit("onObjectSearch", this.search)
        },
        async load() {
            await this.objectSearch()
            await this.searchData()
        },
        async searchData() {
            const loader = useLoading();
            loader.show({height: 200, width: 200})
            await this
                .$http
                .post(`${this.path}/search`, this.search)
                .then(res => this.paginator = res.data)
            .catch(err => alert('Erro: ' + err))
            loader.hide()
        }
    }
}
</script>

<style scoped lang="css">

</style>
