import React,{PropTypes} from 'react';
import ReactDOM from 'react-dom';  
import cx from 'classnames';
import s from './breadline.scss'; 


class Steps extends React.Component {
    constructor(props) {
        super(props); 
    }
    static propTypes = {    
        title:PropTypes.string,
        close:PropTypes.func,
        style:PropTypes.object,
        width:PropTypes.number, 
        steps:PropTypes.array,
        curentStep:PropTypes.number
    } 
    static defaultProps={   
        curentStep:1,
        width:830, 
        steps:['上传文件','字段映射设置','完成'],
        close:()=>{

        }
    }  
    componentDidMount(){  
    }  
    componentWillReceiveProps(nextProps){   
    }
    componentDidUpdate(prevProps,prevState){  
    }
    componentWillUnmount() {  
        
    }  
    render(){     
        const {width,curentStep,steps}=this.props;  
        const maxWidth=`${width}px`; 
        let setpNum=steps.length;
        return (
            <div className={cx(s.steps)} style={{width:maxWidth}}>
                {steps.map((step,i)=>{
                    let percent=100/(setpNum-1)*i;
                    let activate=true;
                    if(curentStep<i+1){
                        activate=false;
                    }
                    return (
                    <div key={i} className={cx(s.step,activate?s.activate:s.unActive)} style={{marginLeft:percent+'%'}}>
                        {activate&&<i className={cx('kr_icon')}>&#xe620;</i>}
                        {!activate&&<div>{i+1}</div>}
                        <div className={cx(s.step_title,activate?s.bold:s.unBold)}>{step}</div>
                    </div>
                    )
                })}
                <div className={cx(s.setp_line)}>
                </div>
            </div>
        ) 
    }
}



export default Steps;