import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder';
import { TPMIndexHOC } from '../../tpm/TPMIndexHOC';
import "../css/Courses.css";
import CoursesMarkdown from "../coursesPublic/CoursesMarkdown";
import TPMMDEditor from '../../tpm/challengesnew/TPMMDEditor';
import {
    Form, Icon, Input, Button, Checkbox,message,
} from "antd";
import {WordsBtn} from 'educoder';
//引入对应跳转的组件
import axios from 'axios';
//提交总结
class CommitSummary extends Component{
    constructor(props) {
      super(props)
      this.state = {
        contents: [{val:"",id:1}],
          course_id:0,
          course_name:"",
          category:[],
          homework_id:0,
          user_name:"",
          work_id:0,
          description:"",
          data:undefined,
          cancels:false,
      }

    }
    componentDidMount() {

     this.Getsubmissionsummaryinterface();
      let query = this.props.location.pathname;
      const type = query.split('/');
      this.setState({
        shixuntypes:type[3]
      })
    }


    //获取提交总结接口
    Getsubmissionsummaryinterface=()=>{
        var  worksid=this.props.match.params.id;
        // console.log("Getsubmissionsummaryinterface");
        // console.log(this.props.match.params);
        // console.log(worksid);
        var  url = `/student_works/${worksid}/commit_des.json`;
        axios.get(url).then((result) => {
            // console.log(result);
            if (result.status === 200) {
                // console.log(url)
                // console.log("提交总结接口")
                // console.log(JSON.stringify(result))
                this.setState({
                    data:result.data,
                    description: result.data.description,
                    cancels:true,
                })
            }else {
                this.props.showNotification(result.data.message);

            }
        }).catch((error) => {
            console.log(error)
        })
    }

   submitCommitSummary=()=> {
     const mdContnet = this.refs[`md${1}`].getValue().trim();
     console.log(mdContnet)
  }
  gotohome=()=>{
    // let courseId=this.props.match.params.coursesId;
    // if(courseId===undefined){
    //   this.props.history.push("/courses");
    // }else{
    //   this.props.history.push(this.props.current_user.first_category_url);
    // }
	  this.props.history.goBack()
	}
  asdasdsad=()=>{
      this.setState({
        contents:""
      })
  }

    handleSubmit=(e) => {
             e.preventDefault();
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    console.log(values.description);
                    if(values.description === undefined|| values.description === "" || values.description ===null){
                        this.props.showNotification(`请输入提交内容`);
                        return

                    }
                    var  worksid=this.props.match.params.id;

                    var  url = `/student_works/${worksid}/update_des.json`;
                            axios.post(url,{
                                description:values.description,
                            }).then((result) => {
                                if (result.status === 200) {
                                    // console.log(url)
                                    // console.log("提交总结接口")
                                    // console.log(JSON.stringify(result))
                                    // message.success(result.data.message);
                                    this.props.history.push(`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${this.props.match.params.homeworkid}/openlist?tab=0`);
                                }
                            }).catch((error) => {
                                console.log(error)
                            })
                }

            });
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        let {contents,data}=this.state;
        // console.log(this.props);
        return (
            <div>
                <div className="newMain clearfix">
                    {/*<Form onSubmit={this.handleSubmit}>*/}
                    <div className={"educontent mb20"}>
                        <div style={{
                          width:'100%',
                          height:'20px'
                        }} >
                            <div className="educontent mb30">
                                <p className="clearfix mb20 mt10 ">
                                  <a className="btn colorgrey fl hovercolorblue " onClick={()=>this.gotohome()}>{data === undefined ? "" :data.course_name===undefined?"": data.course_name}</a>
                                    <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                                    {/* style="grey" */}
                                    <a 
                                              className="btn colorgrey fl hovercolorblue ">{data === undefined ? "" :data.category===undefined?"":data.category.category_name}</a>
                                    <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                                    <a className="fl">作业详情</a>
                                </p>
                            </div>

                        </div>
                        <div>
                            <p className=" fl color-black mt10 summaryname" onClick={this.asdasdsad}>{this.state.description ? '修改总结' : '提交总结'}</p>
                                <a onClick={()=>this.gotohome()} className="color-grey-6 fr font-16 ml30 mt10">返回</a>
                        </div>
                        {/*educontentbox*/}
                      <div className="stud-class-set pt40 pb40">

                              <div className={"mt10"}>
                                  <div style={{ "background": "#fff", "padding": "15px"}}>
                                     <span className="commitcontentsysl">
                            <span className="color-red">*</span>
                            内容</span>
                                  </div>
                                  <div className="new-wrap">
                                      <Form layout='vertical' onSubmit={this.handleSubmit} >
                                          <Form.Item
                                          >
                                              <div style={{ "background": "#fff","padding-bottom":"20px","padding-left":"20px","padding-right":"20px"}}
                                                   className="mdInForm">
                                                  {getFieldDecorator('description', {
                                                      rules: [{
                                                          required: true, message: '请在此输入总结内容,最多5000个字符',
                                                      }, {
                                                          max: 5000, message: '最大限制为5000个字符',
                                                      }],
                                                  })(
                                                      <TPMMDEditor ref={this.mdRef} placeholder={'请在此输入总结内容，最多5000个字符'}
                                                                   mdID={'courseMessageMD'} initValue={this.state.description} className="courseMessageMD"></TPMMDEditor>
                                                  )}
                                              </div>
                                          </Form.Item>

                                          <Form.Item>
                                              <div className="clearfix mt40 mb30">
                                                  <Button type="primary" htmlType="submit" className="defalutSubmitbtn fl mr20" >
                                                      提交
                                                  </Button>
                                                <a className="defalutCancelbtn fl" href={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${this.props.match.params.homeworkid}/openlist?tab=0`}>取消</a>
                                              </div>
                                          </Form.Item>
                                      </Form>
                                  </div>
                              </div>



                      </div>

                    </div>
                {/*</Form>*/}
                </div>
            </div>
        )
    }
}
const GraduationTasksnewApp = Form.create({ name: 'coursesNew' })(CommitSummary);
export default GraduationTasksnewApp;