<template>
    <v-card outlined class="cyan" rounded>
        <v-sheet class="pa-1">

            <v-sheet>
                <v-sheet>
                    <div class="text-caption">{{ attributes}}</div>
                    <order-form 
                        :app="app"
                        :contract="contract"
                        :order="order"
                        :customer="customer"
                    />
                </v-sheet>

                <v-sheet>

                    <services-list 
                        :services="order.services"
                        :order="order"
                        :contract="contract"
                        :customer="customer"
                        :app="app"
                    />

                </v-sheet>
            </v-sheet>


        </v-sheet>
    </v-card>
</template>

<script>
export default {
    props: {
        app: {required: true},
        order: {default: () => []},
        customer: {required: true},
        contract: {required: true},
    },

    computed: {
            attributes() {
                return _.keys(this.order);
            }
        },
    
    name: 'OrdersListItem',
}
</script>