import React, {Component} from 'react';
import {observer} from 'mobx-react';
import {Timeline} from 'antd';

@observer
export default class Left extends Component{
    render(){
        const {store} = this.props;
        const {timeline, itemClick, selectedNode} = store;
        return (
            <div className='left'>
                <Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@bwhort`}>
                    {
                        timeline.map((row, index) => {
                            return (
                                <Timeline.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@33vw9c@${index}`} key={row.key} onClick={() => itemClick(row)} dot={<div className='dot'><div className={selectedNode.key == row.key ? 'active' : ''}>{index + 1}</div></div>}>
                                    <div className={selectedNode.key == row.key ? 'nodeLabel-active' : 'nodeLabel'}>{row.title}</div>
                                </Timeline.Item>
                            )
                        })
                    }
                </Timeline>
            </div>
        )
    }
}