<template>
    <div>
        <div class="dropdown-divider"></div>
        <div class="dropdown-item d-flex" style="white-space: initial"
             @click.prevent="readNotification(item)">
            <div class="avatars-w-30 mr-3">
                <app-avatar
                    :shadow="false"
                    :img="item.img"
                    :title="item.name"
                />
            </div>
            <div class="media-body text-left">
                <p class="my-0 media-heading" v-html="sanitize(item.title)"></p>
                <span class="text-muted">
                    {{ textTruncate(item.description, 25) }}
                </span>
                <span class="primary-text-color link">
                    <span class="mr-3">{{ item.date }}</span>
                    <span>{{ item.time }}</span>
                </span>
            </div>
        </div>
    </div>
</template>

<script>
import {textTruncate} from "../../../../../helpers/Helpers";
import {axiosPost} from "../../../../../helpers/AxiosHelper";
import {mapActions} from "vuex";
import sanitize from "../../../../../helpers/SanitizeHelper";

export default {
    props: ['item'],
    data() {
        return {
            textTruncate,
            sanitize,
        }
    },
    methods: {
        ...mapActions([
            'getNotifications'
        ]),
        readNotification(notification) {
            axiosPost(`admin/user/notifications/mark-as-read/${notification.id}`).then(({data}) => {
                if (data.data.url) {
                    window.location = data.data.url;
                }
                this.getNotifications();
            });
        },
    }
}
</script>

<style scoped>

</style>