<template>
    <v-list-item>
        <v-list-item-avatar class="rounded-0">
            <v-img
                :src="this.$url + 'imgs/icons/' + notification.icon + '.png'"
                width="36"
                height="36"
                contain
            >
            </v-img>
        </v-list-item-avatar>

        <v-list-item-content>
            <v-list-item-title class="d-flex align-center justify-space-between">
                <div class="d-flex align-center">
                    <user-avatar
                        :user="notification.sender"
                    />

                    <span class="ml-1 text-caption">
                        {{ notification.sender.full_name }}
                    </span>
                </div>

                <div width="50%" class="text-truncate text-caption font-weight-bold">
                    {{notification.customer.name}}
                </div>
            </v-list-item-title>

            <v-list-item-subtitle class="d-flex justify-space-between">
                <div class="text-caption font-weight-bold pr-3">
                    {{notification.props.title}}
                </div>
                <div class="text-caption">
                    {{ ToDateTime(notification.created_at)}} 
                </div>
            </v-list-item-subtitle>

            <div class="d-flex justify-space-between align-center">
                <div class="text-caption" v-html="notification.message"> 
                </div>

                <div>
                    <v-icon small 
                        :color="notification.noty_status.color" 
                        :title="__(notification.noty_status.text)">
                            {{notification.noty_status.icon}}
                    </v-icon> 
                </div>
            </div>
        
        </v-list-item-content>
    </v-list-item>

</template>

<script>
    const Redirect = require('@CsFunc/global/Redirect');

    export default {
        props: {
            notification: {required: true},
        },

        computed: {
            sender() {
                return this.notification.sender;
            },

            icon() {
                return this.$url + 'images/icons/' + this.notification.type.entity + '.png';
            },

            title() {
                return this.notification.type.title + (this.$env == 'local' ? ' [' + this.notification.type.platform + ']' : '');
            }
        },

        methods: {
            OnClickNotification() {
                if(this.notification.props)
                {
                    if(_.has(this.notification.props, 'url'))
                    {
                        this.$emit('item-click');
                        return Redirect(this.$url + this.notification.props.url);
                    }
                }
            }
        },

        components: {
            UserAvatar: require('VUECOMP/VIEWS/Attributes/Users/UserAvatar').default,
        },

        name: 'NotificationsPopupItem',
    }
</script>