import React,{Component} from "React";
import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal} from "antd";
import {Link} from 'react-router-dom';
import TPMMDEditor from '../../../tpm/challengesnew/TPMMDEditor';
import { WordsBtn,getUrl } from 'educoder';
import axios from 'axios';
import Modals from '../../../modals/Modals';
import '../../css/Courses.css';
const { Option} = Select;
const CheckboxGroup = Checkbox.Group;
const confirm = Modal.confirm;
let GraduationTasksedittype=true;

class GraduationTasksedit extends Component{

  constructor(props){
    super(props)
    this.state={
      coursename:"",
      coursesearch:"",
      title_num:60,
      title_value:"",
      fileList: [],
      contents: [{val:"",id:1}],
      taskid:"",
      taskneme:"",
      tasktype:undefined,
      name:"",
      description:undefined,
    }
  }

  componentDidMount(){



    let tasksid=this.props.match.params.category_id;
    let url ="/graduation_tasks/"+tasksid+"/edit.json"
    axios.get(url).then((result)=>{
        // console.log(result)

        let newfilelist=[];
        if(result.data.attachments.length!=0){
          for(var list of result.data.attachments){
            newfilelist.push({
              uid:list.id,
              name:list.title,
              status: 'done',
              url:list.url,
            })
          }

        }

      this.setState({
          fileList:newfilelist,
          description:result.data.description,
          tasktype:result.data.task_type,
          name:result.data.task_name,
          data:result.data,
      })

      this.props.form.setFieldsValue({
        tasktype:result.data.task_type,
        name:result.data.task_name,
      });
    }).catch((error)=>{
      console.log(error)
    })



  }


  handleSubmit=(e)=>{

    let {fileList}=this.state;
    let listid=[]
    let graduation_id=this.state.data.graduation_id;
    for(var list of fileList){
    	if(list.response!=undefined){
				listid.push(list.response.id)
			}else{
				listid.push(list.uid)
			}

    }

    // console.log(listid)
    e.preventDefault();
    if(GraduationTasksedittype===true){
      this.props.form.validateFields((err, values) => {

        if (!err) {

          if(values.tasktype===undefined){
            this.scrollToAnchors("tasktypes");
            return
          }

          if(values.name===undefined){
            this.scrollToAnchors("nametypes");
            return
          }

          if(values.description===undefined){
            this.scrollToAnchors("descriptiontypes");
            return
          }else if(values.description.length>5000){
            this.scrollToAnchors("descriptiontypes");
            return
          }


          console.log('Received values of form: ', values);
          // console.log(fileList);
          let tasksid=this.props.match.params.category_id;

          let url="/graduation_tasks/"+tasksid+".json"
          axios.put(url, {
              task_type:parseInt(values.tasktype),
              name:values.name,
              description:values.description,
              attachment_ids:listid,
            }
          ).then((response) => {
            if(response.status===200) {
              // console.log(response)
              GraduationTasksedittype=false;
              // window.location.href="/courses/"+course_id+"/graduation/"+graduationId+"/graduation_tasks/"+category_id+"/questions";
              // this.goback()
              this.props.history.push("/courses/"+this.props.match.params.coursesId+"/graduation_tasks/"+graduation_id+"/"+this.props.match.params.category_id +"/setting");
            }
          }).catch((error) => {
            console.log(error)
          })

        }
      });
    }

  }

  goback=()=>{
    // let courseId=this.props.match.params.coursesId;
    // window.location.href="/courses/"+courseId+"/graduation_tasks/"+this.state.data.graduation_id;
		// goback = () => {
			window.history.go(-1)

  }


  // 输入title
  changeTitle=(e)=>{

    this.setState({
      title_num:60-parseInt(e.target.value.length),
      title_value:e.target.value
    })

  }
  // 附件相关 START
  handleChange = (info) => {
    let fileList = info.fileList;
    console.log(fileList)
    // for(var list of fileList ){
    //   console.log(fileList)
    // }
    this.setState({ fileList });
  }

