import React from 'react';
import { Spin, Form, Button, Select, message } from 'antd';
import './step3.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

const FormItem = Form.Item;
const Option = Select.Option;

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 10 },
};

const EvaluateStep3 = Form.create({})(React.createClass({
  getInitialState() {
    return {
      loading: false,
      initialData: {}
    };
  },
  componentWillMount() {
    this.state.initialData = this.props.data || {};
  },
  next() {
    if (this.state.loading) {
      return;
    }
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.setState({
          loading: true
        })
        values.id = this.props.id;
        $.ajax({
          url: globalConfig.context + '/api/user/evaluate/step3',
          method: 'post',
          data: values
        }).done(function (res) {
          if (res.error && res.error.length) {
            message.error(res.error[0].message)
          } else {
            if (this.props.next) {
              this.props.next(values);
            }
          }
        }.bind(this)).fail(function () {
          this.setState({
            loading: false
          })
        }.bind(this));
      }
    });
  },
  prev() {
    if (this.props.prev) {
      this.props.prev();
    }
  },
  stringify(val) {
    return val && String(val)
  },
  render() {
    let { loading, initialData } = this.state;
    const { getFieldDecorator } = this.props.form;
    return (
      <Spin spinning={loading}>
        <Form className="steps-form">
          <FormItem label="先进性" {...formItemLayout}>
            {getFieldDecorator('progressiveness', {
              rules: [{ required: true, message: '请选择技术的先进性!' }],
              initialValue: this.stringify(initialData.progressiveness)
            })(
              <Select placeholder="请选择技术的先进性">
                <Option value="1">填补了世界空白</Option>
                <Option value="2">填补了国内空白</Option>
                <Option value="3">国家级领先技术</Option>
                <Option value="4">省域级领先技术</Option>
                <Option value="5">市域级领先技术</Option>
                <Option value="6">先进性方面与类似技术相差不大</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="创新性" {...formItemLayout}>
            {getFieldDecorator('innovativeness', {
              rules: [{ required: true, message: '请选择技术的创新性!' }],
              initialValue: this.stringify(initialData.innovativeness)
            })(
              <Select placeholder="请选择技术的创新性">
                <Option value="1">具有突破性创新</Option>
                <Option value="2">非突破性创新，但功效有显著提升</Option>
                <Option value="3">非突破性创新，但功效有一定提升</Option>
                <Option value="4">有类似技术且功效差不多</Option>
                <Option value="5">功效差于现行类似技术</Option>
                <Option value="6">功效无法判定</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="成熟度" {...formItemLayout}>
            {getFieldDecorator('ripeness', {
              rules: [{ required: true, message: '请选择技术的成熟度!' }],
              initialValue: this.stringify(initialData.ripeness)
            })(
              <Select placeholder="请选择技术的成熟度">
                <Option value="1">技术成熟并已产业化多年</Option>
                <Option value="2">技术成熟，已产业化一年以下</Option>
                <Option value="3">技术成熟，已成功进行试生产，即将产业化</Option>
                <Option value="4">技术已研发完成，尚未投入生产</Option>
                <Option value="5">技术处于中试阶段</Option>
                <Option value="6">仅为概念或早期阶段、小试阶段</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="替代性" {...formItemLayout}>
            {getFieldDecorator('alternatives', {
              rules: [{ required: true, message: '请选择技术的替代性!' }],
              initialValue: this.stringify(initialData.alternatives)
            })(
              <Select placeholder="请选择技术的替代性">
                <Option value="1">具有不可替代性</Option>
                <Option value="2">与其他类似技术相比具有优势，较难被替代</Option>
                <Option value="3">有其他相同的替代技术</Option>
                <Option value="4">有其他更好的替代技术</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="技术防御力" {...formItemLayout}>
            {getFieldDecorator('defensive', {
              rules: [{ required: true, message: '请选择技术的防御力!' }],
              initialValue: this.stringify(initialData.defensive)
            })(
              <Select placeholder="请选择技术的防御力">
                <Option value="1">技术复杂程度高，所需资金量大</Option>
                <Option value="2">技术复杂程度较高，所需资金量较大</Option>
                <Option value="3">技术复杂程度较高，但所需资金量不大</Option>
                <Option value="4">技术复杂程度不高，所需资金量较大</Option>
                <Option value="5">技术复杂程度不高，所需资金量不大</Option>
                <Option value="6">技术简单，所需资金量小</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="技术领域发展前景" {...formItemLayout}>
            {getFieldDecorator('prospect', {
              rules: [{ required: true, message: '请选择技术领域发展前景!' }],
              initialValue: this.stringify(initialData.prospect)
            })(
              <Select placeholder="请选择技术领域发展前景">
                <Option value="1">技术产品所属领域发展前景好</Option>
                <Option value="2">技术产品所属领域发展前景较好</Option>
                <Option value="3">技术产品所属领域发展前景一般</Option>
                <Option value="4">技术产品所属领域发展前景较差</Option>
                <Option value="5">技术产品所属领域发展前景差</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="供求关系" {...formItemLayout}>
            {getFieldDecorator('supplyAndDemand', {
              rules: [{ required: true, message: '请选择技术的供求关系!' }],
              initialValue: this.stringify(initialData.supplyAndDemand)
            })(
              <Select placeholder="请选择技术的供求关系">
                <Option value="1">解决了行业的必需技术问题，为广大厂商所需要，具有一定垄断性</Option>
                <Option value="2">解决了行业的重要技术问题，供不应求</Option>
                <Option value="3">解决了行业一般技术问题，形成一定需求</Option>
                <Option value="4">解决了行业非重要技术问题，形成少量需求</Option>
                <Option value="5">解决了生产中某一附加技术问题或改进了某一技术环节，对于整体生产环节的改进有一定作用，形成一定潜在需求</Option>
                <Option value="6">解决了生产中某一附加技术问题或改进了某一技术环节，对于整体生产环节的改进并未产生作用</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="产品应用范围" {...formItemLayout}>
            {getFieldDecorator('rangeOfApplication', {
              rules: [{ required: true, message: '请选择技术的应用范围!' }],
              initialValue: this.stringify(initialData.rangeOfApplication)
            })(
              <Select placeholder="请选择技术的应用范围">
                <Option value="1">技术产品应用于全国</Option>
                <Option value="2">技术产品应用于省域或省级区域</Option>
                <Option value="3">技术产品应用范围较小</Option>
                <Option value="4">技术产品应用范围非常小</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="遭他人模仿可能性" {...formItemLayout}>
            {getFieldDecorator('imitable', {
              rules: [{ required: true, message: '请选择技术的模仿可能性!' }],
              initialValue: this.stringify(initialData.imitable)
            })(
              <Select placeholder="请选择技术的模仿可能性">
                <Option value="1">较低</Option>
                <Option value="2">中等</Option>
                <Option value="3">高</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="独立获利能力" {...formItemLayout}>
            {getFieldDecorator('profitability', {
              rules: [{ required: true, message: '请选择技术的独立获利能力!' }],
              initialValue: this.stringify(initialData.profitability)
            })(
              <Select placeholder="请选择技术的独立获利能力">
                <Option value="1">可以单独应用于产品，发挥技术作用</Option>
                <Option value="2">需要与其他相关技术或专利一起应用于产品，共同发挥作用，且占主要作用</Option>
                <Option value="3">需要与其他相关技术或专利一起应用于产品，共同发挥作用，只起次要作用</Option>
              </Select>
              )}
          </FormItem>
        </Form>
        <div className="steps-action">
          <Button type="primary" onClick={() => this.next()}>保存，下一步</Button>
          <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>上一步</Button>
        </div>
      </Spin>
    )
  },
}));

export default EvaluateStep3;