<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                </div>
            </div>
            <div class="row" @keyup.enter="submitSearch()" v-show="!isLoading">
                <div class="col-12 col-md">
                    <choose-currency-component v-on:input="updateCurrencyId($event)" :currecy_id="filters.fixed_currency_id"></choose-currency-component>
                </div>
                <div class="col-12 col-md">
                    <choose-service-component v-on:input="updateServiceId($event)" v-on:loaded="doneLoadingServiceId"></choose-service-component>
                </div>
                <div class="col-12 col-md">
                    <validation-wrapper-component selectable :validator="$v.filters.status">
                        <label>Status</label>
                        <select-component :options="['Active', 'Complete']" v-model="filters.status"></select-component>
                    </validation-wrapper-component>
                </div>
                <div class="col-auto">
                    <div class="row h-100">
                        <div class="col">
                            <button type="button" class="btn btn-lg btn-primary w-100 h-100 d-block" @click="submitSearch()">Search</button>
                        </div>
                        <div class="col">
                            <button type="button" class="btn btn-lg btn-default w-100 h-100 d-block" @click="reset()">Reset</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row m-t-50" v-if="hasSubmited">
                <div class="col">
                    <list-component :key="searchKey" section="transferFiltersSection" :endpoint="route('api.booking.list')" :options="options">
                        <template slot="list" slot-scope="{data}">
                            <booking-component :data="data"></booking-component>
                        </template>
                    </list-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import { required, requiredIf, minValue, decimal } from "vuelidate/lib/validators";
    export default {
        data() {
            return {
                isLoading: true,
                searchKey: 1,
                hasSubmited: false,
                options: {
                    per_page: 10
                },
                filters: {
                    fixed_currency_id: null,
                    service_id: null,
                    status: null,
                },
            }
        },
        validations: {
            filters: {
                fixed_currency_id: {},
                service_id: {},
                status: {},
            }
        },
        methods: {
            submitSearch() {

                this.options = {
                    per_page: 10
                },

                this.filters.service_id != null ? (this.options.service_id = this.filters.service_id) : null;

                this.filters.fixed_currency_id != null ? (this.options.fixed_currency_id = this.filters.fixed_currency_id) : null;

                if (this.filters.status != null) {
                    switch(this.filters.status) {
                        case 'Active':
                            this.options.status = '2';
                            break;

                        case 'Complete':
                            this.options.status = '3';
                            break;
                        }
                }

                this.searchKey +=1;
                this.hasSubmited = true;
            },
            reset() {
                this.marking = '';
                this.hasSubmited = false;
                this.currentKey += 1;
            },
            updateCurrencyId(id){
                this.filters.fixed_currency_id = id;
            },
            updateServiceId(id){
                this.filters.service_id = id;
            },
            doneLoadingServiceId(){
                this.isLoading = !this.isLoading;

                var currency = new URL(location.href).searchParams.get('currency');
                if (currency != null) {
                    switch (currency) {
                        case 'usd':
                            this.filters.fixed_currency_id = 3;
                            this.submitSearch();
                            break;
                        case 'cny':
                            this.filters.fixed_currency_id = 2;
                            this.submitSearch();
                            break;
                        case 'rmb':
                            this.filters.fixed_currency_id = 2;
                            this.submitSearch();
                            break;
                    }
                }
            }
        },
        mixins: [componentHandler]
    }
</script>