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

class GraduationTasksSubmitedit extends Component{

  constructor(props){
    super(props)
    this.state={
      coursename:"",
      coursesearch:"",
      title_num:20,
      title_value:"",
      fileList: [],
      contents: [{val:"",id:1}],
      type:true,
      workslist:undefined,
      search:"",
      memberslist:undefined,
      task_status:[],
      selectmemberslist:[],
      minvalue:"",
      setvalue:"",
      minmaxtype:false,
      selectobjct:undefined,
      Loadtype:false,
      description:undefined,
      attachments:undefined,
      spinnings:false
    }
  }

  componentDidMount(){


    let workId=this.props.match.params.work_Id;

    let url = "/graduation_works/"+workId+"/edit.json";
    axios.get(url).then((result)=>{

      if(result.status===200){
        console.log(result.data.description);

        this.setState({
          workslist:result.data,
          attachments:result.data.attachments,
          selectmemberslist:result.data.members,
          selectobjct:result.data.members,
          description:result.data.description,
        })
        if(result.data.task_type===1){

        }else{
          this.searchList("",1,10,result.data.task_id)
        }

        this.props.form.setFieldsValue({
          description:result.data.description,
        });

      }

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



  }

  setedit=()=>{
    let coursesId=this.props.match.params.coursesId;
    let workId=this.props.match.params.work_Id;
    let {workslist}=this.state
    let task_id=workslist&&workslist.task_id;
    // window.location.href="/courses/"+coursesId+"/graduation_tasks/"+task_id+"/"+workId+"/works/edit";
		window.location.href="/courses/"+coursesId+"/graduation_tasks/"+workId+"/appraise";
  }

  handleSubmit=(e) => {

    let {fileList,selectmemberslist,workslist}=this.state;

    let  userids=[];

    for(var list of selectmemberslist){

      if(list.user_id!=undefined&&list.user_id!=null){
        userids.push(list.user_id)
      }

    }

    let listid=[];

    for(var list of fileList){
      listid.push(list.response.id)
    }

    e.preventDefault();
    if( GraduationTasksnewtype===true){
      this.props.form.validateFields((err, values) => {
        if (!err) {
          console.log(values.description);
          // console.log(fileList);
          if(values.description===undefined||values.description===""){

            return
          }
          if(workslist.task_type===2){
            if(userids.length<2){
              this.setState({
                minvalue:2,
                setvalue:"小于",
                minmaxtype:true
              })

              return
            }else if(userids.length>5){
              this.setState({
                minvalue:5,
                setvalue:"大于",
                minmaxtype:true
              })
              return
            }

          }
          this.setState({
            spinnings:true
          })
          let workId=this.props.match.params.work_Id;

          let url="/graduation_works/"+workId+".json";
          axios.put(url, {
              description:values.description,
              attachment_ids:listid,
              user_ids:userids
            }
          ).then((response) => {
            this.setState({
              spinnings:false
            })
            if(response.status===200) {
              GraduationTasksnewtype=false;
              if(response.data.status===0){
                // this.setState({
                //   Modalstype:true,
                //   Modalstopval:response.data.message,
                //   ModalSave:this.setedit,
                //   Loadtype:true
                // })
                this.setedit()
              }else{
                GraduationTasksnewtype=true;
              }
            }
          }).catch((error) => {
            console.log(error)
          })

        }
      });
    }


    // setTimeout(function () {
    //   GraduationTasksnewtype=true
    // },10000)

  }

  handleSelectChange = (value) => {
    console.log(value);
    this.props.form.setFieldsValue({
      note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
    });
  }

  goback=()=>{
    let courseId=this.props.match.params.coursesId;
    let work_Id=this.props.match.params.work_Id;

    // window.location.href="/courses/"+courseId+"/graduation/graduation_tasks/"+category_id;
    window.location.href="/courses/"+courseId+"/graduation_tasks/"+work_Id+"/appraise";

  }


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

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

  }
  // 附件相关 START
  handleChange = (info) => {
    let fileList = info.fileList;

    // for(var list of fileList ){
    //   console.log(list)
    // }
    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,
      Modalstopval:'确定要删除这个附件吗?',
      ModalSave:"",
      ModalCancel:""
    })
  }

	onAttachmentRemove = (file) => {
    let {attachments,fileList}=this.state;
    const url = `/attachments/${file}.json`
    axios.delete(url, {
    })
      .then((response) => {
        if (response.data) {
          // const { status } = response.data;
          if (response.data.status === 0) {
            console.log('--- success')
              let newattachments=attachments;
              if(file.uid===undefined){
                for(var i=0; i<newattachments.length; i++){
                  if(newattachments[i].id===file.id){
                    newattachments.splice(i, 1);
                  }
                }

              }


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


            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);
      });
  }

  inputSearchValue=(e)=>{

    if(e.target.value===""){
      this.setState({
        search:null
      })
    }else{
      this.setState({
        search:e.target.value
      })
    }

  }


  searchValue=()=>{

    let {search,workslist} = this.state;

    this.searchList(search,1,10,workslist.task_id)

  }

  searchList=(search,page,limit,id)=>{
    this.setState({
      search:search,
      page:page,
      limit:10
    })
    let newid=id
   if(newid===undefined){
     newid=this.props.match.params.work_Id;
   }

    let url="/graduation_tasks/"+newid+"/graduation_works/search_member_list.json";
    axios.post(url,{
      search:search,
      page:page,
      limit:limit
    }).then((result)=>{

      if(result.status===200){
        this.setState({
          memberslist:result.data
        })
      }

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


  contentViewScroll=(e)=>{
    //滑动到底判断
    if(e.currentTarget.scrollHeight-e.currentTarget.scrollTop===e.currentTarget.clientHeight){
      // console.log("到达底部");

      let{ search,page,limit,workslist}=this.state;

      let newpage=page+2

      this.searchList(search,newpage,limit,workslist.task_id)

    }

  }


  funtaskstatus=(checkedValues)=>{
    let{memberslist,selectobjct}=this.state;
    let newlist =memberslist.members;
    let newcheckedValues=checkedValues;
    let selects=[];

    for(var list of selectobjct){
      selects.push(list)
    }
    for(var i=0; i<newlist.length; i++){
      for(var z=0; z<newcheckedValues.length; z++){
        if(newlist[i].user_id===newcheckedValues[z]){
          selects.push(newlist[i])
        }
      }

    }
    this.setState({
      task_status:checkedValues,
      selectmemberslist:selects
    })



  }

  delecttask_status=(id)=>{
    let{selectmemberslist,task_status}=this.state;
    let newlist=task_status;
    let selects=selectmemberslist;

    for(var i=0; i<newlist.length; i++){
      if(newlist[i]===id){
        newlist.splice(i,1)
      }
    }

    for(var z=0; z<selects.length; z++){
      if(selects[z].user_id===id){
        selects.splice(z,1)
      }
    }
    this.setState({
      task_status:newlist,
      selectmemberslist:selects
    })
  }

  gocannel=()=>{
    window.history.go(-1)
  }

  render(){
    const { getFieldDecorator } = this.props.form;
    let {search,fileList, workslist,setvalue,minvalue,minmaxtype,Loadtype,description,attachments,
      Modalstype,Modalstopval,ModalCancel,ModalSave,memberslist,task_status,selectmemberslist} =this.state;

    let courseId=this.props.match.params.coursesId;
    let category_id=this.props.match.params.category_id;
    const uploadProps = {
      width: 600,
      fileList,
      multiple: true,
      // 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;
      },
    };

    // console.log(workslist&&workslist)

    //  console.log(selectmemberslist&&selectmemberslist)

    let graduation_id=workslist===undefined?"":workslist.graduation_id;
    let task_id=workslist===undefined?"":workslist.task_id;
    return(
      <React.Fragment>

        <div>
          <Spin size="large" spinning={this.state.spinnings}>
          {/*提示*/}
          <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+"/graduation"} className="color-grey-6">{workslist&&workslist.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/"+graduation_id}  className="color-grey-6">毕设任务</Link></WordsBtn>
                <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                <WordsBtn style="grey" className="fl"> <Link to={"/courses/"+courseId+"/graduation_tasks/"+graduation_id+"/"+task_id+"/list"} className="color-grey-6">任务详情</Link></WordsBtn>
                <span className="color-grey-9 fl ml3 mr3">&gt;</span>
                {/*<WordsBtn style="grey" className="fl">*/}
                {/*<Link to={"/courses/"+courseId+"/graduation/graduation_tasks/"+category_id} className="color-grey-6">{workslist&&workslist.task_name}</Link>*/}
                {/*<span className="color-grey-9 ml3 mr3">&gt;</span>*/}
                {/*</WordsBtn>*/}
                <span>{this.props.user&&this.props.user.username} 提交作品</span>
              </p>

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

              {description&&description?<Form labelCol={{ span: 5 }} wrapperCol={{ span: 12 }} onSubmit={GraduationTasksnewtype===true?this.handleSubmit:""} >
                <div className="stud-class-set pd20 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;
                }
                .ant-form-item{
                  margin-bottom: 0px;
                }
              `}</style>
                  <Form.Item
                    label="内容"

                  >
                    {getFieldDecorator('description', {
                      rules: [{
                        required: true, message: '请在此输入作品内容或附件的简要描述',
                      }, {
                        max: 5000, message: '最大限制为5000个字符',
                      }],
                    })(
                      <TPMMDEditor ref={this.mdRef} placeholder={'请在此输入作品内容或附件的简要描述，最大限制5000个字符'} maxLent={"5000"}
                                   mdID={'courseMessageMD'} initValue={description} className="courseMessageMD"></TPMMDEditor>
                    )}
                  </Form.Item>
                  <Upload {...uploadProps} className="upload_1">
                    <Button className="uploadBtn">
                      <Icon type="upload" /> 上传附件
                    </Button>
                    <span className={"color-grey-9"}>(单个文件150M以内)</span>
                  </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>
                        )
                      })}

									<style>
										{
											`
								.maxwidth500{
										max-width:500px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										 color: #05101a;
								}
								`
										}
									</style>
									{this.state.fileList.length===0?"":this.state.fileList.map((item,key)=>{
										return(
											<p className="color-grey mt10" key={key}  >
												<a className="color-grey fl">
													<i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
												</a>
												<span className="mr12 color9B9B maxwidth500 fl" length="58">
										{item.name}
									</span>
												<span className="color656565 mt2 color-grey-6 font-12 mr8">
										{item.response===undefined?"":bytesToSize(item.size)}
									</span>
												<i className="font-14 iconfont  icon-guanbi "
													 id={item.response===undefined?"":item.response.id}
													 aria-hidden="true" onClick={()=>this.onAttachmentRemove(item.response===undefined?"":item.response.id&&item.response.id)}></i>
											</p>
										)
									})}



                </div>



                {workslist&&workslist.task_type===1?"":
                <div className="stud-class-set pd20 coursenavbox edu-back-white"
										 style={{borderTop:'1px solid #ccc'}}
								>
                  <Form.Item
                    label="小组成员"

                  >
                    <div>
                      <div className={"fl ml20"}>成员要求：2～5人</div>
                      <Search
                        className={"fl mt5 ml20"}
                        style={{width:"270px"}}
                        placeholder="请输入姓名或学号搜索"
                        id="subject_search_input"
                        value={search}
                        onInput={this.inputSearchValue}
                        onSearch={this.searchValue}
                        autoComplete="off"
                      ></Search>
                    </div>

										<style>{`
               .fonthidden{
                    overflow:hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap
                }
                .width87{
                    width: 87px;
    								height: 24px;
                }
                img.edu-nodata-img {
										width: 200px;
										margin: 50px 90px 20px;
										display: block;
								}
              `}</style>
                  </Form.Item>
                  <div className={"ml20 mt10"} style={{width:"100%"}}>


                    <div className={"members fl"}
												 style={{paddingLeft: '9px'}}
                         onScroll={this.contentViewScroll}>

                      <CheckboxGroup value={task_status} onChange={this.funtaskstatus} style={{ paddingTop: '4px'}}>
												{memberslist===undefined?"":memberslist.members.length===0? 	<div className="square-list clearfix">
													<div className="edu-tab-con-box clearfix edu-txt-center">
														<img className="edu-nodata-img mb20" src={getImageUrl("images/educoder/nodata.png")}/>
														<p className="edu-nodata-p mb20">未找到包含{search}的学生</p>
													</div>
												</div>:memberslist&&memberslist.members.map((item,key)=>{
                          return(
                            <div key={key} style={{
                              width: '375px',
                              height: '30px'
                            }}>
                              <Checkbox value={item.user_id}
																				checked={
																					task_status.map((item,key)=>{
																						return  parseInt(task_status[key])===item.user_id?true:false
																					})
																				}
																				disabled={item.commit_status===true?true:false}  className="fl "></Checkbox>
                              <div className={"fl ml5 fonthidden width87"} style={{width: '70px'}} title={item.user_name}>{item.user_name}</div>
                              <div className={"fl ml5 fonthidden width87 color-grey-9"}  style={{width: '70px'}}>{item.group_name}</div>
                              <div className={"fl ml5 color-grey-9 fonthidden width87"}  style={{width: '70px'}}>{item.student_id}</div>
                              <div className={"fl ml20"}>{item.commit_status===false?<span className={"color-orange"}>已提交</span> :""}</div>
                            </div>
                          )
                        })}
                      </CheckboxGroup>


                    </div>

                    <div className={"youjiangboxs"}>
                      <i className={"iconfont icon-youjiang fl ml20 mr20"}></i>
                    </div>

                    <div className={"members fl"}>

                      {selectmemberslist&&selectmemberslist.map((item,key)=>{
                        return(
                          <div key={key} style={{
                            width: '375px',
                            height: '30px',
                            display:item.user_name===undefined?"none":""
                          }}>
														<div className={"fl ml5 fonthidden width87"} style={{width: '50px'}} title={item.user_name}>{item.user_name}</div>
                            <div className={"fl ml5 fonthidden width87 color-grey-9"}>{item.group_name}</div>
                            <div className={"fl ml5 color-grey-9 fonthidden width87"}>{item.student_id}</div>
                            {key>0?<div className={"fr ml20"}><i className={"iconfont icon-shanchudiao fl  color-grey-9"} style={{marginTop:'-4px'}} onClick={()=>this.delecttask_status(item.user_id)}></i></div>:""}
                          </div>
                        )
                      })}
                    </div>


                    <div className={"both"}>

                    </div>

                    {minmaxtype===true?<span className={"color-red mt20"}>
                人数不能{setvalue+minvalue}个人
              </span>:""}

                  </div>
                </div>}




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

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

      </React.Fragment>

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