import React from 'react';
import { Icon } from 'antd';
import './certify.less';

import Personal from './personal.jsx';

const Content = React.createClass({
    getInitialState() {
        return {
            loading: false,
            theKey: 'personal',
            stepNum: 1,
            step0Class:'step-done',
            step1Class:'step-doing',
            step2Class:'step-none',
            step3Class:'step-none',
            step4Class:'step-none',
            step5Class:'step-none',
            step6Class:'step-none',
        };
    },
    render() {
        return (
            <div className="certify-content">
                <div className="certify-step clearfix">
                    <div className={this.state.step0Class}><div>个人实名认证流程</div></div>
                    <div className={this.state.step1Class}>
                        {this.state.stepNum > 1 ? <Icon type="check" /> : <i>1</i>}<div><p>填写</p><p>个人信息</p></div>
                    </div>
                    <div className={this.state.step2Class}>
                        {this.state.stepNum > 2 ? <Icon type="check" /> : <i>2</i>}<div><p>填写</p><p>银行卡信息</p></div>
                    </div>
                    <div className={this.state.step3Class}>
                        {this.state.stepNum > 3 ? <Icon type="check" /> : <i>3</i>}<div>确认信息</div>
                    </div>
                    <div className={this.state.step4Class}>
                        {this.state.stepNum > 4 ? <Icon type="check" /> : <i>4</i>}<div>信息审核</div>
                    </div>
                    <div className={this.state.step5Class}>
                        {this.state.stepNum > 5 ? <Icon type="check" /> : <i>5</i>}<div><p>填写打入</p><p>卡内金额</p></div>
                    </div>
                    <div className={this.state.step6Class}>
                        {this.state.stepNum > 6 ? <Icon type="check" /> : <i>6</i>}<div>认证结果</div>
                    </div>
                </div>
                <div className="certify-form">
                    {(() => {
                        switch (this.state.leftKey) {
                            case 'personal':
                                return <Personal />;
                        };
                    })()}
                </div>
            </div>
        )
    }
});

export default Content;