import React, { Component } from 'react';


import axios from 'axios';



import { Select } from 'antd';

import 'antd/lib/select/style/index.css'

import 'antd/lib/date-picker/style/index.css'

import zhCN from 'antd/lib/date-picker/locale/zh_CN';

import './MemoNew.css'
import './post.css'
import '../exchange.css'


import ImageUpload from './ImageUpload'

const Option = Select.Option;


const $ = window.$;
const isDevServer = window.location.port === "3007";
let origin = window.location.origin;
let path = "/editormd/lib/" // origin + '/react/build/js/editormd/lib/'
if (isDevServer) {
  origin = 'http://localhost:3000'
  path =  'http://localhost:3000/editormd/lib/'
}

//  load
if (!window.postUpMsg) {
   $.getScript(
      `${origin}/javascripts/attachments.js`,
      (data, textStatus, jqxhr) => {

    });
}

// editorMD to create
/**
 *
 * @param id  渲染DOM的id
 * @param width 宽度
 * @param high  高度
 * @param placeholder
 * @param imageUrl 上传图片的url
 * @returns {*} 返回一个editorMD实例
 */
function create_editorMD(id, width, high, placeholder, imageUrl, callback){
    var editorName = window.editormd(id, {
        width   : width,
        height  : high,
        syncScrolling : "single",
        //你的lib目录的路径，我这边用JSP做测试的
        path    : path ,   // "/editormd/lib/"
        tex              : true,
        tocm             : true,
        emoji            : true,
        taskList         : true,
        codeFold         : true,
        searchReplace    : true,
        htmlDecode       : "style,script,iframe",
        sequenceDiagram  : true,
        autoFocus: false,
            toolbarIcons : function() {
            // Or return editormd.toolbarModes[name]; // full, simple, mini
            // Using "||" set icons align right.
            return ["bold", "italic", "|", "list-ul", "list-ol", "|", "code", "code-block", "|", "testIcon", "testIcon1", '|', "image", "table", '|', "watch", "clear" ]
        },
        toolbarCustomIcons : {
            testIcon  : "<a type=\"inline\" class=\"latex\" ><div class='zbg'></div></a>",
            testIcon1 : "<a type=\"latex\" class=\"latex\" ><div class='zbg_latex'></div></a>"
        },
        //这个配置在simple.html中并没有，但是为了能够提交表单，使用这个配置可以让构造出来的HTML代码直接在第二个隐藏的textarea域中，方便post提交表单。
        saveHTMLToTextarea : true,
        // 用于增加自定义工具栏的功能，可以直接插入HTML标签，不使用默认的元素创建图标
        dialogMaskOpacity : 0.6,
        placeholder: placeholder,
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp", "JPG", "JPEG", "GIF", "PNG", "BMP", "WEBP"],
        imageUploadURL : imageUrl,//url
        onload: function(){
          // this.previewing();
            $("#"+ id +" [type=\"latex\"]").bind("click", function(){
                editorName.cm.replaceSelection("```latex");
                editorName.cm.replaceSelection("\n");
                editorName.cm.replaceSelection("\n");
                editorName.cm.replaceSelection("```");
                var __Cursor = editorName.cm.getDoc().getCursor();
                editorName.cm.setCursor(__Cursor.line-1, 0);
            });

            $("#"+ id +" [type=\"inline\"]").bind("click", function(){
                editorName.cm.replaceSelection("$$$$");
                var __Cursor = editorName.cm.getDoc().getCursor();
                editorName.cm.setCursor(__Cursor.line, __Cursor.ch-2);
                editorName.cm.focus();
            });
            $("[type=\"inline\"]").attr("title", "行内公式");
            $("[type=\"latex\"]").attr("title", "多行公式");

            callback && callback()
        }
    });
    return editorName;
}


