<template>
    <v-card
        tile
        flat
        :height="app.height"
        :width="pagewidth"
        class="mx-auto overflow-x-auto overflow-y-hidden"
    >  

        <v-card-title class="pa-1">
            <image-icon 
                :src="app.url + 'imgs/blue-icons/service.png'"
            />

            {{ __('Servicii') }}

            <v-spacer></v-spacer>
            
            <cs-quick-search 
                :dataprovider="dataprovider" 
                class="mr-2"
            />

            <cs-records-count 
                :dataprovider="dataprovider"
                field="itemsCount"
            >
                <cs-btn-reload 
                    :dataprovider="dataprovider" 
                />
            </cs-records-count>
        </v-card-title>

        <v-card-subtitle class="pl-12 py-0 my-0">
            {{ __('Lista serviciilor disponibile. Se folosesc și regăsesc în comenzile clienților.') }}
        </v-card-subtitle>

        <cs-toolbar 
            :toolbar="toolbar"
        >
            <v-sheet 
                max-width="200"
                class="transparent text-truncate text-orange font-weight-bold"
            >
                {{activeService ? activeService.name : ''}}
            </v-sheet>
        </cs-toolbar>

        <v-sheet
            :height="app.height - 44 - 22 - 48"
            :width="pagewidth"
            class="d-flex"
        >
               
            <template v-if="types.length > 0">
                <service-type-list 
                    v-for="(type, index) in types"
                    :key="'type-' + index"
                    :app="app"
                    :type="type"
                    :height="app.height - 44 - 22 - 48"
                    :width="pagewidth/types.length"
                />
            </template>

        </v-sheet>

        <service-form-menu 
            :app="app"
            :types="app.dataSession.Servicestypes.options"
        />
    </v-card>
</template>

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

        computed: {
            dataprovider() {
                return this.app.dataSession.Services;
            },

            toolbar() {
                return this.app.menus.Servicestoolbar;
            },

            types() {
                return this.app.dataSession.Servicestypes.items;
            },

            activeService() {
                return this.app.classes.Controller.activeService;
            },
        },
        
        components: {
            ImageIcon: require('@CsVueComp/helpers/images/ImageIcon').default,
            CsRecordsCount: require('@CsVueComp/dataprovider/CsRecordsCount').default,
            CsQuickSearch: require('@CsVueComp/dataprovider/CsQuickSearch').default,
            CsBtnReload: require('@CsVueComp/buttons/CsBtnReload').default,
            CsToolbar: require('@CsVueComp/menus/toolbar/CsToolbar').default,
        },

        name: 'ServicesPage',
    }
</script>