
<script>
    export default {
        name: "enoTimeline",
        props: {
            reverse: {
                type: Boolean,
                default: false
            },
            vertical:{
                type: Boolean,
                default: true
            }
        },

        provide() {
            return {
                timeline: this
            };
        },
        render() {
            const reverse = this.reverse;
            const vertical = this.vertical;
            const classes = {
                'timeline': true,
                'is-reverse': reverse,
                'is-horizontal':!vertical,
                'is-vertical':vertical,
            };
            let slots = this.$slots.default || [];
            if (reverse) {
                slots = slots.reverse();
            }
            return (<ul class={ classes }>
                { slots }
                </ul>);
        }

    }
</script>

<style lang="less">
     @import "../../style/base.less"; 
    /*时间轴*/
    .timeline{
        display: block;
        .timeline-item{
            .timeline-item_shaft{
                .timeline-item__node{
                    display: inline-block;
                    vertical-align: text-top;
                    width: 8px;
                    height: 8px;
                    border-radius: 50%;
                    background-color: @mainColor;
                }
            }
            .timeline-item_splits_wrapper{
                .timeline-item_splits_left,.timeline-item_splits_right{
                    .timeline-item_content{
                        font-size: 12px;
                        color:#9c9c9c;
                    }
                }
                .timeline-item_splits_right{
                    font-size: 12px;
                    color:#9c9c9c;
                    .timeline-item_details_label{
                        font-size: 14px;
                        color:@textColor;
                    }
                }
            }
        }
        &.is-vertical{
            .timeline-item{
                width: 100%;
                .timeline-item_shaft{
                    width: 40px;
                    padding-top: 6px;
                    text-align: center;
                    display: table-cell;
                    position: relative;
                    .timeline-item__tail{
                        height: calc(100% - 20px);
                        width: 2px;
                        position: absolute;
                        top: 20px;
                        left: 50%;
                        margin-left: -1px;
                        background-color: @mainColor;
                    }
                    .timeline-item__node{
                        display: inline-block;
                        vertical-align: text-top;
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: @mainColor;
                    }
                }
                .timeline-item__timestamp{
                    font-size: 13px;
                    color:@textSubColor;
                }
                .timeline-item_splits_wrapper{
                    display: table;
                    width: 100%;
                    .timeline-item_splits_left,.timeline-item_splits_right{
                        width:45%;
                        display: table-cell;
                        padding-bottom: 20px;
                        vertical-align: top;
						word-break: break-all;
                        .timeline-item_content{
                            font-size: 12px;
                            color:#9c9c9c;
                        }
                    }
                    .timeline-item_splits_left{
                        text-align: right;
                    }
                    .timeline-item_splits_right{
                        font-size: 12px;
                        color:#9c9c9c;
                        .timeline-item_details_label{
                            font-size: 14px;
                            color:@textColor;
                        }
                    }
                }
                .timeline-item_wrapper{
                    display: table;
                    vertical-align: text-top;
                    padding: 0 20px;
                    .timeline-item_content{
                        display: table-cell;
                        padding-bottom: 20px;
                        vertical-align: top;
                        .timeline-item_details{
                            font-size: 12px;
                            color:@textThirdColor;
                        }
                    }
                }
                &:nth-last-of-type(1){
                    .timeline-item_shaft{
                        .timeline-item__tail{
                            display: none;
                        }
                    }
                }
            }
        }
        &.is-horizontal{
            .timeline-item{
                display: inline-block;
                .timeline-item_shaft{
                    width: auto;
                    height: 40px;
                    position: relative;
                    .timeline-item__tail{
                        width: calc(100% - 26px);
                        height: 2px;
                        position: absolute;
                        top: 50%;
                        left: 16px;
                        margin-top: -1px;
                        background-color: @mainColor;
                    }
                    .timeline-item__node{
                        position: absolute;
                        top: 50%;
                        left: 0;
                        margin-top: -4px;
                    }

                }
                .timeline-item_splits_wrapper{
                    .timeline-item_splits_left,.timeline-item_splits_right{
                        text-align: left;
                        padding-right: 20px;
                        .timeline-item_content{
                            font-size: 12px;
                            color:#9c9c9c;
                        }
                    }
                    .timeline-item_splits_right{
                        font-size: 12px;
                        color:#9c9c9c;
                        .timeline-item_details_label{
                            font-size: 14px;
                            color:@textColor;
                        }
                    }
                }
            }
        }

        .timeline-item{
            &.is-active{
                .timeline-item_splits_wrapper{
                    .timeline-item__timestamp{
                        color:@mainColor;
                    }
                    .timeline-item_splits_right{
                        .timeline-item_details_label{
                            color:@mainColor;
                        }
                    }
                }

            }
        }
    }
</style>