import React, { Component } from 'react';
import {getImageUrl} from 'educoder';
import { Tooltip,Modal,Icon,Spin,message} from 'antd';
import '../../paths/ShixunPaths.css';
import axios from 'axios';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class YslDetailCards extends Component{
	constructor(props){
		super(props)
		this.state={
			showparagraph:false,
			showparagraphkey:"",
			showparagraphindex:"",
			shixunsreplace:false,
			hidestartshixunsreplacevalue:"",
			shixunsmessage:"",
			startshixunCombattype:false,
			isSpin:false,
		}
	}

	showparagraph =(key,index)=>{
		this.setState({
			showparagraph:true,
			showparagraphkey:key,
			showparagraphindex:index
		})
	};
	hideparagraph=()=>{
		this.setState({
			showparagraph:false
		})
	};
	startgameid=(id)=>{
		// 上面传过来的方法是用来没登入弹出弹框的
    try {
			let {userlogin} = this.props;
			if (userlogin === undefined) {
				this.props.Tojoinclass();
				return
			}
			if (userlogin === "") {
				this.props.Tojoinclass();
				return;
			}
		}catch (e) {

		}

     try {
			 if(this.props.isNotMember()===true){
				 //这个是外部传过来的
				 this.props.Startlearningtwo();
				 return
			 }
		 }catch (e) {

		 }

		let url = "/shixuns/" + id + "/shixun_exec.json";
		axios.get(url).then((response) => {

			if (response.data.status === -2) {
				this.setState({

					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,
				})
			} else {
				console.log("开始学习了");
				window.open("/tasks/" + response.data.game_identifier,'_blank');
				//这个是传过来  调用刷新
				this.props.Myreload();
				// window.location.href = path
				// let path="/tasks/"+response.data.game_identifier;
				// this.props.history.push(path);
			}
		}).catch((error) => {

		});

	};

	componentDidMount(){
	}


	hidestartshixunsreplace=(url)=>{
		this.setState({
			isSpin:true,
		})
		axios.get(url).then((response) => {
			// debugger
			if(response.status===200){
				// let path="/shixuns/"+response.data.shixun_identifier+"/challenges";
				// this.props.history.push(path);
				message.success('重置成功，正在进入实训！');
				this.startgameid(response.data.shixun_identifier);
				this.setState({
					shixunsreplace:false,
					isSpin:false,
					startbtn:false,
				})

				// message.success('重置成功，正在进入实训！');
				// this.startshixunCombat();
			}}
		).catch((error) => {
			this.setState({
				isSpin:false,
				shixunsreplace:false,
			})
		});

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

	render(){
		let{showparagraph,showparagraphkey,showparagraphindex,hidestartshixunsreplacevalue} =this.state;
		let { stages }=this.props;
		const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
		return(
			<div className="lesson-saved-list">
				<Modal
					keyboard={false}
					title="提示"
					visible={this.state.startshixunCombattype}
					closable={false}
					footer={null}
				>
					<div className="task-popup-content">
						<p className="task-popup-text-center font-16 pb20">本实训的开启时间：{this.state.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"
							 style={{marginRight:'51px'}}
							 onClick={this.hidestartshixunCombattype}>知道了</a>
					</div>
					{/*<p className="inviteTipbtn with100 fl">*/}
					{/*<a onClick={this.hidestartshixunCombattype}>知道了</a>*/}
					{/*</p>*/}
				</Modal>
				<Modal
					keyboard={false}
					title="提示"
					visible={this.state.shixunsreplace}
					closable={false}
					footer={null}
				>
					<Spin indicator={antIcon} spinning={this.state.isSpin}>
						<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"
								 style={{marginRight:'51px'}}
								 onClick={() => this.hidestartshixunsreplace(hidestartshixunsreplacevalue)}>知道了</a>
						</div>
					</Spin>
				</Modal>
				<style>{
					`
					.lesson-saved-list-item {
							border-bottom: none!important;
							margin-bottom: 20px;
							background-color: #fff;
					}
					`
				}</style>
				{
					stages && stages.map((item,key)=>{

						return(
							<div className={"lesson-saved-list-item"} key={key} id={"stage_div_"+key} >
								<p className="clearfix title-line">

									<a className="fl ring-blue mr10 mt2">
										<img src={getImageUrl("images/educoder/icon/charpter-white.svg")} className="fl ml3 mt3"/>
									</a>
									<span className="font-18 font-bd lessonvalue" title={item.stage_name}>{item.stage_name}</span>

								</p>
										<div className="detail_for_paragraph clearfix" id={"detail_for_paragraph_"+key}>
											<p className="color-dark-grey mt20 mb25 ml20 mr20 pl28 justify font-15">{item.stage_description}</p>

											<div>

												{
													item.shixuns_list && item.shixuns_list.map((line,index)=>{
														return(
															<div className="clearfix paragraph lineh-30" key={index} onMouseEnter={()=>this.showparagraph(key,index)} onMouseLeave={this.hideparagraph}>

																<li className="fl li-width63">

                                      <span className="progressRing mr10">
                                      {
																				line.complete_status === 1 ?<i className="iconfont icon-wancheng progressRing-over font-18 mt10"></i>
																					:<i className="iconfont icon-bofang progressRing-part font-18 mt10"></i>
																			}
                                      </span>
																	<span className={this.props.current_user&&this.props.current_user.admin===false&&line.shixun_status==="暂未公开"?"paragraph_name color204":"paragraph_name color-grey3"}>
                                        <span className="subject_stage_shixun_index">{key+1}</span>-{index+1}&nbsp;&nbsp;{line.shixun_name}
                                      </span>

																</li>
																{
																	this.props.current_user&&this.props.current_user.admin===false&&line.shixun_status==="暂未公开"?
																		<li className="fr status_li"><span className="fr color204">暂未公开</span></li>
																		:
																		<li className={showparagraph===false?"none":"fr status_li"}>
																			{
																				showparagraphkey===key&&showparagraphindex===index?<div>
																					<Link to={'/shixuns/'+line.identifier+'/challenges'} className="mr30 color-blue_4C shixun_detail pointer fl" target="_blank">查看详情</Link>
																					{line.shixun_status==="暂未公开"?"":<a  onClick={()=>this.startgameid(line.identifier)} className="btn_auto user_bluebg_btn fl" id="shixun_operation" >开始学习</a>}
																				</div>:""
																			}

																		</li>
																}
															</div>)
													})
												}
											</div>
										</div>
							</div>
						)
					})
				}
			</div>
		)
	}
}
export default YslDetailCards;