import React,{ Component } from "react";
import CoursesListType from '../coursesPublic/CoursesListType';
import { WordsBtn, getTaskUrlById , ConditionToolTip } from 'educoder';
import {Tooltip,message,Modal} from 'antd';
import {Link} from 'react-router-dom';
import axios from 'axios';
import Modals from '../../modals/Modals';
import Associationmodel from '../coursesPublic/Associationmodel';
import ModalsRename from '../coursesPublic/ModalsRename';
// import '../../css/members.css'
import './style.css'


class ShixunhomeWorkItem extends Component{
  constructor(props){
    super(props);
    this.state = {
      props:props,
      modalname:"关联项目",
      visible:false,
      startbtn:false,
      code_review:false
    }
    // console.log("获取到this.propssssssssssss")
    // console.log(this.props)
  }

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

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

  }


  Cancel=()=>{
    this.setState({
      visible:false
    })
  }

  taskoperationId=(list)=>{
    this.setState({
      startbtn:true,
    })
    let url= list+".json";
    // const w=window.open('about:blank');
    axios.get(url).then((response) => {

      if(response.status===200){
        if(response.data.status===-2){
          this.setState({
            startbtn:false,
            shixunsreplace:true,
            hidestartshixunsreplacevalue:response.data.message+".json"
          })
          // w.close()
        }else if(response.data.status===-1){
          console.log(response)
        }else if(response.data.status===-3){
          this.setState({
            shixunsmessage:response.data.message,
            startshixunCombattype:true,
            startbtn:false
          })
          // w.close()
        }else{
          this.setState({
            startbtn:false
          })
          // if(response.data.status!=401&&response.data.status!=403){
          //   w.location.href= "/tasks/"+response.data.game_identifier
          // }
          window.location.href = "/tasks/"+response.data.game_identifier

        }
      }
    }).catch((error) => {
      this.setState({
        startbtn:false
      })
      // w.close()

    });

  }

  hidestartshixunsreplace=(url)=>{
    axios.get(url).then((response) => {
      if(response.status===200){

        this.setState({
          shixunsreplace:false
        })
        message.success('重置成功，正在进入实训！');
        let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
        this.props.history.push(path);

      }}
    ).catch((error) => {
      this.setState({
        startbtn:false,
        shixunsreplace:false
      })
    });

  }

  hidestartshixunCombattype=()=>{
    this.setState({
      startshixunCombattype:false
    })
  }

  // 实训详情，阻止冒泡
  stopPro = (event) => {
    event.stopPropagation()
  }
  
  editname = (name,id,event) => {
    this.setState({
      ModalsRenametype:true,
      NavmodalValue:name,
      Navmodalname:"重命名",
      url:`/homework_commons/${id}/alter_name.json`
    })
    event.stopPropagation()
  }
  cannerNavmoda=()=>{
    this.setState({
      ModalsRenametype:false,
    })
  }

	hrefjumpskip=(url)=>{

		if(this.props.checkIfLogin()===false){
			this.props.showLoginDialog()
			return
		}
		// if(this.props.checkIfProfileCompleted()===false){
		// 	this.setState({
		// 		AccountProfiletype:true
		// 	})
		// 	return
		// }
		// if(this.props.checkIfProfessionalCertification()===false){
		// 	this.props.showProfileCompleteDialog()
		// 	return
		// }

		this.props.history.push(url);

	}
  render(){
    let {
        Modalstype,
        Modalstopval,
        Modalsbottomval,
        cardsModalcancel,
        cardsModalsavetype,
        loadtype,
        modalname,
        visible,
        shixunsreplace,
        hidestartshixunsreplacevalue,
        startshixunCombattype,
        shixunsmessage,
        startbtn,

    } = this.state;

    const { checkBox,
      discussMessage,
      taskid,index
    } = this.props;
    return(
      <React.Fragment>
        {
          this.state.ModalsRenametype===true?
          <ModalsRename
            {...this.props}
            Navmodalnametype={this.state.ModalsRenametype}
            NavmodalValue={this.state.NavmodalValue}
            Navmodalname={this.state.Navmodalname}
            Navname={"作业"}
            url={this.state.url}
            cannerNavmoda={()=>this.cannerNavmoda()}
          />
        :""}
        <Modals
          modalsType={Modalstype}
          modalsTopval={Modalstopval}
          modalsBottomval={Modalsbottomval}
          modalCancel={cardsModalcancel}
          modalSave={cardsModalsavetype}
          loadtype={loadtype}
        />
        {visible===true?<Associationmodel
          modalname={modalname}
          visible={visible}
          Cancel={this.Cancel}
          taskid={taskid}
          funlist={this.props.funlist}
        />:""}
        <Modal
          keyboard={false}
          title="提示"
          visible={shixunsreplace}
          closable={false}
          footer={null}
        >
          <div className="task-popup-content">
            <p className="task-popup-text-center font-16 pb20">实训已经更新了，正在为您重置!</p>
          </div>
          <div className="task-popup-submit clearfix">
            <a className="task-btn task-btn-orange fr mr51"
                onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
          </div>
        </Modal>

        <Modal
          keyboard={false}
          title="提示"
          visible={startshixunCombattype}
          closable={false}
          footer={null}
        >
          <div className="task-popup-content">
            <p className="task-popup-text-center font-16 pb20">目前该实训项目尚在内测中，将于{shixunsmessage}之后开放，谢谢！</p>
          </div>
          <div className="task-popup-submit clearfix">
            {/*<a onClick={this.hidestartshixunCombattype} className="task-btn fl">取消</a>*/}
            <a className="task-btn task-btn-orange fr mr51" onClick={this.hidestartshixunCombattype}>知道啦</a>
          </div>
          {/*<p className="inviteTipbtn with100 fl">*/}
          {/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
          {/*</p>*/}
        </Modal>

        <div className="graduateTopicList boardsList" style={{cursor : this.props.isAdmin ? "pointer" : "default"}} onClick={() => window.$(`.shixunitem${index} input`).click() } >
          <style>{`
            .boardsList .ant-checkbox-wrapper{
               margin-top: -35px;
            }
            .graduateTopicList .ant-checkbox-input {
              margin-right: 15px;
            }

            .inlineblock{
                display: inline-block;
            }

          .titleSearch .titleBar {
            display: flex;
          }
          .titleSearch .titleBar .toolbar {
            flex: 1;
            display: flex;
            justify-content: flex-end;
            align-items: center;
          }


          /*list style*/
          .boardsList {
            display: flex;
            align-items: center;

            padding-top: 8px;
            padding-bottom: 10px;
            padding-left: 0px;
            padding-right: 0px;
          }
          .boardsList .homepagePostSetting {
            position: absolute;
            width: 20px;
            height: 20px;
          }

          .boardsList .contentSection {
            flex: 1;
          }

          `}</style>

          {this.props.isAdmin?
            <span className={`shixunitem${index} fl`} style={{"height":"55px"}}>{checkBox}</span>
            :
            ""
          }

          <div className="clearfix ds pr pt5 contentSection" >
						<style>{`
            .maxwidth422{
                max-width: 422px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
            }
          `}</style>
            <h6>

              {/*to={`/courses/${this.props.match.params.coursesId}/${discussMessage.homework_id}/jobsettings`}*/}
              {
                this.props.isAdmin?<a onClick={()=>this.hrefjumpskip("/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list?tab=0")}
                                         title={discussMessage.name}
                                      className="fl mt3 font-16 font-bd color-dark maxwidth422">{discussMessage.name}</a>:""
              }

              {
                this.props.isStudent? <a onClick={()=>this.hrefjumpskip(`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/list?tab=0`)}
                                            title={discussMessage.name}
                                            className="fl mt3 font-16 font-bd color-dark maxwidth422">{discussMessage.name}</a>:""
              }

              {
                this.props.isNotMember===true? this.props.discussMessage.private_icon===true?
											<span className="fl mt3 font-16 font-bd color-dark maxwidth422 pointer"  title={"私有属性，非课堂成员不能访问"}>{discussMessage.name}</span>
										: <a onClick={()=>this.hrefjumpskip(`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/list?tab=0`)}
                         title={discussMessage.name}
                         className="fl mt3 font-16 font-bd color-dark maxwidth422">{discussMessage.name}</a>:""
              }


              {
                 this.props.discussMessage.private_icon===true?
                  <Tooltip title={"私有属性，非课堂成员不能访问"} placement="bottom">
                    <i className="iconfont icon-guansuo color-grey-c ml10 font-16 fl mt4"></i>
                  </Tooltip>
                  :
                  <div></div>
              }

              <CoursesListType typelist={discussMessage.status} typesylename={""} />

							<style>
								{
									`
								 .homepagePostSettingname{
								   width:192px !important;
								 }
							   .homepagePostSettingbox{
								   width:139px !important;
								 }
								`
								}
							</style>
							{this.props.isAdmin?<span onClick={(event)=>this.stopPro(event)} className={this.props.isAdminOrCreator()?"homepagePostSetting homepagePostSettingname":"homepagePostSetting homepagePostSettingbox"} style={{"right":"-2px","top":"6px","display":"block"}}>
								<Link className="btn colorblue font-16 fontweight400" to={"/shixuns/"+discussMessage.shixun_identifier+"/challenges"} target={"_blank"}>实训详情</Link>
								{this.props.isAdminOrCreator()?<a onClick={(event)=>this.editname(discussMessage.name,discussMessage.homework_id,event)} className={"btn colorblue ml20 font-16 fontweight400"}>重命名</a>:""}
								{/*<WordsBtn className="btn colorblue ml20 font-16"  to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/settings?tab=3`}  > 设置</WordsBtn>*/}
								<WordsBtn className="btn colorblue  font-16 ml15 fontweight400"  to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/settings?tab=3`}  > 设置</WordsBtn>
							</span>:""}


							{this.props.isStudent===true?this.props.course_identity===5?
								<WordsBtn  style="blue" className="colorblue font-16 mr20 fr mt10">
									{startbtn===false?
										(discussMessage.task_operation[0] == '继续挑战' || discussMessage.task_operation[0] == '查看实战' ?
											<a className="btn colorblue" href={getTaskUrlById(discussMessage.task_operation[1])}>
												{discussMessage.task_operation[0]}
											</a>
											:
											<a className="btn colorblue" onClick={()=>this.taskoperationId(discussMessage.task_operation[1])}>
												{discussMessage.task_operation[0]}
											</a>):<a className="btn colorblue" >开启中</a>}
								</WordsBtn>:"":""
							}

            </h6>

            <div className="cl"></div>
            <p className="color-grey mt16 fl" style={{"width":"820px"}}>
              <span >
                {/* <a href="/users/innov" className="panel-name-small hide fl mr15 mr30 color-grey3">{discussMessage.author.name}</a> */}
                { discussMessage.author && <span className="mr15 color-grey-3">{discussMessage.author}</span> }
								{discussMessage.commit_count===undefined?"":<span className="mr15 color-grey9">已开始做题 {discussMessage.commit_count}人</span>}
								{discussMessage.uncommit_count===undefined?"":<span className="mr15 color-grey9">未开始做题 {discussMessage.uncommit_count}人</span>}
                {/*<span className="mr15 color-grey9">{discussMessage.replies_count} 3 未评</span>*/}

                {
                  discussMessage.time_status===1?
                    <Tooltip title={"提交剩余时间"} placement="bottom">
                      <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                    </Tooltip>
                  :discussMessage.time_status===2?
                    <Tooltip title={"补交剩余时间"} placement="bottom">
                      <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                    </Tooltip>
                  :discussMessage.time_status===3?
                      <Tooltip title={"匿评剩余时间"} placement="bottom">
                        <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                      </Tooltip>
                  :discussMessage.time_status===4?
                        <Tooltip title={"申诉剩余时间"} placement="bottom">
                          <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                        </Tooltip>
                  :
                   <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                }
                {
                  discussMessage && discussMessage.upper_category_name &&
                  <ConditionToolTip title={discussMessage.upper_category_name} condition={ discussMessage.upper_category_name.length > 22 }>
                    { <div className=" color-grey9 task-hide fr" style={discussMessage.time_status===1||discussMessage.time_status===2||discussMessage.time_status===3||discussMessage.time_status===4||discussMessage.time_status===5||discussMessage.time_status===6?{"maxWidth":"268px"}:{"maxWidth":"625px"}} title={discussMessage.upper_category_name}>所属目录：{discussMessage.upper_category_name}</div>}
                  </ConditionToolTip>
                }
                
                
                

                {/* { discussMessage.replies_count != 0 && <span className="mr15 color-grey9">{discussMessage.replies_count} 回复</span> }
                { discussMessage.praise_num != 0 && <span className="mr15 color-grey9">{discussMessage.praise_num} 点赞</span> }
                { discussMessage.visits != 0 && <span className="mr15 color-grey9">{discussMessage.visits} 浏览</span> } */}
                {/* <span className="mr15 color-light-grey-C">{moment(discussMessage.created_on).fromNow()} </span> */}
              </span>
            </p>




          </div>
        </div>
      </React.Fragment>
      )
    }
}
export default ShixunhomeWorkItem;


//
// cannelAssociation=()=>{
//
//   this.setState({
//     Modalstype:true,
//     Modalstopval:"确定要取消该项目关联？",
//     cardsModalcancel:this.cannerassocition,
//     cardsModalsavetype:this.savetassociton
//   })
//
// }
// cannerassocition=()=>{
//
//   this.setState({
//     Modalstype:false,
//     Modalstopval:"",
//     cardsModalcancel:"",
//     cardsModalsavetype:"",
//     loadtype:false
//   })
//
// }
// savetassociton=()=>{
//   this.cannerassocition();
//   let taskid=this.props.taskid;
//   let url = "/graduation_tasks/"+taskid+"/graduation_works/cancel_relate_project.json";
//   axios.get(url).then((result)=>{
//
//     if(result.data.status===0){
//       this.setState({
//         Modalstype:true,
//         Modalstopval:result.data.message,
//         cardsModalsavetype:this.cannerassocition,
//         loadtype:true
//       })
//     }
//
//   }).catch((error)=>{
//     console.log(error)
//   })
//
// }
//
// saveAssociationItems=()=>{
//
//   let coursesId=this.props.coursesId;
//   let taskid=this.props.taskid;
//   let url="/courses/"+coursesId+"/graduation_tasks/relate_project.json";
//   axios.post(url,{
//     project_id:taskid
//   }).then((result)=>{
//     console.log(result)
//     if(result.data.status===0){
//       this.setState({
//         Modalstype:true,
//         Modalstopval:result.data.message,
//         cardsModalsavetype:this.cannerassocition,
//         loadtype:true
//       })
//     }
//   }).catch((error)=>{
//     console.log(error)
//   })
//
// }
//
//
// AssociationItems=()=>{
//     this.setState({
//       visible:true
//     })
// }