<template>
    <div class="row" >
        <div class="col">
            <loading-component v-if="isLoading"></loading-component>
            <div class="row" v-if="!isLoading">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col-8 p-r-0">
                            <div class="row">
                                <div class="col p-r-0">
                                    <div class="form-group no-margin form-group-default b-rad-none">
                                        <label class="text-primary">Payment Due Days</label>
                                        <input type="text" class="form-control"  v-model.trim="parameters.due" />
                                    </div>
                                </div>
                                 <div class="col-auto">
                                    <div class=" no-margin">
                                        <input type="checkbox" checked="" value="0" id="checkbox2"  v-model.trim="parameters.segment">
                                        <label for="checkbox2 bold no-margin">Credit terms</label>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col p-l-0">
                            <div class="btn btn-primary b-rad-none" @click="fetchPaymentList()">
                                <i class="fa fa-filter lh-40"></i>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import LoadingComponent from "../../general/elements/LoadingComponent";
    export default {
        components: {LoadingComponent},
         props: {
            endpoint: {
                type: String,
                required: true
            },
         },
        data(){
            return {
                section: 'pendingPaymentSection',
                isLoading: false,
                data: null,
                parameters: {
                    due: '',
                    segment: false
                },
            }
        },
        validations: {
            due: {},
        },
        methods: {
            fetchPaymentList(){

                this.$store.dispatch('reloadList', {name: this.section});
                this.$store.dispatch('updateListQueue', {name: this.section, page:1, filters: {per_page:5, has_invoice_status_in:[2], payment_day:this.parameters.due, credit_term:this.parameters.segment, order_by: {column: 'updated_at', DESC: true}}});

                //this.$store.dispatch('toggleSection', {name: this.section, status: true});
                //this.$store.dispatch('updateListQueue', {name: this.section, page:1, filters: {per_page:5, group_by: 'transactions.id', payment_day:this.due,has_invoice_status_in:[2] /*,credit_term:[0.0]*/ }});
                //let a = this.$store.getters.getListData('pendingPaymentSection');
                //console.log(a);

                // this.$store.dispatch('crudRequest', {endpoint: this.endpoint, method: 'get',parameters:{name: this.section, page:1, filters: {per_page:5, group_by: 'transactions.id', payment_day:this.due,has_invoice_status_in:[2] /*,credit_term:[0.0]*/ }}}).then(response => {

                //    console.log(response);
                    // let success = response.ok;
                    // response.json().then(response => {
                    //     if(!success){return;}



                    //     this.$store.dispatch('completeList', {name: this.section, data: a})

                    // });
                //});
            },

        }
    }
</script>
