<template>
    <news-card-my
        v-if="remoteData"
        :card="remoteData"
        :with-sidebar="withSidebar"
        :card-size="{
            'lg': this.cardSize.lg,
            'xl': this.cardSize.xl,
        }"
    >
    </news-card-my>
</template>

<script>
module.exports = {
    name: 'RemoteNewsCard',
    mixins: [remoteComponentMixin, remoteCardsMixin, sizableComponentMixin],
    components: {
        'news-card-my': httpVueLoader('/components/NewsCard.vue'),
    },
    props: {
        card: Object,
        withSidebar: Boolean,
    },
    methods: {
        getNewsContent(data) {
            return {
                link: this.getLink(data),
                linkTarget: this.card.linkTarget,
                title: this.getTitle(data),
                gradient: this.getRemoteGradientClass(data.acf.filter),
                text: this.stripText(data.content.rendered, this.card.textLength),
                date: this.formatDate(data.date),
            }
        },

        stripText(text, textLength) {
            if (text.length <= textLength) {
                return text;
            }
            let stripedText = `${text.slice(0, textLength)}...`;
            return stripedText;
        },
    }
};
</script>
