<template>
    <rect-photo-card
        class="remote-rect-card"
        :v-if="remoteData"
        :card="remoteData"
        :card-size="{
            'lg': this.cardSize.lg,
            'md': this.cardSize.md,
        }"
        :with-sidebar="withSidebar"
    >
    </rect-photo-card>
</template>

<script>
module.exports = {
    name: 'RemoteRectNewsCard',
    mixins: [remoteComponentMixin, remoteCardsMixin, sizableComponentMixin],
    components: {
        'rect-photo-card': httpVueLoader('/components/RectPhotoCard.vue'),
    },
    props: {
        card: Object,
        withSidebar: Boolean,
    },
    methods: {
        getNewsContent(data) {
            return {
                link: this.getLink(data),
                linkTarget: this.card.linkTarget,
                text: this.stripText(this.getTitle(data), this.card.textLength),
                gradient: this.getRemoteGradientClass(data.acf.filter),
                date: this.formatDate(data.date),
            }
        },
        stripText(text, textLength) {
            if (textLength < 0 || text.length <= textLength) {
                return text;
            }
            let stripedText = `${text.slice(0, textLength)}`;
            if (stripedText.length > 0) {
                stripedText += '...';
            }
            return stripedText;
        },
    },
};
</script>

<style lang="stylus">
#app
    .remote-rect-card
        .rectPhotoCard-content-text
            font-size 18px
</style>
