<template>

    <v-sheet
        :color="type.color"
        outlined
        rounded
    >   
        <v-sheet 
            rounded 
            :class="type.color + '--text' + (isActive ? ' ' + type.color + ' lighten-4' : '')"
            @click="app.classes.Controller.SetActiveService(service)"
        >
            <div class="font-weight-bold pa-1" >
                #{{service.order_no}}. {{service.name }}
            </div>

            

            <div class="px-3 text-caption" v-if="!! service.abonamente">
                {{ __('Abonamente') }}

                <service-abonament-item 
                    v-for="(abonament, index) in service.abonamente"
                    :key="'abonament-' + index"
                    :abonament="abonament"
                    :service="service"
                    :app="app"
                    :type="type"
                    :color="isActive ? ' ' + type.color + ' lighten-4' : ''"
                />
            </div>

            <template v-else>
                <div class="px-3 text-caption">
                    {{ __('Tarif :tarif &euro;', {tarif: service.tarif ? service.tarif : 0}) }}
                </div>

                <div class="px-3 text-caption">
                    {{ __('Tarif ore suplimentare :tarif &euro;', {tarif: service.tarif_ore_suplimentare ? service.tarif_ore_suplimentare : 0}) }}
                </div>

                <div class="px-3 text-caption">
                    {{ __('Număr ore incluse în abonament :ore ore;', {ore: service.ore_incluse_abonament ? service.ore_incluse_abonament : 0}) }}
                </div>
            </template>
        </v-sheet>
    </v-sheet>
</template>

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

        computed: {
            activeService() {
                return this.app.classes.Controller.activeService;
            },

            isActive() {
                return this.activeService && (this.service.id == this.activeService.id)
            }
        },

        name: 'ServiceItem',
    }
</script>