<template>
    <div class="row h-100 mt-1 mb-1 m-md-0">
        <div class="col">
            <!-- <loading-component style="height: 100%; top: 0;" key="1" color="success" v-show="isLoading"></loading-component> -->

            <div class="row h-100" style="margin-left:1px; margin-right:1px; min-height: 50px;" v-if='!isLoading'>
                <div class="col bg-primary text-white">
                    <div class="row h-100 align-items-center">
                        <div class="col p-l-5 p-r-20">
                            <span class="m-l-10">{{ selectedCurrency.name }}</span>
                        </div>
                        <div class="col-auto h-100 pointer" @click="recipientMenu = !recipientMenu">
                            <div class="row align-items-center bg-primary-light h-100">
                                <div class="col ">
                                    <i class="fa fa-angle-down fs-14 m-t-5"
                                        :class="[{ 'fa-angle-down': !recipientMenu }, { 'fa-angle-up': recipientMenu }]"></i>
                                </div>
                            </div>
                        </div>
                        <div class="relative w-100 text-master">
                            <div class="absolute w-100 b-l b-b b-r b-success" :class="[{ 'hide': !recipientMenu }]"
                                style="top: 100%; right: 0; z-index: 1;">
                                <div class="row text-left no-margin bg-white">
                                    <div class="col no-padding">
                                        <div class="row no-margin" v-for="currency in currencyList"
                                            v-bind:key="currency.id">
                                            <div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10 "
                                                :class="[{ 'bg-primary-light': selectedCurrency.id === currency.id }, { 'text-white': selectedCurrency.id === currency.id }, { 'hover-primary': selectedCurrency.id !== currency.id }, { 'pointer': selectedCurrency.id !== currency.id }]"
                                                @click="UpdateCurrency(currency)">
                                                <div class="row align-items-center justify-content-center">
                                                    <div class="col">
                                                        <div class="row align-items-center justify-content-center">
                                                            <div class="col-auto p-l-5">
                                                                <div class="font-heading fs-12">
                                                                    {{ currency.name }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            section: 'chooseCurrencySection',
            currencyList: null,
            recipientMenu: false,
            selectedCurrency: null,
            isLoading: true,
        };
    },
    computed: {
        pendingQueue() {
            return this.$store.getters.isInCompleteQueue(this.section);
        }
    },
    watch: {
        pendingQueue(inComplete) {
            if (inComplete) {
                this.fetchCurrency();
            }
        }
    },
    created() {
        this.$store.dispatch('updateListQueue', { 'name': this.section });
    },
    methods: {
        fetchCurrency() {
            this.submit(route('api.service_type.list'), 'get', this.section, false, false);
        },
        successHandler(response) {
            this.isLoading = false;
            this.currencyList = response.payload.data;
            this.UpdateCurrency(this.currencyList[0]);
            this.$emit('loaded', true);
        },
        UpdateCurrency(currency) {
            this.selectedCurrency = currency;
            this.recipientMenu = false;
            this.$emit('input', currency.id);
        },
    }
}
</script>
