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


class StepBar extends React.Component {
    constructor(props) {
        super(props); 
        this.state={
            myCurrentStep:0
        }
    }
    static propTypes = {      
        currentStep:PropTypes.number,
        steps:PropTypes.array,
        onChange:PropTypes.func,
        headClick:PropTypes.bool
    } 
    static defaultProps={  
        currentStep:1,
        headClick:false,
        steps:[
            {title:'导入用工成本、社保表'},
            {title:'确认优化方案'},
            {title:'实施智能薪酬方案'},
            {title:'订单支付'}
        ], 
        close:()=>{

        },
        onChange:(step)=>{
            console.log(step);
        }
    }  
    stepClick(step){
        const {onChange,headClick}=this.props;
        if(headClick){
            const {myCurrentStep}=this.state;
            this.setState({
                myCurrentStep:step
            });
            if(myCurrentStep!=step){
                onChange(step+1);
            }
        } 
    }
    componentDidMount(){  
         const {currentStep}=this.props;
        this.setState({
            myCurrentStep:currentStep-1
        });
    }  
    componentWillReceiveProps(nextProps){   
        const {currentStep}=nextProps;
        if(currentStep!=this.props.currentStep){
            this.setState({
                myCurrentStep:currentStep-1
            });
        }
    }
    componentDidUpdate(prevProps,prevState){  
    }
    componentWillUnmount() {  
        
    }  
    render(){      
        const {title,steps,headClick}=this.props,self=this;
        const {myCurrentStep}=this.state;
        let clickStyle={cursor: 'default'};
        if(headClick){
            clickStyle={cursor: 'pointer'}
        } 
        return (
            <div className={cx(s.step_bar_wrap)} > 
                {steps.map((step,i)=>{
                    return (
                        <div key={i} className={cx(s.step_item_wrap,i<=myCurrentStep?s.active:null)}> 
                           <div style={clickStyle} className={cx(s.step_item)} onClick={self.stepClick.bind(self,i)}>
                                {i+1}
                           </div>
                           <div className={cx(s.step_item_content)}>
                                {step.title}
                           </div>
                           {(i+1)!=steps.length&&<div className={cx(s.step_item_line,i<myCurrentStep?s.active:null)}></div>} 
                        </div>
                    )
                })} 
            </div>
        ) 
    }
}



export default StepBar;