<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-5" @keyup.enter="submitSearch">
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="$v.parameters.reference_no">
                        <label class="all-caps">Booking Reference</label>
                        <input type="text" class="form-control" v-model="parameters.reference_no">
                    </validation-wrapper-component>
                </div>
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="$v.parameters.startDate">
                        <label class="all-caps">Start Date</label>
                        <date-picker-component v-model.lazy="parameters.startDate"></date-picker-component>
                    </validation-wrapper-component>
                </div>
                <div class="col p-r-0">
                    <validation-wrapper-component :validator="$v.parameters.endDate">
                        <label class="all-caps">End Date</label>
                        <date-picker-component v-model.lazy="parameters.endDate"></date-picker-component>
                    </validation-wrapper-component>
                </div>
                <div class="col col-md-auto d-flex justify-content-center align-items-center">
                    <button type="button" class="btn btn-lg btn-primary fs-11 w-100" @click="submitSearch()">Search</button>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="row padding-10">
                        <div class="col-3 fs-10">Date</div>
                        <div class="col fs-10">Description</div>
                        <div class="col-2 fs-10 text-center">Incoming</div>
                        <div class="col-2 fs-10 text-center">Outgoing</div>
                        <div class="col-2 fs-10 text-right">Balance</div>
                    </div>

                    <list-component :key="key" section="topUp" :endpoint="route('api.transaction.wallet.list')" :options="options">
                        <template slot="list" slot-scope="{data}">
                            <customer-wallet-transaction-component :data="data" :deciamls="deciamls"></customer-wallet-transaction-component>
                        </template>
                    </list-component> 
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        deciamls: {
            type: Number,
            required: true
        },
        showingTransactionCount: {
            required: true
        },
        wallet_id: {
            type: Number,
            required: true
        }
    },
    data(){
        return {
            key: 1,
            parameters: {
                reference_no: null,
                startDate: null,
                endDate: null,
            },
            options: {
                status_in: [2, 3], 
                owner_type: 'App\\Models\\Wallet', 
                owner_id: this.wallet_id, 
                per_page: this.showingTransactionCount
            }
        }
    },
    validations: {
        parameters: {
            reference_no: {  },
            startDate: {  },
            endDate: {  },
        }
    },
    watch: {
        showingTransactionCount() {
            this.options.per_page = this.showingTransactionCount;
            this.key ++;
        }
    },
    methods: {
        submitSearch() {
            delete this.options.with_booking_marking_like;
            delete this.options.created_after_or_equal;
            delete this.options.created_before_or_equal;

            if (this.parameters.reference_no) {
                this.options.with_booking_marking_like = this.parameters.reference_no
            }
            if (this.parameters.startDate) {
                this.options.created_after_or_equal = this.parameters.startDate
            }
            if (this.parameters.endDate) {
                this.options.created_before_or_equal = this.parameters.endDate
            }
            
            this.key ++;
        },
    },
}
</script>
