import React, { Component } from 'react';

import { Modal , Form , Input } from 'antd';
import '../exchange.css';
import axios from 'axios';

class PreCreate extends Component {

  componentDidUpdate=(preState)=>{
    const { subId , subName } = this.props;
    if(preState.subId !== subId){
      if(subId){
        this.props.form.setFieldsValue({
          title:subName
        })
      }
    }
  }

  // 确定
  modalSave=()=>{
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        // subId存在就是编辑否则就是新增
        const { refresh , subId  } = this.props;
        const { plateId } = this.props.match.params;
        const url = `/forum_sections${subId ? "/rename":""}.json`;
        axios.post(url,{
          title:values.title,
          children_section_id:subId,
          id: plateId
        }).then((result)=>{
          if(result){
            refresh();
            this.props.showNotification(result.data.message);
          }
        }).catch((error)=>{

        })
      }
    })
  }
  modalCancel=()=>{
    this.props.close();
  }

  render(){
    const { getFieldDecorator } = this.props.form;

    const { title , visible } = this.props
    return(
      <Modal
        keyboard={false}
        title={title}
        visible={ visible }
        closable={false}
        footer={null}
        destroyOnClose={true}
        centered={true}
        width="530px"
        >
        <div className="task-popup-content">
          <Form className="formInline">
            <Form.Item
              label="标题"
            > 
              {getFieldDecorator('title', {
                rules: [{
                  required: true, message: '请输入板块名称',
                },{
                  max: 5000 , message:'最大限制20个字符'
                }],
              })(
                <Input placeholder="请输入名称，最大限制20个字符" maxLength="60" style={{height:"40px"}}/>
              )}
            </Form.Item>
            <div className="clearfix mt30 edu-txt-center">
              <a  className="task-btn mr30" onClick={this.modalCancel}>取消</a>
              <a className="task-btn task-btn-orange" onClick={this.modalSave}>确定</a>
            </div>
          </Form>
        </div>
      </Modal>
    )
  }
}
const WrappedPreCreate = Form.create({ name: 'PreCreate' })(PreCreate);
export default WrappedPreCreate;