forgeplus-react/src/modules/courses/competitions/Competitioncommon/CompetitionCommonChild/CompetitionContentsChart.js

import React, { Component } from 'react';
import {Button,Layout,Tabs,Icon, Card, Avatar, Row, Col ,Table,Badge} from 'antd';
import {markdownToHTML,getImageUrl,getRandomNumber} from 'educoder';
import axios from 'axios';

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)
		})
		this.props.MdifHasAnchorJustScorll();
	}

	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() {
		this.props.MdifHasAnchorJustScorll();
		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?${getRandomNumber(true)}`)}>导出</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) =>(
					<a href={`/users/${record.user_login}`} target={"_blank"} className="color-dark">
						<div className={"relativef"}>
					    	<img className={"Competitionuserimg mb10"} src={getImageUrl(`images/${record.userimg===null?`avatars/User/0?1442652658`:record.userimg}`)}/>
						  	<div className={"competimgabsoluteijmg"}><Badge count={record.competition_prize} style={{ backgroundColor: '#459BE5' }} title={record.competition_prize}/></div>
						</div>
					</a>),
			},
			{
				title: 'username',
				dataIndex: 'username',
				key: 'username',
				render: text => <span title={text} title={text}>{text}</span>,
			},
			{
				title: 'school',
				dataIndex: 'school',
				key: 'school',
				render: text => <span title={text} 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 datas = [];
		let {chart_rules, chartdata, data} = this.props;
		let {personal}=this.state;

		if(this.props&&this.props.mode!=1){

			columns.some((item,key)=> {
					if (item.title === "spendtime") {
						columns.splice(key, 1)
						return true
					}
				}
			)

		}

		{chartdata===undefined?"":chartdata.teams.length===0?"":chartdata.teams.map((item,key)=>{
				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<50?"< 50 分":item.score,
					user_login:item.user_login,
					competition_prize:item.competition_prize
				}
				datas.push(list)
		 })}

		// console.log(this.props&&this.props.mode)
		// console.log(columns)

    return (
			<div>
				<style>
					{
						`
						.ant-tabs-nav .ant-tabs-tab{
								font-size: 20px;
								margin: 0 10px 0 0;
						}
						.ant-badge{
								width:90px;
						}
						.ant-badge sup{
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						`
					}
				</style>
				{chart_rules === undefined ? "" :
					<Tabs onChange={(e) => this.props.Competitioncallback(e)} activeKey={this.props.tabkey}
								tabBarExtraContent={data && data.permission.editable === 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}`} target={"_blank"} className="color-dark ">
															<div className={"relativef"}>
																<img className={"rankingimg"} src={getImageUrl(`images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
																<div className={"competimgabsolute"}><Badge count={item.competition_prize} style={{ backgroundColor: '#459BE5' }} title={item.competition_prize}/></div>
															</div>
															<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"} title={item.school_name}>{item.school_name}</div>
												{this.props&&this.props.mode===1?<div className={"rankfontmid"}>{item.spend_time}</div>:""}
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score<50?"< 50 分":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}`} target={"_blank"} className="color-dark">
														<div className={"relativef"}>
															<img className={"rankingimg"} src={getImageUrl(`/images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
											      	<div className={"competimgabsolute"}><Badge count={item.competition_prize} style={{ backgroundColor: '#459BE5' }} title={item.competition_prize}/></div>
														</div>
															<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"} title={item.school_name}>{item.school_name}</div>
												{this.props&&this.props.mode===1?<div className={"rankfontmid"}>{item.spend_time}</div>:""}
											</div>}
											description={
												<div className={"rankfontbottoms"}>{item.score<50?"< 50 分":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}`} target={"_blank"} className="color-dark">
															<div className={"relativef"}>
																	<img className={"rankingimg"} src={getImageUrl(`images/${item.user_image===null?`avatars/User/0?1442652658`:item.user_image}`)} />
																  <div className={"competimgabsolute"}><Badge count={item.competition_prize} style={{ backgroundColor: '#459BE5' }} title={item.competition_prize}/></div>
															</div>
															<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"} title={item.school_name}>{item.school_name}</div>
												{this.props&&this.props.mode===1?<div className={"rankfontmid"}>{item.spend_time}</div>:""}
											</div>}
											description={
												<div className={"rankfontbottom"}>{item.score<50?"< 50 分":item.score}分</div>
											}

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



					})}

				</Row>
				{chartdata===undefined?"":chartdata.user_ranks.length===0?"":<div className={"youranklist mt50"}>
					<style>
						{
							`
								.ant-col-9 {
						       width: 35.5%;
						  	}
						  	.col13{
									width:13%;
									text-align:left;
						  	}
						  	.col24{
								  width: 24%;
									text-align: left;
									padding-left: 33px;
						  	}
						  	.col15{
								  width: 14%;
									text-align: right;
						  	}
						  	.col12{
						      width: 12%;
									text-align: right;
						  	}
						  	.col10{
						  		 width: 10%;
						  	}
						  	.col6{
						       width: 6%;
						  	}
							`
						}

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

					return(
						<Row type="flex" key={key}>
							<Col span={4} order={1} className={"col13"}>
								<span className={"ranknames"}>您当前排名:{item.rank}</span>
							</Col>
							<Col className="userranksclass" span={3} order={2}  className={"col24"}>
								{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>
							{item.cost_time=== "--"?<Col span={3} order={4} className={"col6"}>
								{this.props&&this.props.mode===1?item.cost_time:""}
							</Col>:<Col span={3} order={4} className={"col10"}>
								{this.props&&this.props.mode===1?item.cost_time:""}
							</Col>}
							{item.cost_time=== "--"?<Col className="textright" span={3} order={5} className={"col15"}>
								<span className={"ranknameslast"}>{item.score<50?"< 50 分":item.score}</span>
							</Col>:<Col className="textright" span={3} order={5} className={"col12"}>
									<span className={"ranknameslast"}>{item.score<50?"< 50 分":item.score}</span>
								</Col>}
						</Row>
						)
					})}
				</div>}
				<Row className={"mt20 mb80"}>
					<style>
						{
							`
							 .ant-table-tbody > tr > td:nth-last-child(4){
									  overflow: hidden;
										max-width: 100px;
										-o-text-overflow: ellipsis;
										text-overflow: ellipsis;
										white-space: nowrap;
										cursor: default;
							 }
							.ant-table-tbody > tr > td:nth-last-child(3){
										overflow: hidden;
										max-width: 200px;
										-o-text-overflow: ellipsis;
										text-overflow: ellipsis;
										white-space: nowrap;
										cursor: default;
								}
								.ant-table-tbody>tr>td, .ant-table-thead>tr>th {
										padding: 5px;
								}
							`
						}
					</style>
					{chartdata === undefined ? "" : chartdata.teams.length === 0 ? "" :
						<Table className="Competitiontransparent" columns={columns} dataSource={datas} showHeader={false}
									 pagination={false}/>}
				</Row>


			</div>

		)
	}
}
export default CompetitionContents;