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 './CompetitionCommonChild/CompetitionContents';
import CompetitionContentsChart from './CompetitionCommonChild/CompetitionContentsChart';
import CompetitionContentsMd from './CompetitionCommonChild/CompetitionContentsMd';
import CompetitionContentspdf from './CompetitionCommonChild/CompetitionContentspdf';

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,
			signupdata: undefined
		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
		if(this.props.match.params.identifier!=null){
			this.getbannerdata();
			// this.setState({
			// 	thiskeys:this.props.location.search.replace('?menu=', '')
			// })
			// 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)
			// })
		}
	}

	componentDidUpdate = (prevProps) => {
		if (prevProps.user != this.props.user) {

			console.log("componentDidUpdatess");
			console.log(this.props.user);
			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);
				})
			}
		}

	}
	//获取头部信息
	getbannerdata=()=>{
		let menuid=this.props.location.search.replace('?menu=', '');
		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: menuid === undefined || menuid === "" ? response.data.competition_modules[0].id : menuid,
					mode: response.data.mode
				})
				if(menuid===undefined||menuid===""){
					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
					)
				}else{
					let newlist=response.data.competition_modules;
					newlist.map((item,key)=>{
						if(`${item.id}`===`${menuid}`){
							this.getrightdata(
								item.id,
								item.module_type,
								item.module_url,
								item.has_url
							)
						}
					})
				}
			}
		}).catch((error) => {
			console.log(error)
		})

		//this.props.user  有可能为空

		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)
		this.props.history.replace(`?menu=${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{

			if (url === "personal") {
				this.Personalregistration()
			} else {
				this.props.history.replace(url);
			}

		}
	}


	Personalregistration = () => {

		let {signupdata} = this.state;
		let urls = `/competitions/${this.props.match.params.identifier}/enroll`;
		if (signupdata.enroll_ended === true) {
			//已截止
			this.props.showNotification(`报名已截止`);
			return;
		}
		if (signupdata.enrolled === true) {
			this.props.showNotification(`你已经报名,不能重复报名！`);
			return;
		}
		const url = `/competitions/${this.props.match.params.identifier}/competition_teams.json`;
		axios.post(url).then((response) => {
			if (response) {
				if (response.data) {
					this.props.showNotification(`报名成功,预祝您夺得桂冠!`);
					this.props.history.replace(urls);
				}
			}
		}).catch((error) => {

		});
	}


	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, module_type, Competitionedittype, signupdata} = 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" ?
							data && data.permission.editable === 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}>
											{data.competition_status === "nearly_published" ? "未发布" : "报名截止"}
										</Button> :
										data.competition_status === "progressing" ?
											<Button type="primary" block className={"Competitionfontsize22"}>
												{data.mode === 2 ?
													<a onClick={() => this.gotocourse()}>立即报名</a> : signupdata && signupdata.personal === true ?
														<a onClick={() => this.gotocourse("personal")}>立即报名</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" selectedKeys={[`${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>

						{/*<Menu mode="inline" className="CompetitionMenu" onClick={(e)=>this.isdownloadpdf(e)}>*/}
						{/*<Menu.Item>*/}
						{/*<a>证书下载</a>*/}
						{/*</Menu.Item>*/}
						{/*</Menu>*/}
					</Sider>

					{module_type === "certificate" ? "" : <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>}

					{module_type === "certificate" ? <Layout className={"teamsLayoutleft CompetitionContents mb30"}>
						<CompetitionContentspdf
							{...this.props}
							{...this.state}
						/>
					</Layout> : ""}
				</Layout>

			</div>

		)
	}
}
export default CompetitionCommon;