﻿<template>
    <b-container>
        <b-row>
            <b-col>
                <transition name="slide-fade">
                    <step-indicator v-if="currentTab != 'start'" :current="step-1" :total="5"></step-indicator>
                </transition>
            </b-col>
        </b-row>

        <b-row id="application-top">
            <b-col>
                <transition name="slide-fade">
                    <component :is="currentTab + '-tab'" :application="app" @apply-pressed="currentTab='residence'"></component>
                </transition>
            </b-col>
        </b-row>

        <b-row>
            <b-col cols="12" :md="(prevStep && step != 1) ? 5 : 0" class="my-3">
                <b-btn v-if="prevStep && step != 1" @click="currentTab=prevStep">&lt; back to {{prevStep}}</b-btn>
            </b-col>
            <b-col cols="0" :md="(prevStep && step != 1) ? 2 : 0" ></b-col>
            <b-col cols="12" md="5" class="my-3">
                <b-btn :class="{ 'float-md-right' : (prevStep && step != 1) }" v-if="nextStep && step != 0" @click="currentTab=nextStep">continue to {{nextStep}} &gt;</b-btn>
            </b-col>
            <b-col cols="12" class="my-3">
                <b-btn v-if="prevStep && step != 0" @click="$root.$emit('save-application')">Save for later</b-btn>
            </b-col>
        </b-row>
    </b-container>
</template>
<script>
    module.exports = {
        props: ['application'],
        data: function () {
            return {
                
                app: this.application || new RentalApplication(),
                tabs: ['start', 'residence', 'employment', 'references', 'other', 'affirmation'],
                currentTab: this.application.page || 'start',
            }
        },
        methods: {
            scrollToItem: function (item) {
                var diff = (item.offsetTop - window.scrollY) / 20;
                if (!window._lastDiff) {
                    window._lastDiff = 0;
                }


                if (Math.abs(diff) > 2) {
                    window.scrollTo(0, (window.scrollY + diff))
                    clearTimeout(window._TO)

                    if (diff !== window._lastDiff) {
                        window._lastDiff = diff;
                        window._TO = setTimeout(this.scrollToItem, 15, item);
                    }
                } else {
                    

                    window.scrollTo(0, item.offsetTop)
                }
            }

        },
        mounted: function () {

        },
        components: {
            'start-tab': httpVueLoader('/vue/app-tabs/start.vue?v=2'),
            'residence-tab': httpVueLoader('/vue/app-tabs/residence.vue?v=3'),
            'employment-tab': httpVueLoader('/vue/app-tabs/employment.vue?v=2'),
            'references-tab': httpVueLoader('/vue/app-tabs/references.vue?v=2'),
            'other-tab': httpVueLoader('/vue/app-tabs/other.vue?v=2'),
            'affirmation-tab': httpVueLoader('/vue/app-tabs/affirmation.vue?v=2'),
            StepIndicator
        },
        computed: {
            step: function () {
                return this.tabs.indexOf(this.currentTab);
            },
            prevStep: function () {
                var i = this.tabs.indexOf(this.currentTab);
                if (i <= 0)
                    return null;
                return this.tabs[i - 1];
            },
            nextStep: function () {
                var i = this.tabs.indexOf(this.currentTab);
                if (i >= this.tabs.length - 1)
                    return null;
                return this.tabs[i + 1];
            }

        },
        watch: {
            currentTab: function (newVal, oldVal) {
                this.app.page = newVal;
                var self = this;
                setTimeout(function () {
                    self.scrollToItem(document.getElementById("application-top"));
                }, 500);
                
            }
        }
    }
</script>
<style scoped>
    /* Enter and leave animations can use different */
    /* durations and timing functions.              */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: none; /*all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
    }

    .slide-fade-enter, .slide-fade-leave-to
    /* .slide-fade-leave-active below version 2.1.8 */ {
        position: relative;
        transform: translateX(10px);
        opacity: 0;
    }
</style>