content: import React from 'react';
  import Modal from 'react-modal';
  import { Field, reduxForm } from 'redux-form';
  
  import ReactMarkdown from 'react-markdown';
  
  class Form extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        readme: false,
        invitation: false,
      };
    }
    readme() {
      this.setState({
        readme: true,
        invitation: false,
      });
    }
    invitation() {
      this.setState({
        readme: false,
        invitation: true,
      });
    }
    render() {
      const input = this.props.readme;
      const style = {
        overlay : {
          position          : 'fixed',
          top               : 0,
          left              : 0,
          right             : 0,
          bottom            : 60,
          backgroundColor   : 'rgba(255, 255, 255, 0.75)'
        },
        content : {
          position                   : 'absolute',
          top                        : '10px',
          left                       : '10px',
          right                      : '10px',
          bottom                     : '10px',
          border                     : '1px solid #ccc',
          background                 : '#fff',
          overflow                   : 'auto',
          WebkitOverflowScrolling    : 'touch',
          borderRadius               : '4px',
          outline                    : 'none',
          padding                    : '20px'
  
        }
      }
      return (
        <form className="new-form" onSubmit={this.props.handleSubmit}>
        <Modal
          isOpen={this.state.readme}
          style={style}
        >
          <div className="invitation-title">入会须知</div>
          <ReactMarkdown source={input} />
          <button type="submit" onClick={()=> this.setState({readme: false, invitation:false})} className="weui-btn weui-btn_primary" style={{width: '70%', marginTop: 30, marginBottom: 10}}>我已阅读</button>
        </Modal>
  
        <Modal
          isOpen={this.state.invitation}
          style={style}
        >
          <div className="content">
            <div className="invitation-title">《中国核电》杂志第三届理事会</div>
            <div className="invitation-title">邀 请 函 </div>
            <p> </p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;目前，核电发展一直受到中国政府的高度重视。在国家“一带一路”发展战略的推动下，中国核电迎来了快速发展的机遇期，核电必将成为中国能源结构化发展的重要保障。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;《中国核电》杂志（CN11-5660/TL）创刊于2008年1月，是国内唯一一本公开出版的核电类杂志。杂志由吴邦国同志题写刊名，中国核工业集团公司主管,中国原子能出版传媒有限公司主办。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;杂志社每期都赠阅刊物给国务院有关部门及相关直属机构等，并送国际原子能机构等国际相关机构，以及国内外相关核电站和相关核电设备制造商等。杂志宗旨是宣传我国核电建设的方针政策；研讨我国核电建设的规划和如何加快我国核电发展等相关重大问题；分析讨论核电站的安全性、可靠性、经济性；介绍与我国核电工程建设有关的法规、标准；交流核电工作管理和建设经验；宣传我国核电自主研发、设计建造和设备国产化的最新进展；报道国内外核电建设和运行的最新动态和信息；跟踪国内外先进核电技术；加强与国际相关组织机构的信息与技术交流；普及核电知识等。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;杂志由理事会、学术委员会、编辑委员会、杂志社等机构组成，作为理事会成员单位，可在杂志上优先发表论文，并可每期获赠一定数量的杂志；也可从本杂志获取相关咨询服务；成员单位在杂志上刊登广告可以享受一定的优惠；杂志作为我国核电行业宣传的平台，每年定期组织理事会成员单位的交流活动。为了把《中国核电》杂志办成国内外具有影响力的核心刊物，我们诚挚邀请我国从事核电产业的企事业单位、科研院所、大专院校共同关心和支持《中国核电》出版发行工作。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;目前，《中国核电》杂志理事会已有成员71家，其中理事长单位1家，副理事长单位8家，常务理事单位9家，理事会单位53家。谨此,特邀请贵单位加入《中国核电》杂志理事会。</p>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;联系人：王  丹  电  话：010－88828694  E-mail：zghd2008@sina.com</p>
            <div style={{textAlign: 'right'}}>《中国核电》杂志理事会</div>
  
            <button type="submit" onClick={()=> this.setState({readme: false, invitation:false})} className="weui-btn weui-btn_primary" style={{width: '70%', marginTop: 30, marginBottom: 10}}>我已阅读</button>
          </div>
        </Modal>
    <div className="weui-cells__title">申请入会</div>
    <div className="weui-cells weui-cells_form">
      <div className="weui-cell">
        <div className="weui-cell__hd">
          <label className="weui-label">单位名称</label>
        </div>
        <div className="weui-cell__bd">
          <Field name="unit" component="input" type="text"/>
        </div>
      </div>
  
      <div className="weui-cell">
        <div className="weui-cell__hd">
          <label className="weui-label">入会级别</label>
        </div>
        <div className="weui-cell__bd">
          <Field name="title" component="input" placeholder="副理事长 / 常务理事 / 理事" type="text"/>
        </div>
      </div>
  
      <div className="weui-cell">
        <div className="weui-cell__hd"><label className="weui-label">联系人</label></div>
        <div className="weui-cell__bd">
          <Field name="linkman" component="input" type="text"/>
        </div>
      </div>
      <div className="weui-cell">
        <div className="weui-cell__hd">
          <label className="weui-label">联系方式</label>
        </div>
        <div className="weui-cell__bd">
          <Field name="address" component="input" type="text"/>
        </div>
      </div>
    </div>
  
  
    <div onClick={this.readme.bind(this)} style={{textAlign: 'center', width: '100%', marginTop: 10}}>
      <div className="inline field">
        <div className="ui checkbox">
          <input type="checkbox" checked name="example"/>
          <label>入会须知</label>
        </div>
      </div>
    </div>
    <div onClick={this.invitation.bind(this)} style={{textAlign: 'center', width: '100%', marginTop: 10}}>
      <div className="inline field">
        <div className="ui checkbox">
          <input type="checkbox" checked name="example"/>
          <label> 邀 请 函&nbsp;&nbsp; </label>
        </div>
      </div>
    </div>
    <button type="submit" className="weui-btn weui-btn_primary" style={{width: '70%', marginTop: 10, marginBottom: 25}}>提交申请</button>
        </form>
        );
        }
        }
  
        export default reduxForm({ form: 'committeeNew' })(Form);
  