<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-15" v-for="(item, index) in serviceCurrencies" v-bind:key="item.id">
                <div class="col">
                    <div class="row">
                        <div class="col-3 b-a pointer p-t-20 p-b-20" :class="[{'b-success': item.active}, {'b-grey': !item.active}]" @click="item.active = !item.active">
                            <div class="absolute" style="top: -10px; right: -27px;" v-if="item.active">
                                <div class="icon-thumbnail icon-25 bg-success text-white btn-rounded fs-10">
                                    <i class="fa fs-10 fa-check"></i>
                                </div>
                            </div>
                            <currency-component :deleteable="false" :section="section" :data="item.currency_object"></currency-component>
                        </div>
                        <div class="col">
                            <div class="row h-100 m-r-0 align-items-end" v-show="item.active">
                                <div class="col p-t-15 b-t b-r b-success bg-master-lightest">
                                    <div class="row m-b-10">
                                        <div class="col">
                                            <div class="font-heading all-caps fs-10 hint-text muted">
                                                Purchase Limits
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row m-r-0">
                                        <div class="col m-r-10 p-r-5">
                                            <div class="row">
                                                <div class="col p-r-0">
                                                    <validation-wrapper-component class="no-border" :validator="$v.parameters.currencies.$each[index].minimum_limit.value">
                                                        <label>Minimum Limit</label>
                                                        <input type="text" class="form-control" v-model.lazy="item.minimum_limit.value" v-money="money" :disabled="!item.active">
                                                    </validation-wrapper-component>
                                                </div>
                                                <div class="col-auto bg-white b-t b-r b-b b-grey">
                                                    <div class="row h-100 align-items-center">
                                                        <div class="col">
                                                            <div class="font-heading fs-10 muted">{{item.currency_object.short_code}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col p-l-5">
                                            <div class="row">
                                                <div class="col p-r-0">
                                                    <validation-wrapper-component :validator="$v.parameters.currencies.$each[index].maximum_limit.value">
                                                        <label>Maximum Limit</label>
                                                        <input type="text" class="form-control" v-model.lazy="item.maximum_limit.value" v-money="money" :disabled="!item.active">
                                                    </validation-wrapper-component>
                                                </div>
                                                <div class="col-auto bg-white b-t b-r b-b b-grey">
                                                    <div class="row h-100 align-items-center">
                                                        <div class="col">
                                                            <div class="font-heading fs-10 muted">{{item.currency_object.short_code}}</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-r-0" v-show="item.active">
                        <div class="col p-b-15 bg-master-lightest b-r b-b b-l b-success">
                            <div class="row">
                                <div class="col p-r-25 p-l-25">
                                    <div class="row m-b-10 m-t-10">
                                        <div class="col p-l-5">
                                            <div class="font-heading all-caps fs-10 hint-text muted">
                                                Exchange Rates
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-4 p-l-5 p-r-5 m-b-10" v-for="(rate, method) in item.rates">
                                            <validation-wrapper-component :validator="$v.parameters.currencies.$each[index].rates.$each[method].selling.value" :class="[{'hint-text': rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'}]">
                                                <label class="all-caps">{{rate.payment_method}}</label>
                                                <input type="text" class="form-control" v-model.lazy="rate.selling.value" v-money="exchangeRate" :disabled="!item.active || rate.payment_method === 'wallet' || rate.payment_method === 'payment gateway'">
                                            </validation-wrapper-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import formHandler from "../../../general/mixins/formHandler";
    import { required, requiredIf, minValue, maxValue, decimal} from "vuelidate/lib/validators";
    export default {
        data(){
            return {
                parameters: {
                    currencies: []
                }
            }
        },
        validations: {
            parameters: {
                currencies: {
                    $each: {
                        maximum_limit: {
                            value:{
                                required: requiredIf(function (currency) { return currency.active}),
                            }
                        },
                        minimum_limit: {
                            value:{
                                required: requiredIf(function (currency) { return currency.active })
                            }
                        },
                        rates: {
                            required: true,
                            $each: {
                                selling: {
                                    value:{
                                        required: requiredIf(function (currency) { return currency.active }),
                                        minValue: minValue(0)
                                    }

                                }
                            }
                        }
                    }
                }
            }
        },
        computed: {
            convertibleCurrencies() {
                let vm = this;
                return this.$store.getters.getListData('convertibleCurrenciesSection').forEach(function(value){
                    vm.addInactiveCurrency(value)
                });
            },
            serviceCurrencies: function(){
                return this.data.currencies;
            }
        },
        watch: {
            convertibleCurrencies(){
                this.convertibleCurrencies();
            },
            serviceCurrencies(currencies){
                this.$emit('input', currencies)
            }
        },
        methods: {
            inArray(element){
                return this.parameters.currencies.some(currency => currency.id === element.id);
            },
            pushIfNotExist(element){
                if (!this.inArray(element)) {
                    this.parameters.currencies.push(element);
                }
            },
            addInactiveCurrency(element){
                this.pushIfNotExist({
                    currency_object: element,
                    active: false,
                    id: element.id,
                    maximum_limit: {
                        type: 'fixed_amount',
                        value: 0
                    },
                    minimum_limit: {
                        type: 'fixed_amount',
                        value: 0
                    },
                    rates: [
                        {
                            payment_method: 'cash',
                            selling: {
                                type: 'rate',
                                value: 0
                            }
                        },
                        {
                            payment_method: 'cheque',
                            selling: {
                                type: 'rate',
                                value: 0
                            }
                        },
                        {
                            payment_method: 'ba',
                            selling: {
                                type: 'rate',
                                value: 0
                            }
                        },
                        {
                            payment_method: 'wallet',
                            selling: {
                                type: 'rate',
                                value: 0
                            }
                        },
                        {
                            payment_method: 'payment gateway',
                            selling: {
                                type: 'rate',
                                value: 0
                            }
                        }
                    ]
                });
            }
        },
        mixins: [formHandler]

    }
</script>