<template>
    <v-sheet
        :height="height"
        :width="width"
        class="overflow-auto"
        id="insert-customer-stepper"
    >
    <v-stepper
            v-model="stepper.activeStep"
            flat
            tile
            vertical
            width="100%"
            class="mx-0"
        >
            <template   
                v-for="(step, index) in stepper.getOptions"
            >
                <v-stepper-step
                    :key="'step-' + index"
                    :complete="step.IsComplete()"
                    :step="step.order_no"
                    :color="step.IsComplete() ? 'green' : 'bg-dark-blue'"
                >
                    <span class="text-dark-blue">
                        {{ __( step.caption()) }}
                    </span>

                    <small class="text-dark-blue">
                        {{ __( step.subtitle()) }}
                    </small>
                </v-stepper-step>
            
                <v-stepper-content 
                    :key="'content-' + index"
                    :step="step.order_no"
                >
                    <v-card 
                        tile
                        flat
                    >
                        <component 
                            :is="step.contentComponent" 
                            :app="app"
                        >
                        </component>
                    </v-card>

                </v-stepper-content>
            </template>

        </v-stepper>
            
    </v-sheet>
</template>

<script>
    export default {
        props: {
            app: {required: true},
            height: {default: null},
            width: {default: null},
        },

        computed: {
            stepper() {
                return this.app.menus.Insertcustomerstepper;
            },
        },

        name: 'InsertShareMaterialeStepper',
    }
</script>