import React from 'react';
import { Steps, Spin } from 'antd';
import './steps.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import Step1 from './steps/step1';
import Step2 from './steps/step2';
import Step3 from './steps/step3';
import Step4 from './steps/step4';
import Step5 from './steps/step5';
import Step6 from './steps/step6';
import Step7 from './steps/step7';
import Step8 from './steps/step8';

const Step = Steps.Step;
const steps = [{
  title: '基本信息',
  content: Step1
}, {
  title: '法律状况评估',
  content: Step2
}, {
  title: '技术状况评估',
  content: Step3
}, {
  title: '历史收入',
  content: Step4
}, {
  title: '收入预估',
  content: Step5
}, {
  title: '所得税预估',
  content: Step6
}, {
  title: '风险预估',
  content: Step7
}, {
  title: '评估值',
  content: Step8
}];

const EvaluateSteps = React.createClass({
  getInitialState() {
    return {
      current: 0,
      loading: true,
      steps: {}
    };
  },
  next(values) {
    const current = this.state.current + 1;
    this.state.steps[this.state.current] = values;
    if (this.state.current === 0 && this.props.title) {
      this.props.title(values.name);
    }
    this.setState({
      current: current,
      steps: this.state.steps
    });
  },
  prev() {
    const current = this.state.current - 1;
    this.setState({ current });
  },
  componentWillMount() {
    $.ajax({
      url: globalConfig.context + '/api/user/evaluate/info/' + this.props.id
    }).done(function (res) {
      this.setState({
        steps: res || {},
        loading: false
      })
    }.bind(this)).fail(function () {
      this.setState({
        loading: false
      })
    }.bind(this));
    this.setState({
      current: this.props.step || 0
    })
  },
  render() {
    this.state.StepContent = steps[this.state.current].content;
    return (
      <Spin spinning={this.state.loading}>
        <div style={{ marginTop: 10 }}>
          <Steps current={this.state.current} progressDot>
            {steps.map(item => <Step key={item.title} title={item.title} />)}
          </Steps>
          <div className="steps-content">{
            <this.state.StepContent next={this.next} prev={this.prev} id={this.props.id} data={this.state.steps[this.state.current]} record={this.state.steps}/>
          }</div>
        </div>
      </Spin>
    )
  },
});

export default EvaluateSteps;