import React,{ Component } from "react";
import CoursesListType from '../coursesPublic/CoursesListType';
import { WordsBtn } 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";
    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"
          })
        }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
          })
        }else{

          if(response.data.status!=401&&response.data.status!=403){

            const w=window.open('about:blank');
            w.location.href= "/tasks/"+response.data.game_identifier
          }

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

  }

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

  editname = (name,id) => {
    this.setState({
      ModalsRenametype:true,
      NavmodalValue:name,
      Navmodalname:"重命名",
      url:`/homework_commons/${id}/alter_name.json`
    })
  }
  cannerNavmoda=()=>{
    this.setState({
      ModalsRenametype:false,
    })
  }
  render(){
    let {
        Modalstype,
        Modalstopval,
        Modalsbottomval,
        cardsModalcancel,
        cardsModalsavetype,
        loadtype,
        modalname,
        visible,
        shixunsreplace,
        hidestartshixunsreplacevalue,
        startshixunCombattype,
        shixunsmessage,
        startbtn,

    } = this.state;

    const { checkBox,
      discussMessage,
      taskid,
    } = this.props;
    //

    // allow_late: true  //是否开启补交

    // homework_id: 9250

    // shixun_identifier: "25ykhpvl"

    //
    // console.log("this.props.isAdmin");
 

    return(
        <div className="graduateTopicList boardsList">
          {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} <br/>开启时间之前不能挑战
              </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>


          <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?checkBox:""}

          <div className="clearfix ds pr pt5 contentSection" >
						<style>{`
            .maxwidth580{
                max-width: 580px;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
            }
          `}</style>
            <h6>
              {/*/courses/1309/9373/listofworks*/}
              {/*to={`/courses/${this.props.match.params.coursesId}/${discussMessage.homework_id}/jobsettings`}*/}
              {
                this.props.isAdmin?<Link to={"/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+discussMessage.homework_id+"/list"}
                                      className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.name}</Link>:""
              }

              {
                this.props.isStudent? <Link to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/openlist`}
                                                  className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.name}</Link>:""
              }

              {
                this.props.isNotMember?this.props.discussMessage.private_icon===true?
                  <span className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.name}</span>
                  :
                  <Link to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/openlist`}
                     className="fl mt3 font-16 font-bd color-dark maxwidth580">{discussMessage.name}</Link>:""
              }


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

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


            </h6>

            <div className="cl"></div>
            <p className="color-grey panel-lightgrey mt16 fl">
              <span className="mr50">
                {/* <a href="/users/innov" className="panel-name-small hide fl mr15 mr30 color-grey3">{discussMessage.author.name}</a> */}

								{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>*/}
                <Tooltip title={discussMessage.time_status===1?"提交剩余时间":"补交剩余时间"} placement="bottom">
                    <span className="mr15 color-grey9">{discussMessage.status_time}</span>
                </Tooltip>

                {/* { 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>


						<style>
							{
								`
								 .homepagePostSettingname{
								   width:192px !important;
								 }
							   .homepagePostSettingbox{
								   width:121px !important;
								 }
								`
							}
						</style>
            {this.props.isAdmin?<div className={this.props.isClassManagement?"homepagePostSetting homepagePostSettingname":"homepagePostSetting homepagePostSettingbox"} style={{"right":"-2px","top":"44px","display":"block"}}>
              <a className="btn colorblue font-16" href={"/shixuns/"+discussMessage.shixun_identifier+"/challenges"} target={"_blank"}>实训详情</a>
								{this.props.isAdminOrTeacher()?<a  onClick={()=>this.editname(discussMessage.name,discussMessage.homework_id)} className={"btn colorblue ml20 font-16"}>重命名</a>:""}
              <WordsBtn className="btn colorblue ml20 font-16"  to={`/courses/${this.props.match.params.coursesId}/${this.state.shixuntypes}/${discussMessage.homework_id}/settings`}  > 设置</WordsBtn>
            </div>:""}


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


          </div>
        </div>
      )
    }
}
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
//     })
// }