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 NoneData from "../../courses/shixunHomework/shixunHomework";

import './CompetitionCommon.css';

const { Header, Footer, Sider, Content } = Layout;

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

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

	getrightdata=(id,typeid,module_url,has_url)=>{
		console.log(id,typeid,module_url,has_url)
		this.setState({
			module_id:id,
			module_type:typeid
		})
		if(has_url===false){
			let url=`${module_url}`;
			axios.get(url).then((response) => {
				if(response.status===200){
					this.setState({
						mdContentdata:response.data
					})
				}
			}).catch((error) => {
				console.log(error)
			})
		}

	}

	render() {
		let {data,bannerdata,module_type,module_id,mdContentdata}=this.state;
   console.log(module_type)
		return (
			data===undefined?"":<div className={"educontent clearfix mt20 "}>

					<Breadcrumb separator=">">
						<Breadcrumb.Item href="">在线竞赛</Breadcrumb.Item>
						<Breadcrumb.Item href="">{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}>
								<img src={getImageUrl(bannerdata&&bannerdata.image_url)}/>
							</Col>
							<Col className={"CompetitionCommonbannerfont mt50"} span={9}>

									<Col className={"competitionbannerdiv"}>{data&&data.name}</Col>

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

									<Col className={"competitionbannerdiv mt20"}>
											<Row gutter={16}>
												<Col className="gutter-row" span={6}>
													<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">奖金</div>
												</Col>
												<Col className="gutter-row" span={6}>
													<div className="gutter-box CompetitionsIndexdadels Competitioncolor77">浏览数</div>
												</Col>
												<Col className="gutter-row" 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" span={6}>
													<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">{data.competition_status==="nearly_published"?"--":data&&data.visits_count}</div>
												</Col>
												<Col className="gutter-row" span={6}>
													<div className="gutter-box CompetitionsIndexbottomvalue Competitioncolor516">{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>:
										<Button type="primary" block className={"Competitionfontsize22"}>
											{data.competition_status==="nearly_published"?
												this.props.current_user&&this.props.current_user.admin===true?<Link to={`/newcompetitions/${this.props.match.params.identifier}/enroll`}>立即报名</Link>:this.props.current_user&&this.props.current_user.business===true?<Link to={`/newcompetitions/${this.props.match.params.identifier}/enroll`}>立即报名</Link>:<a>立即发布</a>:<Link to={`/newcompetitions/${this.props.match.params.identifier}/enroll`}>立即报名</Link>}
										</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={['1']}>

									{data&&data.competition_modules.map((item,key)=>{
										return(
											<Menu.Item key={item.position}>
												{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>}
											</Menu.Item>
										)
									})}

							  </Menu>
							</Sider>

							<Layout className={"teamsLayoutleft"}>
								{this.state.module_type==="chart"?<CompetitionContentsChart
									{...this.props}
									{...this.state}
								/>:<CompetitionContents
									{...this.props}
									{...this.state}
								/>}
								{/*<CompetitionContentsChart*/}
									{/*{...this.props}*/}
									{/*{...this.state}*/}
								{/*/>*/}
							</Layout>

						</Layout>

			</div>

		)
	}
}
export default CompetitionCommon;