import {
    WeaFormItem,
} from 'ecCom'

import {
    Spin,
    Button,
    Timeline
} from 'antd'

import {
    i18n
} from '../../public/i18n';

import '../../style/common.less';

export default class AnchorDetect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
       
    }

    componentWillUnmount() {
        
    }

    

    render() {
        const {
            anchorList,
            activity,
            onChange
        } = this.props;

        const activityStyle = {
            color:"#4aacf4"
        }

        return (
            <div className='right'>
                <Timeline>
                {
                    anchorList.map((item,index) => {
                        return(
                            <Timeline.Item color={activity == index ? 'blue' : 'gray'} dot={activity == index ? <i className="icon-coms-position" color='#4aacf4'/> : ''}>
                                <span style={activity == index ? activityStyle : {}} className='title' onClick={() => onChange(item.id,index)}>{item.title}</span>
                            </Timeline.Item>
                        )
                    })
                }
                </Timeline>
          </div>
        )
    }
}