  onAttachmentRemove = (file) => {
    // confirm({
    //   title: '确定要删除这个附件吗?',
    //   okText: '确定',
    //   cancelText: '取消',
    //   // content: 'Some descriptions',
    //   onOk: () => {
    //     this.deleteAttachment(file)
    //   },
    //   onCancel() {
    //     console.log('Cancel');
    //   },
    // });
    // return false;

    this.setState({
      Modalstype:true,
      Modalstopval:'确定要删除这个附件吗?',
      ModalSave: ()=>this.deleteAttachment(file),
      ModalCancel:this.cancelAttachment
    })
    return false;
  }

  cancelAttachment=()=>{
    this.setState({
      Modalstype:false,
      Loadtype:false,
      Modalstopval:'确定要删除这个附件吗?',
      ModalSave:"",
      ModalCancel:""
    })
  }

  deleteAttachment = (file) => {

    this.cancelAttachment();
    const url = `/attachments/${file.response ? file.response.id : file.uid}.json`
    axios.delete(url, {
    })
      .then((response) => {
        if (response.data) {

          if ( response.data.status === 0) {

            this.setState({
              Modalstype:false,
              Modalstopval:response.data.message,
              ModalSave:this.cancelAttachment,
              Loadtype:true,
            })

            this.setState((state) => {

              const index = state.fileList.indexOf(file);
              const newFileList = state.fileList.slice();
              newFileList.splice(index, 1);
              return {
                fileList: newFileList,
              };
            });
          }
        }
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  render(){
    const { getFieldDecorator } = this.props.form;
    let {title_num,pageType,name,description,Loadtype,
      Modalstype,Modalstopval,ModalCancel,ModalSave} =this.state;

    let {coursedata}=this.props;
    let courseId=this.props.match.params.coursesId;

    let category_id=this.props.match.params.category_id;
    const uploadProps = {
      width: 600,
      // https://github.com/ant-design/ant-design/issues/15505
      // showUploadList={false}，然后外部拿到 fileList 数组自行渲染列表。
      // showUploadList: false,
      action: `${getUrl()}/api/attachments.json`,
      onChange: this.handleChange,
      onRemove: this.onAttachmentRemove,
      beforeUpload: (file) => {
        console.log('beforeUpload', file.name);
        const isLt150M = file.size / 1024 / 1024 < 150;
        if (!isLt150M) {
          message.error('文件大小必须小于150MB!');
        }
        return isLt150M;
      },
    };



    return(
      <React.Fragment>

        <div>
          {/*提示*/}
          <Modals
            modalsType={Modalstype}
            modalsTopval={Modalstopval}
            modalCancel={ModalCancel}
            modalSave={ModalSave}
            loadtype={Loadtype}
          />
          <div className="newMain clearfix">
            <div className={"educontent mb20"}>

              <p className="clearfix mt10">
                <WordsBtn style="grey" className="fl">  <Link to={"/courses/"+courseId+"/students"} className="color-grey-6">{this.props.current_user&&this.props.current_user.course_name}</Link></WordsBtn>
                <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                <WordsBtn style="grey" className="fl"> <Link to={"/courses/"+courseId+"/graduation_tasks/"+category_id} className="color-grey-6">毕设任务</Link></WordsBtn>
                <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                {name===""?"":
                  <WordsBtn style="grey" className="fl">
                    <Link to={"/courses/"+courseId+"/graduation_tasks/"+category_id} className="color-grey-6">{name}</Link>
                    <span className="color-grey-9 ml3 mr3">&gt;</span>
                  </WordsBtn>
                }
                <span>{"编辑"}</span>
              </p>

              <div style={{ width:'100%',height:'75px'}} >
                <p className=" fl color-black mt25 summaryname">编辑毕设任务</p>
                <a className="color-grey-6 fr font-16 ml30 mt10 mr20" onClick={this.goback}>返回</a>
              </div>

              {description===undefined?"":<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={this.handleSubmit} >
                {/*内容*/}
                <div className="stud-class-set bor-bottom-greyE pt20 pl20 pr20 pb0 edu-back-white">

                  <Form.Item label="类型">
                    {getFieldDecorator('tasktype', {
                      rules: [{ required: true, message: "请选择任务类型" }],
                    })(<Select className={"greyInput"}
                               style={{width:'20%'}}
                               disabled={true}
                               placeholder="请选择任务类型">
                      <Option value={1}>普通</Option>
                      <Option value={2}>分组</Option>
                    </Select>)}
                    <input type="hidden"  id='tasktypes' />
                    <span className={"newcoursestitle"}>（选择确认后，无法修改）</span>
                  </Form.Item>

                  <Form.Item label="任务标题"  >
                    {getFieldDecorator('name', {
                      rules: [{ required: true, message: "请输入标题" }],
                    })(<Input placeholder="请输入任务名称，最大限制60个字符" value={name} onInput={this.changeTitle}  className="searchView searchViewAfter" style={{"width":"100%"}} maxLength="60" addonAfter={String(title_num)}/>)}
                  </Form.Item>
                  <input type="hidden"  id='nametypes' />
                </div>


                <div className="stud-class-set pt20 pl20 pr20 pb0 coursenavbox edu-back-white">
                  <style>{`
                .uploadBtn.ant-btn {
                  border: none;
                  color: #4CACFF;
                  box-shadow: none;
                  background: transparent;
                  padding: 0 6px;
                }
                .ant-upload-list-item:hover .ant-upload-list-item-info{
                  background-color:#fff;
                }
                .upload_1 .ant-upload-list {
                  width: 350px;
                }

              `}</style>
                  <Form.Item
                    label="内容"
										style={{marginBottom:'0px'}}
                  >
                    {getFieldDecorator('description', {
                      rules: [{
                        required: true, message: '请输入帖子内容',
                      }, {
                        max: 10000, message: '最大限制为10000个字符',
                      }],
                    })(
                    <TPMMDEditor ref={this.mdRef} placeholder={'请输入任务内容说明，最大限制5000个字符'} {...this.state} {...this.props}
                                                        mdID={'courseMessageMD'} initValue={description} className="courseMessageMD"></TPMMDEditor>
                    )}
                  </Form.Item>
                  <input type="hidden"  id='descriptiontypes' />
                  <Upload {...uploadProps} fileList={this.state.fileList} className="upload_1 ml5">
                    <Button className="uploadBtn">
                      <Icon type="upload" /> 上传附件
                    </Button>
                    (单个文件150M以内)
                  </Upload>


                  {/*{attachments&&attachments.map((item,key)=>{*/}

                    {/*return(*/}
                      {/*<div className="color-grey mt5"*/}
                           {/*key={key}*/}
                      {/*>*/}
                        {/*<a className="color-grey ml3">*/}
                          {/*<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>*/}
                        {/*</a>*/}
                        {/*<a*/}
                          {/*href={item.url}*/}
                          {/*className="mr12 color9B9B" length="58">*/}
                          {/*{item.title}*/}

                        {/*</a>*/}
                        {/*<span className="color656565 mt2 color-grey-6 font-12 mr8">*/}
                      {/*{item.filesize}*/}

                    {/*</span>*/}
                        {/*{item.delete===true?*/}
                          {/*<i className="font-14 iconfont  icon-guanbi "*/}
                             {/*id={item.id}*/}
                             {/*onClick={()=>this.onAttachmentRemove(item)}*/}
                             {/*aria-hidden="true">*/}
                          {/*</i>:""}*/}
                      {/*</div>*/}
                    {/*)*/}
                  {/*})}*/}


                </div>


                <Form.Item>
                  <div className="clearfix mt30 mb30">
                    <Button type="primary" htmlType="submit"  className="defalutSubmitbtn fl mr20">提交</Button>
                    <a onClick={this.goback} className="defalutCancelbtn fl">取消</a>
                  </div>
                </Form.Item>
              </Form>}

            </div>
          </div>
        </div>

      </React.Fragment>

    )
  }
}
const GraduationTaskseditApp = Form.create({ name: 'coursesNew' })(GraduationTasksedit);
export default GraduationTaskseditApp;