import React,{Component} from "React";
import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal, Table, Divider, Tag} from "antd";
import {Link} from 'react-router-dom';
import { WordsBtn,markdownToHTML} from 'educoder';
import axios from 'axios';
import Modals from '../../../modals/Modals';
import HomeworkModal from "../../coursesPublic/HomeworkModal";
import CoursesListType from '../../coursesPublic/CoursesListType';
import moment from 'moment';
import GraduationTaskssettingReply from './GraduationTaskssettingReply';

let GraduationTasksnewtype=true;


class GraduationTasksquestions extends Component{

  constructor(props){
    super(props)
    this.state={
      coursename:"",
      coursesearch:"",
      title_num:20,
      title_value:"",
      fileList: [],
      contents: [{val:"",id:1}],
      type:true,
      questionslist:undefined
    }
  }

  componentDidMount(){

   this.getdatas()
  }
  getdatas=()=>{
		const task_Id = this.props.match.params.task_Id;
		let url="/graduation_tasks/"+task_Id+".json";

		axios.get(url).then((result)=>{
			if(result.status===200){
				this.setState({
					questionslist:result.data
				})

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

  goback=()=>{
    let courseId=this.props.match.params.coursesId;
    let category_id=this.props.match.params.category_id;
    window.location.href="/courses/"+courseId+"/graduation_tasks/"+category_id;
  }

  end=()=>{
    // this.homeworkstart()
    this.setState({
      modalname:"立即截止",
      visible:true,
      Topval:"本操作只对“提交中”的对象生效",
      Botvalleft:"暂不截止",
      Botval:"则将根据已设置的截止时间，定时截止",
      Cancelname:"暂不截止",
      Savesname:"立即截止",
      Cancel:this.cancelmodel,
      Saves:this.coursetaskend,
			typs:"end",
    })

  }
  //立即发布
  publish=()=>{
    let starttime= this.props.getNowFormatDates(1,1);
    let endtime=this.props.getNowFormatDates(2,1);
    // this.homeworkstart()
    this.setState({
      modalname:"立即发布",
      visible:true,
      Topval:"发布设置均可修改",
      Botvalleft:"点击修改",
      Botval:"此设置将对所有分班生效",
      starttime:moment(new Date()).format('YYYY-MM-DD 00:00'),
			starttimes:this.props.getNowFormatDates(1),
			typs:"start",
      endtime:endtime,
      Cancelname:"暂不发布",
      Savesname:"立即发布",
      Cancel:this.cancelmodel,
      Saves:this.homepublish,
    })
  }
  //立即发布
  homeworkstart=()=>{
    let coursesId=this.props.match.params.coursesId;
    let url="/courses/"+coursesId+"/all_course_groups.json";

    axios.get(url).then((response) => {

      if(response.status===200){
        this.setState({
          modaltype:response.data.course_groups===null||response.data.course_groups.length===0?2:1,
          course_groups:response.data.course_groups,
        })
      }
    }).catch((error) => {
      console.log(error)
    });

  }
  homepublish=(ids,endtime)=>{
    this.cancelmodel();
    let task_Id=this.props.match.params.task_Id;
    const cid = this.props.match.params.coursesId
    // let url = `/courses/${cid}/graduation_tasks/publish_task.json`;

    let url="/courses/"+cid+"/graduation_tasks/publish_task.json"
    axios.post(url,{
      task_ids:[task_Id],
      group_ids: this.state.course_groupslist,
			end_time:endtime,
    }).then((response)=>{
      if (response.data.status == 0) {
				this.getdatas()
        this.props.showNotification(response.data.message);
        this.searchValue();

        this.setState({
          // Modalstopval:response.data.message,
          // ModalSave:this.cancelmodel,
          // Loadtype:true,
          course_groupslist:[],
          checkAllValue:false
        })
      }
    }).catch((error)=>{

    })
  }

  cancelmodel=()=>{

    this.setState({
      Modalstype:false,
      Loadtype:false,
      visible:false,
      Modulationtype:false,
      Allocationtype:false,
      Modalstopval:"",
      ModalCancel:"",
      ModalSave:"",
    })

  }

  coursetaskend=()=>{
    this.cancelmodel();
    const coursesId = this.props.match.params.coursesId;
    const task_Id = this.props.match.params.task_Id;

    let url = `/courses/${coursesId}/graduation_tasks/end_task.json`;
    axios.post(url,{
      task_ids:[task_Id],
      group_ids: this.state.course_groupslist,
    }).then((response)=>{
      if (response.data.status == 0) {
				this.getdatas()
        this.props.showNotification(response.data.message);
        this.setState({
          // Modalstopval:response.data.message,
          // ModalSave:this.cancelmodel,
          // Loadtype:true,
          course_groupslist:[],
          checkAllValue:false
        })

      }

    }).catch((error)=>{

    })
  }

  getcourse_groupslist=(id)=>{
    this.setState({
      course_groupslist:id
    })
  }
  render(){

    let { Modalstype,Modalstopval,ModalCancel,ModalSave,questionslist} =this.state;
    // console.log(this.props)

    let courseId=this.props.match.params.coursesId;
    let category_id=this.props.match.params.category_id;
    let task_Id=this.props.match.params.task_Id;


   //console.log(questionslist&&questionslist)
    return(
      <React.Fragment>

        <div>
          {/*提示*/}
          <Modals
            modalsType={this.state.Modalstype}
            modalsTopval={this.state.Modalstopval}
            modalCancel={this.state.ModalCancel}
            modalSave={this.state.ModalSave}
            loadtype={this.state.Loadtype}
          />
          {/*提示*/}
          {/*<Modals*/}
            {/*modalsType={Modalstype}*/}
            {/*modalsTopval={Modalstopval}*/}
            {/*modalCancel={ModalCancel}*/}
            {/*modalSave={ModalSave}*/}
            {/*loadtype={Loadtype}*/}
          {/*/>*/}

          <HomeworkModal
						starttimes={this.state.starttimes}
						typs={this.state.typs}
            modalname={this.state.modalname}
            visible={this.state.visible}
            Topval={this.state.Topval}
            Topvalright={this.state.Topvalright}
            Botvalleft={this.state.Botvalleft}
            Botval={this.state.Botval}
            starttime={this.state.starttime}
            endtime={this.state.endtime}
            Cancelname={this.state.Cancelname}
            Savesname={this.state.Savesname}
            Cancel={this.state.Cancel}
            Saves={this.state.Saves}
            course_groups={this.state.course_groups}
            modaltype={this.state.modaltype}
            getcourse_groupslist={(id) => this.getcourse_groupslist(id)}
          />

          {questionslist&&questionslist?<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">{questionslist.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/"+questionslist.graduation_id} className="color-grey-6">{questionslist.graduation_name}</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">{questionslist.task_name}</Link>*/}
                  {/*<span className="color-grey-9 ml3 mr3">&gt;</span>*/}
                {/*</WordsBtn>*/}

                <span>任务详情</span>

              </p>

              <div style={{ width:'100%'}} >
                <p className=" fl color-black mt25 summaryname">
                    <Link to={"/courses/"+courseId+"/graduation_tasks/"+category_id} className="color-grey-6">{questionslist.task_name}</Link>
                </p>
                <CoursesListType
                  typelist={questionslist.task_status}
                  typesylename={"mt22"}
                />
                <a className="color-grey-6 fr font-16 ml30 mt10 mr20" onClick={this.goback}>返回</a>
              </div>


              <div className="stud-class-set bor-bottom-greyE">
                <div className="mt10 clearfix edu-back-white poll_list pl20">

                  <Link to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/list"}>任务列表</Link>
                  <Link className="active"  to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/questions"}>任务问答</Link>
                  <Link style={{paddingLeft:'38px'}}
                        to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/setting?tab=3"}>设置</Link>

                  {/*<a className={"fr color-blue font-16"}>导出成绩</a>*/}
                  {/*{this.props.isAdmin()?<a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.xls"} className={"fr color-blue font-16"}>导出成绩</a>:""}*/}
                  {/*{this.props.isAdmin()?<a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.zip"} className={"fr color-blue font-16"}>导出作品附件</a>:""}*/}

                  <style>
                    { `
													.drop_down_menu{
														height: 118px;
														left:0px;
														width: 121px;
													 }
													.drop_down_menu li {
														 overflow: visible;
															 width: 121px;
														 }
														.drop_down_menu li a{
																 padding:  0px;
																font-size: 14px;
														 }
														 .mt19{
															margin-top:19px;
														 }
														 .drop_down_menu, .drop_down_normal{
																padding-top: 10px;
																padding-bottom: 8px;
														 }
													`}
                  </style>
                  {this.props.isAdmin()? <li className="li_line drop_down fr color-blue font-16 mr20 mt20" style={{"paddingLeft":"0px"}}>
                    导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                    <ul className="drop_down_menu" style={{"right":"-34px","left":"unset","height":"auto"}}>
                      <li><a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.xlsx"} calssName="color-dark">导出成绩</a></li>
                      <li><a href={"/api/graduation_tasks/"+task_Id+"/tasks_list.zip"} calssName="color-dark">导出作品附件</a></li>
                    </ul>
                  </li>:""}

                  {/*<a className={"fr color-blue font-16"}>项目在线质量检测</a>*/}
                  {this.props.isAdmin()?questionslist.status===1? <a className={"fr color-blue font-16 mr20"} onClick={() => { this.end()} }>立即截止</a>:"":""}
                  {this.props.isAdmin()?questionslist.status===0? <a className={"fr color-blue font-16 mr20"} onClick={() => { this.publish()} }>立即发布</a>:"":""}
                  {this.props.isAdmin()?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+task_Id+"/edit"}>编辑任务</a>:""}
                </div>
              </div>



              <div className="justify break_full_word new_li markdown-body edu-back-white"
                   id="challenge_editorMd_description">
                <p id="ReactMarkdown">
                  <div style={{padding: '30px 40px'}}>

                    {questionslist&&questionslist?
                      <div  style={{
                        width: '100%',
                        border: '1px solid transparent'
                      }}>
												<div dangerouslySetInnerHTML={{__html: markdownToHTML(questionslist.description).replace(/▁/g,"▁▁▁")}}></div>
                     </div>:""
                    }

                    <div>
                      {questionslist&&questionslist.attachments.map((item,key)=>{
                        return(
                          <div className="color-grey mt5">
                            <a className="color-grey">
                              <i className="font-14 color-green iconfont icon-fujian mr8" aria-hidden="true"></i>
                            </a>
                            <a href={item.url}
                               className="mr12" length="58">
                              {item.title}
                            </a>
                            <span className="color-grey mt2 color-grey-6 font-12">{item.filesize}</span>

                          </div>
                        )

                      })}

                    </div>

                    {questionslist&&questionslist.group_info?<div>

                      <div className={"mt20"}>
                        <span className="font-14">分组要求：</span>
                        <span className="font-14 color-grey-9">（提交作品时需要关联同组成员，组内成员作品共享）</span>
                      </div>

                      <div className={"mt10"}>
                        <span className="font-14">分组人数：{questionslist.group_info.min_number} - {questionslist.group_info.max_number} 人 </span>
                        {questionslist.group_info.base_on_project===true?
                          <span className="font-14 color-grey-9"> （基于项目，项目管理员角色的成员可以提交作品）</span>
                          : <span className="font-14 color-grey-9"> （非基于项目，任意小组成员可以提交作品）</span>}
                      </div>

                      {questionslist.group_info.base_on_project===true?<div className={"mt10"}>
                        <span className="font-14">基于项目实施</span>
                        <span className="font-14 color-grey-9"> （各小组必须在educoder平台创建项目）</span>
                      </div>:<div className="font-14 mt10">不基于项目实施</div>}

                    </div>:""}

                  </div>

                </p>


                {/*<div className="mt10 mb20">*/}
                  {/*<p*/}
                     {/*// className={`noteDetailPoint ${memo.user_praise ? 'Pointed' : ''} `}*/}
                    {/*className={`noteDetailPoint `}*/}
                     {/*onClick={()=>{this.clickPraise()}}*/}
                  {/*>*/}
                    {/*<i className="iconfont icon-dianzan"></i>*/}
                    {/*<br/>*/}
                    {/*/!*<span>{memo.praise_count}</span>*!/*/}
                  {/*</p>*/}
                {/*</div>*/}

              </div>

              <div className={"mt20 course-message"} style={{background: '#fff'}}>
                <GraduationTaskssettingReply
                  memo={{id: task_Id, 
                  user_id: questionslist && questionslist.user_id}}
                  course_id={courseId} {...this.props}>
                </GraduationTaskssettingReply>
                  {/*讨论区*/}

              </div>

            </div>

          </div>:""}

        </div>

      </React.Fragment>

    )
  }
}

export default GraduationTasksquestions;