<template>
    <v-expansion-panels
        v-model="app.classes.Panels.value"
    >
        <v-expansion-panel
            v-for="(panel, key) in panels"
            :key="'panel-' + key"
        >
            <v-expansion-panel-header
                class="py-3"
                :style="{
                    'min-height': 'auto',
                }"
            >
                <div 
                    class="text-h7 font-weight-bold"
                    :class="{
                        'text-dark-blue': app.classes.Panels.value != panel.order_no,
                        'text-orange': app.classes.Panels.value == panel.order_no
                    }"
                >
                    {{ __(panel.caption) }}
                </div>
            </v-expansion-panel-header>
            
            <v-expansion-panel-content>

               <component
                    :is="panel.contentComponent"
                    :app="app"
                    :panel="panel"
                >
                </component>
            
            </v-expansion-panel-content>
        </v-expansion-panel>
  </v-expansion-panels>

</template>

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

        computed: {
            panels() {
                return this.app.classes.Panels.getPanels;
            }
        },

        components: {
            PanelContent: require('./Contents/PanelContent').default,
        },
        
        name: 'DPanels',
    }
</script>