<template>
    <div class="row no-margin align-items-center justify-content-center p-t-10 p-b-10">
        <div class="col">
            <div class="row no-margin align-items-center justify-content-center">
                <div class="col-auto no-padding all-caps">
                    <div class="row">
                        <div class="col fs-10">
                            <span class="bold">#{{this.order.marking}}</span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="fs-9 muted all-caps">Importer:
                                <a :href="route('companies.profile', {companyId: this.order.company.id})">
                                    <span class="fs-9 text-complete bold">{{this.order.company.marking}}</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col text-right p-r-0 all-caps">
                    <div class="row">
                        <div class="col fs-10">
                            <span class="bold text-danger" v-if="!this.order.complete">{{this.order.current_step.details.initial_name}}</span>
                            <span class="bold text-success" v-if="this.order.complete">Complete</span>
                        </div>
                    </div>
                    <div class="row fs-9" >
                        <div class="col muted">
                            <span class="inline v-align-middle" v-if="!this.order.complete">{{this.order.current_step.details.description}}</span>
                            <span class="inline v-align-middle" v-if="this.order.complete">Order has been delivered</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-auto">
            <order-action-component :data="this.data"></order-action-component>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
        methods: {
            route: route
        }
    }
</script>