<template>
    <v-card :width="cardWidth" :outlined="false" tile flat :disabled="false" color="transparent"
        :class="{'dashboard-item-disabled': false}"
        :id="'dashboard-item-' + item.id"
    >
        <v-card :color="disabled ? 'grey lighten-1' : '#f47920'" outlined rounded>
            <v-sheet color="white" class="pa-1 d-flex align-center">
                <v-sheet :width="iconWidth">
                    <v-img
                        v-if="item.icon"
                        :src="$url + 'imgs/icons/' + item.icon + '.png'"
                        :width="iconWidth"
                        :height="iconWidth"
                        position="right center"
                    />
                </v-sheet>

                <v-sheet :width="'calc(100% - ' + iconWidth + ' - ' + actionWidth+ ')'" class="transparent align-self-center">
                    <v-sheet 
                        class="text-truncate text-body-2"
                        :class="{
                            'orange--text': ! disabled,
                            'grey--text': disabled,
                        }"
                        width="100%"
                    >
                        {{__(item.title) }} 
                    </v-sheet>

                    <v-sheet
                        width="100%"
                        height="48"
                        v-if="false && item.slot"
                        class="mt-2 text-caption overflow-auto"
                    >
                        <component 
                            ref="Summary"
                            :is="'dashboard-record-summary-' + item.slot"
                            :app="app"
                            :customer="customer"
                            @disabled="OnDisabled"
                        >
                        </component>
                    </v-sheet>
                </v-sheet>

                <v-sheet :width="actionWidth">
                    <cs-orange-btn 
                        icon="mdi-chevron-right"
                        :tooltip="disabled ? null : 'Deschide ' + this.item.title"
                        :disabled="disabled"
                        :click="OnClick"
                    />
                </v-sheet>

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

<script>
    export default {
        props: {
            app: {required: true},
            width: {default: null},
            item: {required: true},
            customer: {required: true},
            iconWidth: {default: '56px'},
            actionWidth: {default: '30px'},
        },

        data: () => ({
            disabled: true
        }),

        computed: {
            cardWidth() {
                return '100%';
            },           
        },

        methods: {
            OnDisabled(disabled) {
                /**
                 * Asta vine de la componenta interioara
                 * In ideea ca daca nu avem materiale de vazut sa nu le vad
                 */
                if(! this.disabled)
                {
                    // this.disabled = this.app.platform == 'admin' ? false : disabled;
                }
            },
            
            OnClick() {
                if(! this.disabled)
                {
                    this.$emit('click-customer-dashboard-item', this.item);
                }
            }
        },

        created() {
            this.disabled = false;
          
            if(! _.has(this.item.props, 'app'))
            {
                this.disabled = true;
            }
            else
            {
                if(_.has(this.item.props, 'permission'))
                {
                    this.disabled = ! this.app.Can(this.item.props.permission);
                }
            }
        },

        components: {
            CsOrangeBtn: require('@CsVueComp/buttons/CsOrangeBtn').default,
        },

        name: 'DashboardRecord',
    }
</script>

<style lang="scss" scoped>
    .dashboard-item-disabled {
        filter: grayscale(100%);
    }
</style>