import React from 'react';
import { Spin, Form, Button, Select, message } from 'antd';
import './step2.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: 6 },
  wrapperCol: { span: 10 }
};

const EvaluateStep2 = 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/step2',
          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('accessMethod', {
              rules: [{ required: true, message: '请选择技术取得的方式!' }],
              initialValue: this.stringify(initialData.accessMethod)
            })(
              <Select placeholder="请选择技术取得的方式">
                <Option value="1">自主研发</Option>
                <Option value="2">外购取得</Option>
                <Option value="3">许可取得</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="法律状态" {...formItemLayout}>
            {getFieldDecorator('legalStatus', {
              rules: [{ required: true, message: '请选择法律保护状态!' }],
              initialValue: this.stringify(initialData.legalStatus)
            })(
              <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('patentMaintenance', {
              rules: [{ required: true, message: '请选择专利维护状态!' }],
              initialValue: this.stringify(initialData.patentMaintenance)
            })(
              <Select placeholder="请选择专利维护状态">
                <Option value="1">专利按时缴纳年费</Option>
                <Option value="2">专利已过期或未按时缴纳年费</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="保密性" {...formItemLayout}>
            {getFieldDecorator('confidentiality', {
              rules: [{ required: true, message: '请选择保密性!' }],
              initialValue: this.stringify(initialData.confidentiality)
            })(
              <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('decidability', {
              rules: [{ required: true, message: '请选择他人侵权的易判定性!' }],
              initialValue: this.stringify(initialData.decidability)
            })(
              <Select placeholder="请选择他人侵权的易判定性">
                <Option value="1">易发现且易判定</Option>
                <Option value="2">易发现但不易判定</Option>
                <Option value="3">难以发现他人是否侵权</Option>
                <Option value="4">非专利技术，无法判定他人侵权</Option>
              </Select>
              )}
          </FormItem>
          <FormItem label="是否涉及质押、担保、诉讼等权利限制" {...formItemLayout}>
            {getFieldDecorator('hasRightLimitation', {
              rules: [{ required: true, message: '请选择是否涉及质押、担保、诉讼等权利限制!' }],
              initialValue: this.stringify(initialData.hasRightLimitation)
            })(
              <Select placeholder="请选择是否涉及质押、担保、诉讼等权利限制">
                <Option value="1">否</Option>
                <Option value="2">是</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 EvaluateStep2;