class MemoNew extends Component {
    constructor(props) {
      super(props)

      this.state = {
        memoSubject: '',
        memoContent: '',
        memoType: undefined,
        memoTime: undefined,
        memoRepertoire: '',
        memoLanguage: [],
        fileList: [],
        memoSubjectLength:undefined,
        repertoires: [],
        currentSelectRepertoiresIndex: -1,
        repertoiresTagMap: {},
        // 主题板块
        smallOption:undefined,
        bigPlateId:undefined,
        smallPlateId:undefined,
      }
    }
    onCommit() {
      const { memoSubject , memoLanguage, currentMemoId, attachmentData , bigPlateId , smallPlateId} = this.state;
      const { showSnackbar } = this.props;

      this.setState({
        memoSubjectLength : memoSubject.length
      })

      if (!memoSubject) {
        showSnackbar('请先输入标题')
        return
      }
      let mdVal;
      try {
        mdVal = this.taskpass_editormd.getValue()

      } catch (e) {
        showSnackbar('编辑器还未加载完毕，请稍后')
        return
      }

      if (!mdVal) {
        showSnackbar('请输入话题内容')
        return
      }
      if (!bigPlateId) {
        showSnackbar('请选择一级板块');
        return
      }
      /*
        <meta content="authenticity_token" name="csrf-param" />
        <meta content="G7peAyb1T37RvdwxnVUKmTXuL8T7FaBze5mK0j6MCKs=" name="csrf-token" />

        http://localhost:3000/attachments/download/185790/Git-2.17.1.2-32-bit.exe
        https://www.educoder.net/attachments/205112.js?attachment_id=1
      */
      // collect attachments
      const $ = window.$;
      const attachmentsMap = {};
      let lastIndex = 0;
      $('#attachments_fields .attachment').each(( index, item ) => {
        const filename = $(item).find('.upload_filename').val();
        // $($('#attachments_fields .attachment')[0]).find('input:nth-child(6)').val()
        const token = $(item).find('input:nth-child(6)').val()
        const attachment_id = $(item).find('input:nth-child(7)').val()
        attachmentsMap[index] = {
          filename,
          token,
          attachment_id
        }
        lastIndex = index;
      })

      if (attachmentData) {
        const { response } = attachmentData
        lastIndex++;
        attachmentsMap[lastIndex] = {
          filename: attachmentData.name,
          token: '',
          attachment_id: response.attachment_id
        }
      }

      if (currentMemoId) {
        this.updateMemo(attachmentsMap)
      } else {
        this.newMemo(attachmentsMap)
      }
    }
    onCancel() {
      const { currentMemoId } = this.state;
      if (currentMemoId) {  // 编辑
        this.props.history.push(`/forums/${currentMemoId}`)
      } else {    // 新建
        this.props.history.push(`/forums`)
      }
    }
    onOkTime(value, dateString){
      this.setState({
        memoTime:dateString
      })
    }
    updateMemo(attachmentsMap) {
      const { memoSubject , currentMemoId, content, attachmentData , smallPlateId , bigPlateId} = this.state;

      const mdVal = this.taskpass_editormd.getValue()
      console.log('isContentEdit: ', mdVal === content);
      const newMemoUrl = `/memos/${currentMemoId}/update`
      const params = {
        content_changed: this.contentChanged,
        memo: {
          subject: memoSubject ,
          content: mdVal,
        },
        forum_id:bigPlateId,
        attachments: attachmentsMap,
        children_forum_id:smallPlateId
      }

      if (attachmentData) {
        const attachment_id = attachmentData.response.attachment_id
        if (attachment_id) {
          params.attachment_id = attachment_id;
        }
      }
      axios.post(newMemoUrl, params)
      .then((response) => {
        const { status, message } = response.data;
        if (status === 0) {
          window.$("html,body").animate({"scrollTop":0})
          this.props.history.push(`/forums/${currentMemoId}`)
        } else {
          if (message.indexOf("Couldn't find Attachment with") !== -1) {
            this.props.showSnackbar('附件不存在或正在被删除中，请稍后再试。。。')
          } else {
            this.props.showSnackbar(message)
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    }
    newMemo(attachmentsMap) {
      const { memoSubject , attachmentData , smallPlateId , bigPlateId } = this.state;
      const mdVal = this.taskpass_editormd.getValue()
      const newMemoUrl = `/memos/create`
      const params = {
        memo: {
          subject: memoSubject ,
          content: mdVal
        },
        forum_id:bigPlateId,
        attachments: attachmentsMap,
        children_forum_id:smallPlateId,
      }
      if (attachmentData) {
        const attachment_id = attachmentData.response.attachment_id
        if (attachment_id) {
          params.attachment_id = attachment_id;
          // params.filename = attachmentData.name  // 服务端处理  服务端使用默认的origin_filename
        }
      }
      axios.post(newMemoUrl, params).then((response) => {
        const { status, message, memo_id } = response.data;
        if (status === 0) {
          window.$("html,body").animate({"scrollTop":0})
          this.props.history.push(`/forums/${memo_id}`)
        } else {
          if (message.indexOf("Couldn't find Attachment with") !== -1) {
            this.props.showSnackbar('附件不存在或正在被删除中，请稍后再试。。。')
          } else {
            this.props.showNotification(message)
          }
        }
      }).catch((error) => {
        console.log(error)
      })
    }
    onMemoDelete(memo) {
      const deleteUrl = `/memos/${memo.id}`;
      // 获取memo list
        axios.delete(deleteUrl, {
            withCredentials: true,
        })
        .then((response) => {
          const status = response.data.status
          if (status === 0) {
            this.props.showSnackbar('删除成功');
            this.props.history.push(`/forums`)
          }
        }).catch((error) => {
          console.log(error)
        })
    }
    componentWillUnmount() {
        $('body>#root').off('onMemoDelete')
      }
    componentDidMount(){
      $('body>#root').on('onMemoDelete', (event) => {
        // const val = $('body>#root').data('onMemoDelete')
        const val = window.onMemoDelete ;
        this.onMemoDelete( JSON.parse(decodeURIComponent(val)) )
      })
      const newMemoUrl = `/memos/new`
      axios.get(newMemoUrl,{
          // withCredentials: true,
      })
      .then((response) => {
        const data = response.data;
        
        if ( data.current_user ) {
          this.setState({
            memo_tag: data.memo_type,
            memoTime:""
          })

          const user = response.data.current_user;
          user.tidding_count = response.data.tidding_count;
          // this.props.initCommonState(user)

          // 初始化 csrf meta
          const $ = window.$
          $('head').append( $('<meta content="authenticity_token" name="csrf-param" />') )
          $('head').append( $(`<meta content="${response.data.csrf_token}" name="csrf-token" />`) )
        }
      }).catch((error) => {
        console.log(error)
      })

      // 如果是编辑
      const { match } = this.props
      const memoId = match.params.memoId;
      if (memoId) {
        const memoUrl = `/memos/${match.params.memoId}/edit`;

        axios.get(memoUrl).then((response) => {
            const current_user = response.data.current_user;
            if (current_user) {

              const { content, forum_section, id, subject , attachments_url, memo_image_info,
                memo_type, published_at , children_forum_section} = response.data;
              let date;
              let date_value;
              this.initMD(content, memoId);
              if(published_at){
                date = new Date(published_at);
                date_value=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
              }
              const newState = {
                currentMemoId: id,
                attachments_url,
                memoSubject: subject,
                memo_tag: memo_type,
                memoLanguage: forum_section.forum_id,
                memoTime:date_value,
                content,
                bigPlateId: forum_section.forum_id,
                smallPlateId: children_forum_section.children_forum_id
              }
              // 编辑，初始化小板块的下拉选项（如果大板块有值）
              this.getChildPlate(memo_type,forum_section && forum_section.forum_id);

              if (memo_image_info && memo_image_info.id) {
                newState.fileList = [{
                  uid: memo_image_info.id,
                  name: memo_image_info.filename,
                  status: 'done',
                  url: memo_image_info.url,
                }]

                newState.attachmentData = {   // 初始化
                  name: memo_image_info.filename,
                  response: {
                    attachment_id: memo_image_info.id,
                  }
                }
              }
              this.setState({...newState})


              // 加载完后滚动条滚动
              window.$("html,body").animate({"scrollTop":0})

              // this.props.initForumState({
              //   current_user,
              //   tag_list
              // })
            }

          }).catch((error) => {
            console.log(error)
          })
      } else {
        this.initMD();
      }
    }
    initMD(initValue, memoId) {
      this.contentChanged = false;
      const placeholder = "";
      // amp;
      // 编辑时要传memoId
      const imageUrl = `/upload_with_markdown?container_id=${memoId?memoId:''}&container_type=Memo`;
      // 创建editorMd

      setTimeout(()=>{
        const taskpass_editormd = create_editorMD("memoMD", '100%', 400, placeholder, imageUrl, () => {
          setTimeout(()=>{
            taskpass_editormd.resize()
            taskpass_editormd.cm && taskpass_editormd.cm.refresh()
          }, 500)
          
          if (initValue) {
            taskpass_editormd.setValue(initValue)
          }
          taskpass_editormd.cm.on("change", (_cm, changeObj) =>{
            console.log('....contentChanged')
            this.contentChanged = true;
          })
        });
        this.taskpass_editormd = taskpass_editormd;
        window.taskpass_editormd = taskpass_editormd;
      }, 300)


    }

    renderOptions(array) {
      const elementArray = [];
      array.forEach(( item, index ) => {
        elementArray.push(
            <Option key={index} value={item}>{item}</Option>
          )
      })
      return elementArray
    }
    onRepertoiresChange(value) {

      const index = this.state.repertoires.indexOf(value)

      this.setState({
        currentSelectRepertoiresIndex: index,
        memoRepertoire: value,
        memoLanguage: []
      });
    };
    onTagChange(value) {
      if (value && value.length > 3) {
        this.props.showSnackbar(`最多选择3个技术标签`)

        return;
      }
      this.setState({
        memoLanguage: value
      })
    }
    onTypeChange(value) {

      this.setState({
        memoType: value
      })
    }
    onMemoNameChange(e) {
      this.setState({
        memoSubject: e.target.value
      })
    }
    renderMemoType() {
      const { memo_type } = this.state;
      if (!memo_type || memo_type.length === 0) {
        return ''
      }
      const result = []
      // memo_type.map((item, index) => <Option value={item.id} key={index} >{item.name}</Option> )
      memo_type.forEach((item, index) => {
        result.push(<Option value={item.id} key={index} >{item.name}</Option>)
      })

      return result;
    }
    renderTag() {
      let { memo_tag } = this.state;
      if (!memo_tag || memo_tag.length === 0) {
        return ''
      }
      const result = []

      memo_tag.forEach((item, index) => {
        result.push(<Option value={item.id+''} key={index} >{item.name}</Option>)
      })

      return result;

    }
    renderAttachment() {
      const { attachments_url } = this.state;
      const attachments = []
      attachments_url.forEach((item, index) => {
        const ar = item.url.split('/')

        attachments.push(
            <React.Fragment>
              <span id={`attachments_10${index}`} className="attachment">
                <i className="fa fa-folder mr5 color-light-grey newLeftgrey" aria-hidden="true"></i>
                <input type="text" className="upload_filename readonly hidden" name="attachments[2][filename]" readonly="readonly"
                   style={{border:'none', width:'220px',whiteSpace: 'nowrap', textOverflow:'ellipsis',fontFamily: 'Consolas'}}
                   size="8" value={item.filename}></input>
                <a href={`/attachments/${item.id}.js?attachment_id=10${index}`} className="remove-upload"
                  style={{verticalAlign: 'top', display: 'inlineBlock'}} data-remote="true"
                  data-method="delete">
                  <i className="fa fa-trash-o mr5"></i>
                </a>
                <div className="div_attachments" name="div_attachments_xx"></div>
                  <input type="hidden" name="attachments[xx][token]" value="185811.24305bb2c4912f715629aa3615cdbabc"></input>
                <input type="hidden" name="attachments[xx][attachment_id]" value={item.id}></input>
              </span>
              <div className="cl"></div>
            </React.Fragment>
          )
      })
      return attachments;
    }
    _findById(id, arg_items) {
      if (!arg_items) {
        return undefined
      }
      const items = arg_items;
      for(let i = 0; i < items.length; i++) {
        if (id === items[i].id) {
          return i;
        }
      }
    }
    // 是否是技术动态吧
    _isTechShare() {
      const { memoType, memo_type } = this.state
      const index = this._findById(memoType, memo_type)
      return !!index && memo_type[index] && memo_type[index].name.indexOf('技术问答') !== -1
    }
    onImageUploadDone = (data) => {
      this.setState({
        attachmentData: data
      })
    }
    onImageUploadRemove = () => {
      const { attachment_id } = this.state.attachmentData.response;
      const deleteUrl = `/attachments/${attachment_id}.js?attachment_id=1`;
      // 获取memo list
      axios.delete(deleteUrl, {
          withCredentials: true,
      })
      .then((response) => {
        const data = response.data
        if (data) {
          this.setState({
            attachmentData: undefined
          })
          this.props.showSnackbar('删除成功');
        }
      }).catch((error) => {
        console.log(error)
      })
    }

    // 切换大板块
  changeLargeOption=(value)=>{
    const { memo_tag } = this.state;
    this.getChildPlate(memo_tag,value);
  }

  getChildPlate =(memo_tag,value)=>{
    let listFilter = memo_tag && memo_tag.length > 0 && memo_tag.filter((item=> item.id === value))[0]; 
    let list = listFilter && listFilter.children_tags;
    this.setState({
      smallOption:list && list.map(item=>{
        return(
          <Option value={item.id}>{item.title}</Option>
        )
      }),
      bigPlateId:value,
      smallPlateId: list && list.length > 0 ? (list[0].id || undefined) : undefined
    })
  }

  // 切换二级板块
  changeSmallOption=(value)=>{
    this.setState({
      smallPlateId:value
    })
  }

  	render() {
  		const { match } = this.props
      const { 
        memoSubject ,
        attachments_url, 
        currentMemoId, 
        fileList, 
        memoSubjectLength ,
        memo_tag,
        smallOption,
        bigPlateId,
        smallPlateId
      } = this.state;
      const memoId = match.params.memoId;
      console.log("bigPlateId",bigPlateId);
	    return (
    		<div className="educontent-min postNewform">
          <p className="font-22 color-grey3 mt30 mb10">{ memoId ? '编辑' : '新建'}</p>
          
	        <div className="edu-back-white mb10 clearfix" id="memoSubject" style={{position:'relative'}}>
            <div className="padding30">
              <div className="df">
                <span className="mr20 new_label"><span className="color-orange">*</span>标题：</span>
                <div className="flex1">
                  <input type="text" className="input-100-45" maxlength="50"
                      value={memoSubject} onChange={(val)=>this.onMemoNameChange(val)}  placeholder="请输入发布标题，最大限制50字符">
                  </input>
                </div>
                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl" style={memoSubjectLength==0?{display:'block'}:{display:'none'}}>
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div>
              

              {/* 发布时间 */}
              {/* <div className="df ecSelectbox">
                <span className="mr30 color-orange pt10"></span>
                <div className="flex1 mr20">
                <DatePicker
                        disabledDate={disabledDate}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                        placeholder="请选择发布时间"
                        locale={zhCN}
                        placeholder={"请选择时间"}
                        onChange={(value, dateString)=>this.onOkTime(value, dateString)}
                      />
                </div>
                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl none" >
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div> */}

              {/* <p className="color-grey-6 font-16 mb30">内容</p> */}
              <div className="df mt20">
                <span className="mr20 new_label"><span className="color-orange">*</span>内容：</span>
                <div className="flex1">
                  <div className="break_word new_li" id="memoMD">
                    <textarea style={{'display':'none'}}></textarea>
                  </div>
                </div>
                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl none" >
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div>

              <form className="newForm" style={{marginLeft:"70px"}}>
                <span id={`attachments_fields`} className="attachments_fields newforgeattachment" xmlns="http://www.w3.org/1999/html">
                  { attachments_url && !!attachments_url.length &&
                    this.renderAttachment()
                  }
                </span>
                <span className="add_attachment">
                  <input className="file_selector" data-are-you-sure="您确定要删除吗？"
                    data-delete-all-files="您确定要删除所有文件吗" data-description-placeholder="可选的描述"
                    data-field-is-public="公开" data-file-count="个文件已上传"
                    data-lebel-file-uploding="个文件正在上传" data-max-concurrent-uploads="2"
                    data-max-file-size-message="该文件无法上传。超过文件大小限制 (50 MB)，建议上传到百度云等其他共享工具里，然后在txt文档里给出链接以及共享密码并上传"
                    data-max-file-size="52428800" data-upload-path="/uploads.js" id="_file"
                    multiple="multiple" name="attachments[dummy][file]"
                    onChange={()=>{debugger;window.addInputFiles( window.$('.file_selector')[0] ) }}
                    style={{'display':'none'}} type="file">
                  </input>
                </span>
              </form>

            {/* 请求status 422 X-CSRF-Token: eVo38laEF880o3cwZ/0F9kH01q4jMkriuVRemIBq06Y= */}

              <div className="df uploadBtn uploadBtnclick mb20" >
                <a className="fl" onClick={()=>window.$('#_file').click()}>
                  <span style={{color: '#21B351', fontSize: "14px", marginLeft: "62px"}}>上传附件</span>
                  <span style={{color: '#CDCDCD', fontSize: "14px"}}>(单个文件50M以内)</span>
                </a>
              </div>
          {/* 选择了技术问答才显示树标签 */}
          {/* this._isTechShare() &&
          <div className="edu-back-white mb10 clearfix">
            <div className="padding30-20">
              <p className="color-grey-6 font-16 mb30">技术标签</p>
              <div className="df">
                <span className="mr30 color-orange pt10">*</span>

                <div className="flex1 mr20">
                  <Select
                    className="ecSelect"
                    value={memoLanguage}
                    placeholder="请选择技术标签"
                    onChange={(e) => this.onTagChange(e)}
                    dropdownStyle={{'maxHeight': '500px', 'overflow': 'auto'}}
                    mode="multiple"
                    tokenSeparators={[';']} >
                    {this.renderTag()}
                  </Select>
                </div>

                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl none" >
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div>
            </div>
          </div> */}
              <div className="df ecSelectbox mb20">
                <span className="mr20 new_label"><span className="color-orange">*</span>主题板块：</span>
                <div className="flex1">
                  {/* <Select className="ecSelect"
                    value={memoType}
                    placeholder="请选择技术标签"
                    onChange={(val)=>this.onTypeChange(val)}>
                    { this.renderMemoType()}
                  </Select> */}
                  {/* <Select
                    mode="multiple"
                    className="ecSelect"
                    value={memoLanguage}
                    placeholder="请选择技术标签"
                    onChange={(e) => this.onTagChange(e)}
                    dropdownStyle={{'maxHeight': '500px', 'overflow': 'auto'}}
                     >
                    {this.renderTag()}
                  </Select> */}
                  <Select className="selectItem" value={bigPlateId} onChange={this.changeLargeOption}>
                    { 
                    
                      memo_tag && memo_tag.length > 0 && memo_tag.map((item,key)=>{
                        return(
                          <Option value={item.id} key={key}>{item.name}</Option>
                        )
                      })
                    }
                  </Select>
                  <Select className="selectItem" value={smallPlateId} onChange={this.changeSmallOption}>
                    { smallOption }
                  </Select>
                </div>
                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl none" >
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div>

          {/* */}
            <div className="df">
              <span className="mr20 new_label">上传封面：</span>
                <div className="flex1 mr20">
                  <ImageUpload
                    fileList={fileList}
                    currentMemoId={currentMemoId}
                    onImageUploadRemove={this.onImageUploadRemove}
                    onImageUploadDone={this.onImageUploadDone}
                    ></ImageUpload>
                </div>
                <div style={{width: '57px'}}>
                  <span className="color-orange mt8 fl none" >
                    <i className="fa fa-exclamation-circle mr3"></i>必填项
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div className="clearfix mt30 mb50 edu-txt-center">
            <span className="inline">
              <a onClick={()=>{ this.onCancel() }} className="defalutCancelbtn mr20 fl newdefalutCancelbtn">返回</a>
              <a className="defalutSubmitbtn fl newdefalutSubmitbtn" onClick={()=>{this.onCommit()}}>提交</a>
            </span>
          </div>
	      </div>
	    );
  	}
}

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

export default MemoNew;
