import React, { Component } from 'react';
import {Button,Layout,Tabs,Icon, Card, Avatar, Row, Col ,Table} from 'antd';
import {markdownToHTML,getImageUrl} from 'educoder';
import axios from 'axios';
import NoneData from "../../courses/shixunHomework/shixunHomework";

const { Content } = Layout;
const { TabPane } = Tabs;
const { Meta } = Card;

class CompetitionContents extends Component{
	constructor(props) {
		super(props)
		this.state={
			personal:undefined
		}
	}

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

	derivefun=(url)=>{
		axios.get(url).then((response)=>{
			if(response === undefined){
				return
			}
			if(response.data.status&&response.data.status===-1){
				this.props.showNotification(response.data.message);
			}else if(response.data.status&&response.data.status===-2){
				// if(response.data.message === "100"){
				// 	// 已超出文件导出的上限数量（100 ），建议：
				//
				// 	this.setState({
				// 		DownloadType:true,
				// 		DownloadMessageval:100
				// 	})
				// }else {
				// 	//因附件资料超过500M
				// 	this.setState({
				// 		DownloadType:true,
				// 		DownloadMessageval:500
				// 	})
				// }
				this.props.showNotification(response.data.message);
			}else {
				// this.props.showNotification(`正在下载中`);
				// window.open("/api"+url, '_blank');
				this.props.slowDownload(url);
			}
		}).catch((error) => {
			console.log(error)
		});
	}
	render() {
		const operations = <div>
				<Button className={"fr"} type="primary" ghost onClick={()=>this.props.Competitionedit()}>编辑</Button>
				<Button className={"fr mr20"} type="primary" ghost>
					<a onClick={()=>this.derivefun(`/competitions/${this.props.match.params.identifier}/charts.xlsx`)}>导出</a>
				</Button>
			</div>
		const columns = [
			{
				title: 'usersum',
				dataIndex: 'usersum',
				key: 'name',
				render: text => <span className={"color-blue"}>{text}</span>,
			},
			{
				title: 'userimg',
				dataIndex: 'userimg',
				key: 'userimg',
				render:  (text, record) =>(
					<span href={`/users/${record.user_login}`} className="color-dark">
						<img className={"Competitionuserimg"} src={getImageUrl(`images/${record.userimg===null?`avatars/User/0?1442652658`:record.userimg}`)}/>
					</span>),
			},
			{
				title: 'username',
				dataIndex: 'username',
				key: 'username',
				render: text => <span title={text}>{text}</span>,
			},
			{
				title: 'school',
				dataIndex: 'school',
				key: 'school',
				render: text => <span title={text}>{text}</span>,
			},
			{
				title: 'spendtime',
				dataIndex: 'spendtime',
				key: 'spendtime',
				render: text => <span>{text}</span>,
			},
			{
				title: 'score',
				dataIndex: 'score',
				key: 'score',
				render: text => <span className={"color-blue"}>{text}</span>,
			},
		];

		const data = [];
		let {chart_rules,chartdata}=this.props;
		let {personal}=this.state;
		 chartdata===undefined?"":chartdata.teams.length===0||chartdata.teams.length<3?"":chartdata.teams.map((item,key)=>{

		 	if(key>2){
				let list={
					usersum:key+1,
				  userimg:item.user_image,
					username:personal===undefined||personal===null?item.record_user_name:personal===true?item.record_user_name:item.team_name,
					school:item.school_name,
					spendtime:item.spend_time,
					score:item.score,
					user_login:item.user_login
				}
				data.push(list)
			}
		 })


		//
    //console.log(chartdata&&chartdata.teams)
    return (
			<div>
				{chart_rules===undefined?"":<Tabs  onChange={(e)=>this.props.Competitioncallback(e)} activeKey={this.props.tabkey} tabBarExtraContent={this.props.current_user&&this.props.current_user.admin===true||this.props.current_user&&this.props.current_user.business===true?this.props.Competitionedittype===false?this.props.has_url===false?operations:"":"":""}>
					{chart_rules.stages.map((item,key)=>{
						return(
							<TabPane tab={item.name} key={item.id===null?0:item.id}>
								{chart_rules.rule_contents.map((items,keys)=>{
									if(item.id===items.competition_stage_id){
										return(
											<Content key={keys} className={"markdown-body "} dangerouslySetInnerHTML={{__html: markdownToHTML(items.content===undefined||items.content===null?"":items.content).replace(/▁/g, "▁▁▁")}}></Content>
										)
									}else if(item.id===null&&items.competition_stage_id===0){
										return(
											<Content key={keys} className={"markdown-body "} dangerouslySetInnerHTML={{__html: markdownToHTML(items.content===undefined||items.content===null?"":items.content).replace(/▁/g, "▁▁▁")}}></Content>
										)
									}
								})}
							</TabPane>
							)
					})}
				</Tabs>}


			  <Col className="gutter-row Competitioncharts mt30 mb30">总排名</Col>
				{chartdata===undefined?"":chartdata.teams.length===0?<Col className="gutter-row Competitioncharts mt30 mb30 rankbeicenter">
					<img  src={getImageUrl(`images/educoder/competitions/trophy.png`)}/>
					<div className={"rankbei mt10"}>要抓住一切机会，向所有人证明你自己，证明你能够迎接荣耀</div>
				</Col>:""}
				<Row calssName={"Competition399"}>
					{chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{


						if(key===1){
							return(
								<Col className="mt40" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>
									<Card
										className={"Competitionthird"}
										cover={
											<div className={"Competitionthirdbox center"}>
												<li className="pr Competitioncenter">
													<img src={getImageUrl("images/educoder/huangguan-two.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(`images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
															<p className="task-hide rankName mt5 jinshaifont">{personal===undefined||personal===null?item.record_user_name:personal===true?item.record_user_name:item.team_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score}分</div>
											}
										/>
									</Card>
								</Col>

							)
						}

					})}
					{chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{
						if(key===0){
							return(
								<Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 1 }}>
									<Card
										className={"Competitionfirst"}
										cover={
											<div className={"Competitionfirstbox center"}>
												<li className="pr Competitioncenter">
													<img src={getImageUrl("images/educoder/huangguan.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(`images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
															<p className="task-hide rankName mt5 jinshaifont">{personal===undefined||personal===null?item.record_user_name:personal===true?item.record_user_name:item.team_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottoms"}>{item.score}分</div>
											}

										/>
									</Card>

								</Col>
							)
						}
					})}
					{chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{
						if(key===2){
							return(
								<Col className="mt30" xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 1 }}>
									<Card
										className={"Competitionsecondary "}
										cover={
											<div className={"Competitionsecondarybox center"}>
												<li className=" pr Competitioncenter ">
													<img src={getImageUrl("images/educoder/huangguan-three.png")}/>
													<div className={"mt10"}>
														<a href={`/users/${item.user_login}`} className="color-dark">
															<img className={"rankingimg"} src={getImageUrl(`images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
															<p className="task-hide rankName mt5 jinshaifont">{personal===undefined||personal===null?item.record_user_name:personal===true?item.record_user_name:item.team_name}</p>
														</a>
													</div>
												</li>
											</div>
										}
									>
										<Meta
											title={<div className={"center"}>
												<div className={"rankfonttop"}>{item.school_name}</div>
												<div className={"rankfontmid"}>{item.spend_time}</div>
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score}分</div>
											}

										/>
									</Card>
								</Col>
							)
						}



					})}

				</Row>
				{chartdata===undefined?"":chartdata.user_ranks.length===0?"":<div className={"youranklist mt50"}>
					<style>
						{
							`
								.ant-col-9 {
						       width: 35.5%;
						  	}
							`
						}

					</style>
					{chartdata.user_ranks.map((item,key)=>{

					return(
						<Row type="flex" key={key}>
							<Col span={4} order={1}>
								<span className={"ranknames"}>您当前排名:{item.rank}</span>
							</Col>
							<Col className="userranksclass" span={3} order={2}>
								{personal===undefined||personal===null?item.record_user_name:personal===true?item.user_name:item.team_name}
							</Col>
							<Col className="textleft" span={9} order={3}>
								{/*{item.team_name}*/}
							</Col>
							<Col span={3} order={4}>
								{item.cost_time}
							</Col>
							<Col className="textright" span={3} order={5}>
								<span className={"ranknameslast"}>{item.score}</span>
							</Col>
						</Row>
						)
					})}
				</div>}
				<Row className={"mt20 mb80"}>
					<style>
						{
							`
							 .ant-table-tbody > tr > td:nth-last-child(4){
		   								//  line-height: 63px;
											// width: 300px;
											// height: 96px;
											// // display: inline-flex;
											// overflow: hidden;
											// text-overflow: ellipsis;
											// white-space: nowrap;
											    width: 150px;
							 }
							.ant-table-tbody > tr > td:nth-last-child(3){
											// line-height: 63px;
											// width: 290px;
											// height: 96px;
											// display: inline-block;
											// overflow: hidden;
											// text-overflow: ellipsis;
											// white-space: nowrap;
								}
								.ant-table-tbody>tr>td, .ant-table-thead>tr>th {
										padding: 5px;
								}
							`
						}
					</style>
					{chartdata===undefined?"":chartdata.teams.length===0||chartdata.teams.length<4?"":<Table className="Competitiontransparent" columns={columns} dataSource={data} showHeader={false} pagination={false}/>}
				</Row>


			</div>

		)
	}
}
export default CompetitionContents;