import React, { Component } from 'react';

import {Link} from 'react-router-dom';
import {Tooltip,Menu} from 'antd';
import Loadable from 'react-loadable';
import Loading from '../../../../Loading';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import axios from 'axios';
import HomeworkModal from "../../coursesPublic/HomeworkModal";
import AccessoryModal from "../../coursesPublic/AccessoryModal";
import Associationmodel from '../../coursesPublic/Associationmodel';
import CoursesListType from '../../coursesPublic/CoursesListType';
import moment from 'moment';
import "../../css/members.css"
import "../../css/Courses.css"

import Modals from '../../../modals/Modals';


//毕设描述
const GraduationTasksquestions= Loadable({
  loader: () => import('./GraduationTaskssettingquestions'),
  loading: Loading,
})
//毕设任务设置
const GraduationTaskssetting=Loadable({
  loader: () => import('./GraduationTaskssetting'),
  loading: Loading,
})
//毕设任务列表
const GraduationTaskslist=Loadable({
  loader: () => import('./GraduationTaskssettinglist'),
  loading: Loading,
})

class GraduationTaskDetail extends Component{
  constructor(props){
    super(props);
    this.state={
      modalname:undefined,
      visible:false,
			Topval:undefined,
			starttime:undefined,
			starttimes:undefined,
			typs:undefined,
      endtime:undefined,
      Cancelname:undefined,
      Savesname:undefined,
      Cancel:undefined,
      Saves:undefined,
      Topvalright:undefined,
      Botvalleft:undefined,
      course_groupslist:undefined,
      course_groups:undefined,
      questionslist:undefined,
      tab:"list",
      visibles:undefined,
      Modalstype:undefined,
      Modalstopval:undefined,
      ModalCancel:undefined,
      ModalSave: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;
		// 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()
		this.props.history.replace(`/courses/${this.state.questionslist.course_id}/graduation_tasks/${this.state.questionslist.graduation_id}`);
  }
  //立即发布
  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(moment(new Date())).format("YYYY-MM-DD HH:mm") ,
			starttimes:this.props.getNowFormatDates(1),
			typs:"start",
      endtime:endtime,
      Cancelname:"暂不发布",
      Savesname:"立即发布",
      Cancel:this.cancelmodel,
      Saves:this.homepublish,
    })
  }
  // 确定立即发布
  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.setState({
          // Modalstopval:response.data.message,
          // ModalSave:this.cancelmodel,
          // Loadtype:true,
          course_groupslist:[],
          checkAllValue:false
        })
      }
    }).catch((error)=>{

    })
  }

  // 刷新
  resetList=()=>{
    this.getdatas();
    this.child && this.child.searchValue();
  }

  // 立即截止
  end=()=>{
		// this.homeworkstart()
		this.setState({
			modalname:"立即截止",
			visible:true,
			Topval:"学生将不能再提交作品",
			// Botvalleft:"暂不截止",
			// Botval:`本操作只对"提交中"的分班有效`,
			Cancelname:"暂不截止",
			Savesname:"立即截止",
			Cancel:this.cancelmodel,
			Saves:this.coursetaskend,
			typs:"end",
		})
  }
  // 取消
  cancelmodel=()=>{
    this.setState({
      Modalstype:false,
      Loadtype:false,
      visible:false,
      Modulationtype:false,
      Allocationtype:false,
      Modalstopval:"",
      ModalCancel:"",
      ModalSave:"",
    })
  }

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

  setTab = (tab) =>{
    this.setState({
      tab
    })
  }

  // 关联项目
  AssociationItems=()=>{
		this.setState({
			visibles:true
		})
  }
  Cancel=()=>{
		this.setState({
			visibles:false
		})
  }
  // 取消关联
  cannelAssociation=()=>{
		this.setState({
			Modalstype:true,
			Modalstopval:"确定要取消该项目关联？",
			ModalCancel:this.cannerassocition,
			ModalSave:this.savetassociton
		})
  }
  savetassociton=()=>{
		this.cannerassocition();
		let {questionslist}=this.state;
		let url = "/graduation_tasks/"+questionslist.task_id+"/graduation_works/cancel_relate_project.json";
		console.log(url)
		axios.get(url).then((result)=>{
			if(result.data.status===0){
				this.resetList();
			}
		}).catch((error)=>{
			console.log(error)
		})

	}
  cannerassocition=()=>{
		this.setState({
			Modalstype:false,
			Modalstopval:"",
			ModalCancel:"",
			ModalSave:"",
			loadtype:false,
			visibles:false
		})
  }
  // 补交附件
  handaccessory=()=>{
	  // let {taskslistdata}=this.state;
		// let courseId=this.props.match.params.coursesId;
		//
		// let url="/courses/"+courseId+"/graduation_tasks/"+taskslistdata.work_id+"/appraise"
		//
		// window.location.href=url;
		this.setState({
			avisible:true
		})
	}
	Cancelvisible=()=>{
		this.setState({
			avisible:false
		})
  }
  
  bindRef = ref => { this.child = ref } ;
  render(){
    
    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;
    let { 
      questionslist , 
      tab , 
      visibles , 
      Modalstype,
      Modalstopval,
      ModalCancel,
      ModalSave
    } = this.state
    
    const commom = {
      setTab:this.setTab
    }
    return(
      <div className="newMain clearfix">
        {
          questionslist && 
          <div className={"educontent mb20"}>
          <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)}
          />
          {/*关联项目*/}
					{visibles===true?
						<Associationmodel
						modalname={"关联项目"}
						visible={visibles}
						Cancel={()=>this.Cancel()}
						taskid={ questionslist && questionslist.task_id }
						funlist={this.resetList}
					  />
          :""}

          {this.state.avisible===true?<AccessoryModal
						{...this.props}
						modalname={"补交附件"}
						visible={this.state.avisible}
						Cancelname={"取消"}
						Savesname={"确认"}
						Cancel={this.Cancelvisible}
						categoryid={questionslist.work_id}
						setupdate={this.resetList}
					/>:""}
          {/*提示*/}
					<Modals
						modalsType={Modalstype}
						modalsTopval={Modalstopval}
						modalCancel={ModalCancel}
						modalSave={ModalSave}
						closable={false}
						footer={null}
						destroyOnClose={true}
						centered={true}
					/>
          <p className="clearfix mt10">
            <a onClick={this.goback} className="color-grey-9 fl">{questionslist.course_name}</a>
            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
            <Link to={`/courses/${courseId}/graduation_tasks/${category_id}`} className="color-grey-9 fl">{questionslist.graduation_name}</Link>
            <span className="color-grey-9 fl ml3 mr3">&gt;</span>
            <span className="color-grey-6">任务详情</span>
          </p>
          <div className="clearfix mt20 mb20 lineh-25 linbox">
            <p className=" fl color-black summaryname">
                <Link to={`/courses/${courseId}/graduation_tasks/${category_id}`} className="color-grey-3">{questionslist.task_name}</Link>
            </p>
            <CoursesListType
              typelist={questionslist.task_status}
            />
            <a className="color-grey-3 fr font-16 ml30 mr20" onClick={this.goback}>返回</a>
          </div>
          <div className="stud-class-set bor-bottom-greyE">
                <div className="clearfix edu-back-white poll_list pl20">

                  <Link className={tab && tab == "list" ? "active" : ""} to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/list"}>任务列表</Link>
                  <Link className={tab && tab == "questions" ? "active" : ""} to={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/questions"}>毕设描述</Link>
                  <Link className={tab && tab == "setting" ? "active" : ""} 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;
														 }
														 	 .drop_down_menu li .color-dark{
																	color: #666 !important;
                              }
                            .linbox{
                              height: 26px;
                            }
													`}
                  </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 onClick={()=>this.confirmysl("/graduation_tasks/"+task_Id+"/tasks_list.xlsx")} className="color-dark">导出成绩</a></li>
                      <li><a onClick={()=>this.confirmysl("/graduation_tasks/"+task_Id+"/tasks_list.zip")} className="color-dark">导出作品附件</a></li>
                    </ul>
                  </li>:""}
                  {questionslist.work_status===undefined||questionslist.work_status===null||questionslist.work_status.length===0?"":questionslist.work_status.map((item,key)=>{
                    return(
                      <span key={key}>
                          {item==="提交作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/works/new"}>提交作品</a>:""}
                          {item==="补交作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+task_Id+"/works/new"}>补交作品</a>:""}
                          {item==="修改作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+questionslist.work_id+"/works/edit"}>修改作品</a>:""}
                          {item==="查看作品"?<a className={"fr color-blue font-16"} href={"/courses/"+courseId+"/graduation_tasks/"+category_id+"/"+questionslist.work_id+"/works/edit"}>查看作品</a> :""}
                          {item==="创建项目"?<a className={"fr color-blue font-16"} href={'/projects/new'} target="_blank">创建项目</a>:""}
                          {item==="关联项目"?<a className={"fr color-blue font-16"} onClick={this.AssociationItems}>关联项目</a>:""}
                          {item==="取消关联"?<a className={"fr color-blue font-16"} onClick={this.cannelAssociation}>取消关联</a>:""}
                          {item==="补交附件"?<a className={"fr color-blue font-16"} onClick={this.handaccessory}>补交附件</a>:""}
                      </span>

                    )
                  })}

                  {/*<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>
          <Switch {...this.props}>

            <Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/list"
              render={
                  (props) => (<GraduationTaskslist {...this.props} {...props} {...this.state} {...commom} triggerRef={this.bindRef} tab={`list`}/>)
              }
            ></Route>

						<Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/setting"
              render={
                  (props) => (<GraduationTaskssetting {...this.props} {...props} {...this.state} {...commom} tab={`setting`}/>)
              }
            ></Route>

            <Route exact path="/courses/:coursesId/graduation_tasks/:category_id/:task_Id/questions"
            render={
                (props) => (<GraduationTasksquestions {...this.props} {...props} {...this.state} {...commom} tab={`questions`}/>)
            }></Route>
            
          </Switch>
        </div>
        }
        
      </div>
    )
  }
}
// CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC))
export default (GraduationTaskDetail) ;