<template>
    <div class="takeparcel">

        <Header class="order" :header_a="this.$route.params.header_a" :header_b="this.$route.params.header_b"></Header>

        <div class="content order">

            <div class="row">

                <div class="col-md-12">
                    <img class="lockers-img" :src="imageLink" />
                </div>

            </div>

            <Navbar class="order" :back_text="this.$route.params.back_text" :back_link="this.$route.params.back_link" :next_text="this.$route.params.next_text" :next_method="next"></Navbar>

        </div>

        <Footer class="order" :text="location"></Footer>
    </div>
</template>
<script>
    import Header from '../Header.vue';
    import Footer from '../Footer.vue';
    import Navbar from '../Navbar.vue';

    export default {
        name: 'sendparcel',
        components: {Header, Footer, Navbar},
        data() {
            return {
                location: 'WAW22N',
                imageLink: require('../assets/lockers_'+this.$route.params.lockerId+'.png')
            }
        },
        methods: {
            next() {



                if(this.appstate.collectOrder.doorIsClosed(this.$route.params.lockerId)) {
                    this.appstate.collectOrder.setStatus(this.$route.params.lockerId, 2);
                    this.$router.push({name: 'CollectOrderParcel'});
                } else {
                    this.$router.push({
                        name: 'Statement',
                        params: {
                            text: this.appstate.lang.current.statements.locker_is_open.text,
                            back_text: '',
                            back_link: '',
                            next_text: this.appstate.lang.current.statements.locker_is_open.next_text,
                            next_link: 'collect-order-parcel/check_locker',

                        }
                    });
                }
            },
            loadImg: function (path) {
                return require('' + path)
            }
        }
    };
</script>

<style lang="css">
    .takeparcel {
        width: 100%; height: 100%;
        display: flex;
        flex-direction: column;
        align-content: space-around;
        background: url('../assets/backgroundBase.png');
    }
    .takeparcel .lockers-img {
        width: 400px;
        margin: auto;
        display: block;
    }

</style>