<template>
    <div class="event-item">
        <EventContent :event="event"
            :json="json"></EventContent>
        <div v-if="json.event"
            class="event-forward">
            <EventContent :event="json.event"
                :json="forwardJson"></EventContent>
        </div>
        <div class="event-buttons">
            <mu-button flat
                small
                @click="handleLike">
                <mu-icon left
                    size="16"
                    :color="event.info.liked ? 'primary': ''"
                    value="thumb_up"></mu-icon>
                <span>{{ event.info.likedCount }}</span>
            </mu-button>
            <mu-button flat
                small
                :to="{ name: 'comment', params: { type: 'event', id: `${event.id}_${event.user.userId}` } }">
                <mu-icon left
                    size="16"
                    value="comment"></mu-icon>
                <span>{{ event.info.commentCount }}</span>
            </mu-button>
        </div>
    </div>
</template>

<script>
import EventContent from './EventContent.vue';

export default {
    props: {
        event: {
            type: Object,
            required: true
        }
    },
    computed: {
        json() {
            return JSON.parse(this.event.json);
        },
        forwardJson() {
            if (!this.json.event) return null;
            return JSON.parse(this.json.event.json);
        }
    },
    methods: {
        handleLike() {
            this.$emit('like', this.event);
        }
    },
    components: {
        EventContent
    }
};
</script>

<style lang="less">
.event-item {
    .event-forward {
        background-color: rgba(0, 0, 0, 0.06);
        padding: 1px 8px;
        margin-left: 48px;
        margin-bottom: 8px;
    }
    .event-buttons {
        display: flex;
        margin-left: 44px;
        margin-bottom: 6px;
        .mu-flat-button {
            margin-right: 8px;
            min-width: unset;
            padding: 0;
        }
    }
}
</style>
