import React from 'react';
import { Icon, message, Button, Checkbox } from 'antd';
import './create.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import Steps from './steps';
import SpinContainer from "../../SpinContainer";

const CreateEvaluate = React.createClass({
  getInitialState() {
    return {
      title: '',
      id: '',
      checked: false,
      loading: false,
      announce: ''
    };
  },
  theLoad(){
    this.setState({
      loading: true
    })
    $.ajax({
      url: globalConfig.context + '/open/html/get/evaluation_announcement'
    }).done(function (res) {
      if (res) {
        this.setState({
          loading: true,
          announce: res
        })
      }
    }.bind(this)).always(function () {
      this.setState({
        loading: false
      })
    }.bind(this));
  },

  returnList() {
    if (this.props.handlekey) {
      this.props.handlekey('evaluate');
    }
  },
  announce() {
    return {
      __html: this.state.announce
    }
  },
  agree() {
    $.ajax({
      url: globalConfig.context + '/api/user/evaluate/create'
    }).done(function (res) {
      if (res && res.data) {
        this.setState({
          loading: true,
          id: res.data
        })
      }
    }.bind(this)).always(function () {
      this.setState({
        loading: false
      })
    }.bind(this));
  },
  onChanged(e) {
    this.setState({
      checked: e.target.checked
    });
  },
  titleChanged(title) {
    this.setState({
      title: title
    });
  },
  componentWillMount() {
    if (this.props.data.id) {
      this.state.id = this.props.data.id;
    } else {
      this.state.id='';
      this.state.title='';
      this.theLoad();
    }
  },
  componentWillReceiveProps(nextProps) {
    if (!this.props.visible && nextProps.visible) {
        if (nextProps.data.id) {
            this.state.id = nextProps.data.id;
        } else {
            this.setState({id:'',title:''});
            this.theLoad();
        };
    };
},
  renderBody() {
    if (this.state.id) {
      return <Steps id={this.state.id} title={this.titleChanged} visible={this.props.visible} />
    } else {
      return <div>
        <div className="announce-head">
          本系统使用说明
          <p>使用本系统之前，请您务必仔细阅读并透彻理解本声明。当您使用本系统，将视为您认可本声明内容。</p>
        </div>
        <div className="announce-body" dangerouslySetInnerHTML={this.announce()} />
        <div className="announce-foot">
          <Checkbox checked={this.state.checked} onChange={this.onChanged}>我同意以上声明</Checkbox>
          <Button type="primary" onClick={this.agree} disabled={!this.state.checked}>继续</Button>
        </div>
      </div>
    }
  },
  render() {
    return (
       <SpinContainer spinning={this.state.loading}>
        <div className="content-container">
          <div className="content-title">
            科技评估 {this.state.title ? '- ' + this.state.title : ''}
          </div>
          <div className="content-body">
            {this.renderBody()}
          </div>
        </div>
      </SpinContainer>
    )
  },
});

export default CreateEvaluate;