<template>
    <div :class="`${prefix}-timeline-item`">
        <div :class="`${prefix}-timeline-item__main`">
            <div :class="[`${prefix}-timeline-item__icon`,current?`${prefix}-timeline-item__icon--active`:'']" />
            <div :class="`${prefix}-timeline-item__desc`">
                <p :class="`${prefix}-timeline-item__desc__title`">
                    <slot name="title">
                        {{ data.title }}
                    </slot>
                </p>
                <p v-if="data.time"
                   :class="`${prefix}-timeline-item__desc__time`">
                    {{ data.time }}
                </p>
                <div :class="`${prefix}-timeline-item__desc__content`">
                    <slot name="content">
                        {{ data.content }}
                    </slot>
                </div>
            </div>
        </div>
        <div :class="`${prefix}-timeline-item__line`" />
    </div>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-timeline-item`,
    mixins: [prefixMixins],
    props: {
        data: Object,
        timelines: Array
    },
    data() {
        return {
            current: false
        };
    },
    mounted() {
        this.index = this.timelines.indexOf(this.data);
        if (this.index === this.timelines.length - 1) {
            this.current = true;
        }
    }
};
</script>