import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Menu, Icon, List, Avatar,Row, Col,Tag,Pagination,Alert} from 'antd';
import {getImageUrl} from 'educoder';
import axios from 'axios';
import './Competitionsindex.css';
import NoneData from "../../courses/coursesPublic/NoneData";

class CompetitionsIndex extends Component{
	constructor(props) {
		super(props)
		this.state={
			current: 'all',
			datas:undefined,
			page:1,
			category:undefined

		}
	}

	componentDidMount(){
		window.document.title = '竞赛';
		let{category,page}=this.state;
		this.getdata(category,page)
	}

	getdata=(category,page)=>{
		const Url =`/competitions.json`;
		axios.get(Url,{params:{
				category:category,
				page:page,
				per_page:15,
			}
		}).then((response) => {
				if(response.status===200){
					this.setState({
						datas:response.data.competitions,
						count:response.data.count,
					})
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}


	handleClick = e => {
		this.setState({
			current: e.key,
		});
		let{category,page}=this.state;
		this.getdata(e.key,page)
	};

	PaginationCourse=(pageNumber)=>{
		let {category}=this.state;
		this.setState({
			page: pageNumber,
		})
		this.getdata(category,pageNumber);
	}

	render() {
		let {datas,page,count}=this.state;


		return (
			<div>
				<div className="clearfix">
					<div>
						<div className="clearfix">
							<style>
								{
									`
									.courses-head{
												width: 100%;
												height: 300px;
												background-color: #081C4B;
												background-size: cover;
												background-position: center;
												background-repeat: no-repeat;
										}

									`
								}
							</style>
							<div className="courses-head pr Competitionshead " style={{"background":`url(${getImageUrl(`images/educoder/competitions/courses.jpg`)})`}}>
								<div className="edu-txt-center pathNavLine">
									<div className="inline path-nav"></div>
								</div>
							</div>

							<div className="competitionstitle mb20">
								<div className="competitionstitle2">
									<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
										<Menu.Item key="all" className={"competitionmr50"}>
										   <span className={"competitionsvalue"}>全部</span>
										</Menu.Item>
										<Menu.Item key="nearly_published" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>即将发布</span>
										</Menu.Item>
										<Menu.Item key="progressing" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>进行中</span>
										</Menu.Item>
										<Menu.Item key="ended" className={"competitionmr50"}>
											<span className={"competitionsvalue"}>往期比赛</span>
										</Menu.Item>
									</Menu>
								</div>
							</div>

							<div className={"educontent clearfix mtf10 CompetitionsIndex mb20"}>

								{datas===undefined?"":datas.length===0?"":<List
									itemLayout="vertical"
									size="large"
									dataSource={datas&&datas}
									renderItem={(item,key) => (
										<a target="_blank"
											 href={item.competition_status === "ended" ? `/competitions/${item.identifier}/common_header` : item.competition_status === "nearly_published" ? item.permission.editable == true ? `/competitions/${item.identifier}/common_header` : null : item.competition_status === "progressing" ? `/competitions/${item.identifier}/common_header` : null}
											 className={item.competition_status==="ended"?"competitionstitlesshou":item.competition_status==="nearly_published"?
												 item.permission.editable == true ? "competitionstitlesshou" : "endedfont" : "competitionstitlesshou"}
										  >

											<div className={"CompetitionsList"} >
												{item.competition_status==="nearly_published"?
													item.permission.editable == true ? "" :
														<div className={"CompetitionsListzhezhao"}>即将发布 敬请期待</div> : ""}
												{/*<div className={"CompetitionsListzhezhao"}>即将发布 敬请期待</div>*/}
											{/*{item.description===null||item.description===undefined||item.description===""?<style>*/}
												{/*{*/}
													{/*`*/}
												 {/*//  .CompetitionsIndex .ant-list-vertical .ant-list-item-action{*/}
													{/*// 		margin-top:50px;*/}
												 {/*// }*/}
												{/*`*/}
												{/*}*/}
											{/*</style>:""}*/}
											<img className={"competitonimg"}
													 src={item.competition_status==="ended"?getImageUrl(`images/educoder/competitions/groups1.png`):item.competition_status==="nearly_published"?getImageUrl(`images/educoder/competitions/groups2.png`):item.competition_status==="progressing"?getImageUrl(`images/educoder/competitions/groups3.png`):""} />
											<List.Item
												key={key}
												actions={[
													<span>竞赛时间: {item.start_time}～{item.end_time}</span>,
													<span>报名截止时间：{item.enroll_end_time}</span>,
												]}
												extra={
													<div className={"pt50"} style={{"width":'305px'}}>
														<Row gutter={16}>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">奖金</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">浏览数</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexdadels">报名数</div>
															</Col>
														</Row>

														<Row gutter={16}>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">¥{item.bonus}</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">{item.competition_status==="nearly_published"?"--":item.visits_count}</div>
															</Col>
															<Col className="gutter-row" span={6}>
																<div className="gutter-box CompetitionsIndexbottomvalue">{item.competition_status==="nearly_published"?"--":item.member_count}</div>
															</Col>
														</Row>
													</div>
												}
											>
												<List.Item.Meta
													title={<a className={item.competition_status==="ended"?"competitionstitlesshou":item.competition_status==="nearly_published"?
														item.permission.editable == true ? "competitionstitlesshou" : "endedfont" : "competitionstitlesshou"}>
														<a target="_blank" className={"competitionstitles"}
															 href={item.competition_status === "ended" ? `/competitions/${item.identifier}/common_header` : item.competition_status === "nearly_published" ? item.permission.editable == true ? `/competitions/${item.identifier}/common_header` : null : item.competition_status === "progressing" ? `/competitions/${item.identifier}/common_header` : null}
													>{item.name}{item.sub_title===null?"":`——${item.sub_title}`}</a>
														{/*<span>{item.sub_title===null?"":*/}
															{/*<Tag className="competitionsrelative" color="#87d068">{item.sub_title}</Tag>}*/}
														{/*</span>*/}
													</a>}
												/>
												<span className={"span666"}>{item.description}</span>
											</List.Item>
											</div>
										</a>

									)

									}
								/>}

								{count===undefined?"":count >15 ?<div className="mb40 edu-txt-center padding20-30"
								>

									<Pagination
										showQuickJumper
										defaultCurrent={1}
										pageSize={15}
										total={count===undefined?"":count}
										current={page}
										onChange={this.PaginationCourse}
									/>

								</div>:""}

								{
									datas===undefined?"":datas && datas.length===0? <NoneData></NoneData>:""
								}
							</div>

						</div>

					</div>
				</div>
			</div>
		)
	}
}
export default CompetitionsIndex;