import React, { Component } from 'react';
import MDEditor from '../../common/MDEditor';
import { Form , Button } from "antd";
import ItemImg from './CommentsItemImg'

import '../exchange.css'
import axios from 'axios';


class CommentsSend extends Component{
  constructor(props){
    super(props);
    this.contentMdRef = React.createRef();

  }

  // 发送评论
  handleSubmit=()=>{
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(!err){
        let { id , refresh } = this.props;
        const url = `/memos/${id}/reply`;
        axios.post(url,{
          content:values.replyContent,
          parent_id:id
        }).then(result=>{
          if(result){
            this.contentMdRef.current.setValue(' ');
            refresh();
          }
        }).catch(error=>{

        })
      }
    })
  }

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

    // 唯一键
    const { unique , image_url } = this.props;

    const imgWrap = (
      image_url && <ItemImg image_url={image_url} ></ItemImg>
    )
    return(
      <div className="df mt15">
        { imgWrap }
        <div className="flex1">
          <Form.Item label="" className="editorFromItem"> 
            {getFieldDecorator('replyContent', {
              rules: [{
                required: true, message: '请输入评论内容',
              },{
                max: 5000 , message:'最大限制5000个字符'
              }],
            })(
            <MDEditor ref={this.contentMdRef} placeholder="请输入评论内容，最大限制5000字符" mdID={`replyContent${unique}`} refreshTimeout={1500} 
              className="CommentSendMD" height={150} watch={false} noStorage={true}></MDEditor>
            )}
          </Form.Item>
          <p className="clearfix pb10 pt10">
            <Button type="primary" onClick={this.handleSubmit} className="small-default-btn small-blue-btn fr">发送</Button>    
          </p>
        </div>
      </div>
    )
  }
}
const WrappedCommentsSendForm = Form.create({ name: 'CommentsSend' })(CommentsSend);
export default WrappedCommentsSendForm;
