<template>
    <li :class="itemClasses">
        <div :class="tailClasses"></div>
        <div :class="headClasses" :style="customColor" ref="dot">
            <slot name="dot"></slot>
        </div>
        <div :class="contentClasses">
            <slot></slot>
        </div>
    </li>
</template>
<script>
    const prefixCls = 'ivu-timeline';

    export default {
        name: 'TimelineItem',
        props: {
            color: {
                type: String,
                default: 'blue'
            },
            solid: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                dot: false
            };
        },
        mounted() {
            this.dot = this.$refs.dot.innerHTML.length ? true : false;
        },
        computed: {
            itemClasses() {
                return `${prefixCls}-item`;
            },
            tailClasses() {
                return `${prefixCls}-item-tail`;
            },
            headClasses() {
                return [
                    `${prefixCls}-item-head`,
                    {
                        [`${prefixCls}-item-head-custom`]: this.dot,
                        [`${prefixCls}-item-head-${this.color}`]: this.headColorShow
                    }
                ];
            },
            headColorShow() {
                return this.color == 'blue' || this.color == 'red' || this.color == 'green';
            },
            customColor() {
                let style = {};
                if (this.color) {
                    if (!this.headColorShow) {
                        style = {
                            'color': this.color,
                            'border-color': this.color
                        };
                    }
                }
                if (this.solid) {
                    style.backgroundColor = this.color;
                }
                return style;
            },
            contentClasses() {
                return `${prefixCls}-item-content`;
            }
        }
    };
</script>
