<template>
    <div class="row">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="order-history-border"></div>
                </div>
            </div>
            <div class="row fs-12 p-t-15 p-b-15 m-l-0 m-r-0 ">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col">
                            <small class="muted all-caps">Delivery Address</small>
                        </div>
                    </div>
                    <order-delivery-address-componenet :data="this.data"></order-delivery-address-componenet>
                </div>
                <div class="col-9 p-l-0">
                    <div class="row m-l-0 m-r-0 m-b-15">
                        <div class="col p-l-0">
                            <small class="muted all-caps">Order History</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col p-l-0">
                            <div class="row m-l-0 m-r-0 p-b-15 relative order-history" v-for="detail in this.order.details">
                                <div class="absolute bullet-connector hint-text"></div>
                                <div class="col">
                                    <div class="row align-items-center justify-content-center">
                                        <div class="col-auto p-r-10">
                                            <div class="bg-master-light btn-rounded hint-text" style="width: 8px;height: 8px;" ></div>
                                        </div>
                                        <div class="col-auto hint-text p-l-0">
                                            {{detail.date}}
                                        </div>
                                        <div class="col p-l-0 semi-bold lh-20" v-html="detail.description"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import OrderDeliveryAddressComponenet from "./OrderDeliveryAddressComponenet";
    export default {
        components: {OrderDeliveryAddressComponenet},
        props: {
            'data': {
                required: true
            }
        },
        data() {
            return {
                order: this.data,
            }
        },
        watch: {
            'data': function() {
                this.order = this.data;
            }
        },
    }
</script>