educoder/public/react/src/modules/osshackathon/Osshackathon.js

import React, {Component} from 'react';
import axios from 'axios';
import {SnackbarHOC, WordsBtn,getImageUrl,markdownToHTML} from 'educoder';
import {Row, Col,Input,Divider,Card,Button} from 'antd';
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
import { CNotificationHOC } from '../courses/common/CNotificationHOC';
import './Osshackathon.css';
const { Search } = Input;
class Osshackathon extends Component {

	constructor(props) {
		super(props)
		this.state = {
			page:1,
			limit:10,
			search:undefined,
			data:undefined
		}
	}

	componentDidMount() {
		this.getosshackathon();

	}
	getosshackathon=()=>{
		let {page,limit,search}=this.state;
		let url=`/osshackathon.json`;
		axios.get(url,{params:{
				page:page,
				limit:limit,
				search:search,
			}}).then((result)=>{
			if(result.status==200){
				console.log(result)
				this.setState({
						data:result.data
				})
			}
		}).catch((error)=>{
			console.log(error);
		})
	}

	componentDidUpdate = (prevProps) => {


	}

	render() {
		let{data}=this.state;
		console.log(this.state.data)

		return (
			<div className="newMain clearfix  newMainybot">
				<style>
					{
						`
						.ant-btn-primary{
					background: #4CACFF;
					border-color: #4CACFF;
						}
						`
					}
				</style>

				<div className={"educontent  mb20 persmstyle"} style={{width: "1200px", marginTop: "26px"}}>

					<div className="registrationback"
							 style={{"background": `url(${getImageUrl(`images/educoder/competitions/tipregistit.jpg`)})`,"height":"360px"}}
					></div>

					<Row className={"mt20"}>

						<Col span={6}>
							<Search
						  className={"Searchant-btn-primary"}
							placeholder="请输入项目名称进行搜索"
							enterButton="搜索"
							size="large"
							onSearch={value => console.log(value)}
							/>
						</Col>

						<Col span={3} className={"fr textright"}>
								<div>
									 报名整数：<span className={"color-red"}>{data&&data.hackathon.hackathon_users_count}</span> 个
								</div>
						</Col>

					</Row>

					<Row className={"mt20"}>
						<Col span={6} className={"Osshackathonfont"}>
							{data&&data.hackathon.name}
						</Col>
						<Col span={3} className={"fr textright"}>
							<Button type="primary">编辑</Button>
						</Col>
					</Row>
					<style>
						{
							`
							.ant-divider-horizontal{
    						margin: 19px 0;
							}
							`
						}
					</style>

					<Divider />

					<p className={"Osshackathonfontlist mb30"}>
						{data&&data.hackathon.description===null?"":<div className={"markdown-body"}
									dangerouslySetInnerHTML={{__html: markdownToHTML(data&&data.hackathon.description).replace(/▁/g, "▁▁▁")}}></div>}
					</p>
					{
						data&&data.hacks.length==0?"":data&&data.hacks.map((item,key)=>{
							return(
								<span></span>
							)
						})
					}
					{/*学生身份*/}
					<Card className={"OsshackathonCard mb20"}>

						<Row>
							<Col span={6} className={"OsshackathonCardtitle"}>
								大赛介绍
							</Col>
							<Col span={6} className={"fr textright"}>
								<Button type="primary fr ">立即报名</Button>
								<Button type="primary fr mr20" disabled>
										已报名
								</Button>
							</Col>
						</Row>

						<p>Card content</p>
						<p>Card content</p>
					</Card>

					{/*教师身份*/}

					<Card className={"OsshackathonCard"}>
						<Row>
							<Col span={6} className={"OsshackathonCardtitle"}>
								大赛介绍
							</Col>
							<Col span={6} className={"fr textright"}>
								<Button type="primary fr ">立即报名</Button>
								<Button type="primary fr mr20" disabled>
									已报名
								</Button>
							</Col>
						</Row>
						<p>Card content</p>
						<p>Card content</p>
					</Card>


				</div>

			</div>
		)
	}

}



export default CNotificationHOC() (TPMIndexHOC (Osshackathon)) ;