<template>
    <li class="timeline-item" v-bind="$attrs">
        <div class="timeline-item_splits_wrapper"
             v-if="split">
            <div class="timeline-item_splits_left">
                <div class="timeline-item_details_label" v-if="leftLabel">{{leftLabel}}</div>
                <div v-if="!hideTimestamp"
                     class="timeline-item__timestamp">
                    {{timestamp}}
                </div>
                <slot name="left"></slot>
            </div>
            <div class="timeline-item_shaft">
                <div class="timeline-item__tail"></div>
                <div v-if="!$slots.dot"
                     class="timeline-item__node"
                     :style="{backgroundColor: color}">
                    <i v-if="icon"
                       class="el-timeline-item__icon"
                       :class="icon"></i>
                </div>
                <div v-if="$slots.dot"
                     class="el-timeline-item__dot">
                    <slot name="dot"></slot>
                </div>
            </div>
            <div class="timeline-item_splits_right timeline-item_details">
                <div class="timeline-item_details_label" v-if="rightLabel">{{rightLabel}}</div>
                <slot></slot>
            </div>
        </div>
        <div class="timeline-item_wrapper"
             v-else>
            <div class="timeline-item_shaft">
                <div class="timeline-item__tail"></div>
                <div v-if="!$slots.dot"
                     class="timeline-item__node"
                     :style="{backgroundColor: color}">
                    <i v-if="icon"
                       class="el-timeline-item__icon"
                       :class="icon"></i>
                </div>
                <div v-if="$slots.dot"
                     class="el-timeline-item__dot">
                    <slot name="dot"></slot>
                </div>
            </div>
            <div class="timeline-item_content">
                <div v-if="!hideTimestamp && placement === 'top'"
                     class="timeline-item__timestamp is-top">
                    {{timestamp}}
                </div>
                <div class="timeline-item_details">
                    <slot></slot>
                </div>
                <div v-if="!hideTimestamp && placement === 'bottom'"
                     class="timeline-item__timestamp is-bottom">
                    {{timestamp}}
                </div>
            </div>
        </div>
    </li>
</template>

<script>
export default {
    name: "enoTimelineItem",
    props: {
        color: String,
        icon: String,
        split: Boolean,
        timestamp: String,
        placement: {
            type: String,
            default: 'bottom'
        },
        hideTimestamp: {
            type: Boolean,
            default: false
        },
        rightLabel:String,
        leftLabel:String,
    }
}
</script>

<style scoped>
</style>