import React, { Component } from 'react';
import { Breadcrumb,Layout,Table, Divider, Tag,Badge,Row, Col,Button, Menu, Icon} from 'antd';
import { Link } from 'react-router-dom';
import axios from 'axios';
import {markdownToHTML,getImageUrl} from 'educoder';
import CompetitionContents from './CompetitionContents';
import CompetitionContentsChart from './CompetitionContentsChart';
import CompetitionContentsMd from './CompetitionContentsMd';
import NoneData from "../../courses/shixunHomework/shixunHomework";

import './CompetitionCommon.css';

const {Sider } = Layout;

class CompetitionCommon extends Component{
	constructor(props) {
		super(props)
		this.state={
				data:undefined,
			  bannerdata:undefined,
			  module_type:undefined,
			  mdContentdata:undefined,
			  chart_rules:undefined,
		  	Competitionedittype:false,
			  chartdata:undefined,
			  has_url:false
		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
		if(this.props.match.params.identifier!=null){
			this.getbannerdata();
			// let url=`/competitions/${this.props.match.params.identifier}.json`;
			// axios.get(url).then((response) => {
			// 	if(response.status===200){
			// 		this.setState({
			// 			bannerdata:response.data
			// 		})
			// 	}
			// }).catch((error) => {
			// 	console.log(error)
			// })
		}
	}

	getbannerdata=()=>{
		let url=`/competitions/${this.props.match.params.identifier}/common_header.json`;
		axios.get(url).then((response) => {
			if(response.status===200){
				this.setState({
					data:response.data,
					thiskeys:response.data.competition_modules[0].id
				})
				this.getrightdata(
					response.data.competition_modules[0].id,
					response.data.competition_modules[0].module_type,
				  response.data.competition_modules[0].module_url,
					response.data.competition_modules[0].has_url
				)
			}
		}).catch((error) => {
			console.log(error)
		})

   if(this.props.user&&this.props.user.login!= ""){
		 const zul = `/competitions/${this.props.match.params.identifier}/competition_staff.json`;
		 axios.get((zul)).then((result) => {
			 if (result) {
				 if (result.data) {
					 this.setState({
						 signupdata:result.data
					 })
				 }
			 }
		 }).catch((error) => {
	     //console.log(error);
		 })
	 }

	}

	getrightdatas=(e)=>{
     let keys=parseInt(e.key);
	   this.getlistdata(keys)
	}

	getlistdata=(keys,listkey)=>{

		let{data}=this.state;
		this.setState({
			thiskeys:keys
		})
		data&&data.competition_modules.map((item,key)=>{
			if(item.module_type!="enroll") {
				if (keys === item.id) {
					this.getrightdata(item.id, item.module_type, item.module_url, item.has_url, listkey)
					return
				}
			}
		})
	}

	getnewchartdata=(typeid,tabkey)=>{
		if(typeid==="chart"){
			let url=`/competitions/${this.props.match.params.identifier}/chart_rules.json`;
			axios.get(url)
				.then((response) => {
					if(response.status===200){
						this.setState({
							chart_rules:response.data,
							tabkey:tabkey===undefined?response.data.stages[0].id===null?"0":`${response.data.stages[0].id}`:tabkey
						})


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

	getrightdata=(id,typeid,module_url,has_url,listkey)=>{
		// if(typeid==="enroll"){
		// 	this.props.history.replace(`/competitions/${this.props.match.params.identifier}/enroll`);
    //   return
		// }

	  this.getnewchartdata(typeid,listkey)

		if(has_url===false){
			let url=`${module_url}`;
			axios.get(url).then((response) => {
				if(response.status===200){

					if(typeid==="chart"){
						this.setState({
							chartdata:response.data
						})
					}else{
						this.setState({
							mdContentdata:response.data
						})
					}

				}
			}).catch((error) => {
				console.log(error)
			})
		}else{
	   if(module_url.substring(0,7)=='http://'||module_url.substring(0,8)=='https://') {
				// window.location.href= module_url
			 window.open(module_url)
			}else{
			 window.open(`https://${module_url}`)
				// window.location.href=;
			}
			return
		}

		this.setState({
			module_id:id,
			module_type:typeid,
			has_url:has_url
		})

	}

	Competitionedit=()=>{
   this.setState({
		 Competitionedittype:true
	 })
	}

	hideCompetitionedit=()=>{
		this.setState({
			Competitionedittype:false
		})

	}

	gotocourse=(url)=>{
		if(this.props.checkIfLogin()===false){
			this.props.showLoginDialog()
			return
		}
		if(this.props.checkIfProfileCompleted()===false){
			this.props.showProfileCompleteDialog()
			return
		}
		if(url===undefined){
			let {data,signupdata}=this.state;
			if(signupdata.enrolled===true){
				this.props.history.replace(`/courses/${data.course_id}`);
			}else{
				if(data.member_of_course===true){
					this.props.history.replace(`/courses/${data.course_id}`);
				}else{
        // 以学生身份调用加入课堂 进入课堂首页
					let url="/courses/apply_to_join_course.json"
					axios.post(url, {
						  invite_code:data.invite_code,
							student:1
						}
					).then((response) => {
						if(response.data.status===0){
							this.props.history.replace(`/courses/${data.course_id}`);
						}
					})
				}
			}
		}else{
			this.props.history.replace(url);
		}
	}

	Competitioncallback=(key)=>{
    this.setState({
			tabkey:key
		})
		let url=`/competitions/${this.props.match.params.identifier}/charts.json`;
		axios.get(url,{params:{
				stage_id:key===0||key===null?undefined:key
			}}).then((response) => {
			if(response.status===200){
				this.setState({
					chartdata:response.data
				})
			}
		}).catch((error) => {
			console.log(error)
		})

	}

	render() {
		let {data,has_url,module_type,Competitionedittype,mdContentdata}=this.state;

		return (
			data===undefined?"":<div className={"educontent clearfix mt20 "}>

					<Breadcrumb separator=">">
						<Breadcrumb.Item><Link to={"/competitions"}>在线竞赛</Link></Breadcrumb.Item>
						<Breadcrumb.Item>{data&&data.name}</Breadcrumb.Item>
					</Breadcrumb>

					<div className={"mt10 relative"}>
					 
						<Row className={"CompetitionCommonbanner"}>
							{data.competition_status==="nearly_published"?
								this.props.current_user&&this.props.current_user.admin===true?"":this.props.current_user&&this.props.current_user.business===true?"":<div className={"CompetitionsListzhezhao"}>即将发布 敬请期待</div>:""}
							<img className={"Commonimg"}
									 src={data.competition_status==="ended"?getImageUrl(`images/educoder/competitions/groups1.png`):data.competition_status==="nearly_published"?getImageUrl(`images/educoder/competitions/groups2.png`):data.competition_status==="progressing"?getImageUrl(`images/educoder/competitions/groups3.png`):""} />
							<Col span={15} className={"Commonimgbox"}>
								<img className={"image_urlbox"} src={data===undefined?getImageUrl(`images/educoder/competitions/mainbanner.jpg`):data.avatar_url===null?getImageUrl(`images/educoder/competitions/mainbanner.jpg`):getImageUrl(data.avatar_url)}/>
							</Col>
							<Col className={"CompetitionCommonbannerfont"} span={9}>

									<Col className={data&&data.name.length>15?"competitionbannerdiv mt30":"competitionbannerdiv mt30"}>{data&&data.name}</Col>

									<Col className={"competitionbannerdiv mt10"}>
										<Col className={"Competitioncolor9b"}>竞赛时间：<span className={"color000"}>{data&&data.start_time}～{data&&data.end_time}</span></Col>
											{/*<Col></Col>*/}
									</Col>

									<Col className={"competitionbannerdiv mt10"}>
											<Row gutter={16}>
												<Col className="gutter-row" span={6}>
													<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">奖金</div>
												</Col>
												<Col className="gutter-row ml20 rankbeicenter" span={6}>
													<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">浏览数</div>
												</Col>
												<Col className="gutter-row rankbeicenter" span={6}>
													<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">报名数</div>
												</Col>
											</Row>

											<Row gutter={16}>
												<Col className="gutter-row" span={6}>
													<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">¥{data&&data.bonus}</div>
												</Col>
												<Col className="gutter-row ml20 rankbeicenter" span={6}>
													<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">{data.competition_status==="nearly_published"?"--":data&&data.visits_count}</div>
												</Col>
												<Col className="gutter-row rankbeicenter" span={6}>
													<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516" onClick={data.competition_status==="nearly_published"?"":()=>this.gotocourse(`/competitions/${this.props.match.params.identifier}/enroll`)}>{data.competition_status==="nearly_published"?"--":data&&data.member_count}</div>
												</Col>
											</Row>
									</Col>

								{data.competition_status==="ended"?<style>
									{
										`
										.Competitionfontsize22{
													height: 50px;
													border-radius: 4px;
											}
										`
									}
								</style>:<style>
									{
										`
										.Competitionfontsize22{
													height: 50px;
													background: rgba(76,172,255,1);
													border-radius: 4px;
											}
										`
									}
								</style>}
									<Col className={"competitionbannerdiv mt20"}>
										{data.competition_status==="ended"?
										 <Button type="primary" block className={"Competitionfontsize22"} disabled={true}>
										   已结束
									  </Button>:data.enroll_end===true?<Button type="primary" block className={"Competitionfontsize22"} disabled={true}>
													报名截止
												</Button>:
											data.competition_status==="progressing"?<Button type="primary" block className={"Competitionfontsize22"}>
												{data.mode===2?<a onClick={()=>this.gotocourse()}>立即报名</a>:<a onClick={()=>this.gotocourse(`/competitions/${this.props.match.params.identifier}/enroll`)}>立即报名</a>}
										</Button>:""}
									</Col>
									<Col className={"mt10 Competitionfontsize16"}>{data&&data.enroll_end_time===null?"":`报名截止时间：${data&&data.enroll_end_time}`}</Col>
							</Col>
						</Row>
					</div>

						<Layout className={'teamsLayout mt40'}>
							<Sider>
								<Menu mode="inline" className="CompetitionMenu" defaultSelectedKeys={[`${this.state.thiskeys}`]} onClick={(e)=>this.getrightdatas(e)}>
									{data&&data.competition_modules.map((item,key)=>{
										if(item.module_type!="enroll"){
											return(
												<Menu.Item key={item.id}>
													{/*{item.has_url===false?<span*/}
														{/*// onClick={()=>this.getrightdata(item.id,item.module_type,item.module_url,item.has_url)}*/}
													{/*>{item.name}</span>:<a*/}
														{/*// target="_blank"*/}
														{/*href={item.module_url}*/}
														{/*// onClick={()=>this.getrightdata(item.id,item.module_type)}*/}
													{/*>{item.name}</a>}*/}
													<a>{item.name}</a>
												</Menu.Item>
											)
										}
									})}
							  </Menu>
							</Sider>

							<Layout className={"teamsLayoutleft CompetitionContents mb30"}>
								{this.state.module_type==="chart"?Competitionedittype===false?<CompetitionContentsChart
									{...this.props}
									{...this.state}
									Competitionedit={()=>this.Competitionedit()}
									Competitioncallback={(e)=>this.Competitioncallback(e)}
								/>:"":Competitionedittype===false?<CompetitionContents
									Competitionedit={()=>this.Competitionedit()}
									{...this.props}
									{...this.state}
								/>:""}
								{/*<CompetitionContentsChart*/}
									{/*{...this.props}*/}
									{/*{...this.state}*/}
								{/*/>*/}
								{Competitionedittype===true?<CompetitionContentsMd
									hideCompetitionedit={()=>this.hideCompetitionedit()}
									getlistdata={(keys,listkey)=>this.getlistdata(keys,listkey)}
									Competitioncallback={(e)=>this.Competitioncallback(e)}
									{...this.props}
									{...this.state}
								/>:""}
							</Layout>

						</Layout>

			</div>

		)
	}
}
export default CompetitionCommon;