import React, { Component } from 'react';
import { Redirect } from 'react-router';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import axios from 'axios';
import { TPMIndexHOC } from '../tpm/TPMIndexHOC';
import SiderBar from '../tpm/SiderBar';
import { SnackbarHOC , getImageUrl} from 'educoder';
import Slider from '@icedesign/base/lib/slider';
import '@icedesign/base/lib/slider/style.js';
import Rating from '@icedesign/base/lib/rating';
import '@icedesign/base/lib/rating/style.js';
import './home.css';
import {Tooltip,Spin} from 'antd';
const $ = window.$;
class ShixunsHome extends Component {
constructor(props) {
super(props)
this.state={
homedatalist:undefined,
hometypepvisible:true
}
}
componentDidMount(){
let url=`/home/index.json`;
axios.get(url).then((response)=> {
if(response.status===200){
this.setState({
homedatalist:response.data,
hometypepvisible:false
})
}
}).catch((error)=>{
console.log(error)
});
}
bannaronmousemove=()=>{
$("#bannerrightimg").show();
$("#bannerleftimg").show();
}
bannaronmouseout=()=>{
$("#bannerrightimg").hide();
$("#bannerleftimg").hide();
}
render() {
let {homedatalist,hometypepvisible} = this.state;
const arrowStylel = {
left: "-76px",
width: "76px",
textAlign: "left",
height: "100%",
cursor: "pointer"
};
const arrowStyler = {
right: "-120px",
width: "76px",
textAlign: "left",
height: "100%",
cursor: "pointer"
};
const noneStyler={
display: "none"
}
const CustomNextArrow = props => {
return (
<div {...props} id="bannerright" style={arrowStyler}>
<img id="bannerrightimg" style={noneStyler} src={"images/educoder/banner-right.png"} />
</div>
);
};
const CustomPrevArrow = props => {
return (
<div {...props} id="bannerleft" style={arrowStylel}>
<img id="bannerleftimg" style={noneStyler} src={"images/educoder/banner-left.png"} />
</div>
);
};
let homedatalistreps;
if(homedatalist!=undefined){
homedatalistreps=[];
for(var i=0; i<homedatalist.reps.length;i++){
homedatalistreps.push(homedatalist.reps[homedatalist.reps.length-i-1])
}
}
return (
<div className="newMain clearfix backFAFAFA">
<Spin spinning={hometypepvisible} size="large" style={{marginTop:'15%'}}>
{/*懒加载*/}
<SiderBar/>
<div className="clearfix">
<div className="clearfix edu-back-white pb40 pt30 mb20" id="index-top" onMouseMove={this.bannaronmousemove} onMouseOut={this.bannaronmouseout}>
<div className="educontent pr educontentSlider">
{homedatalist===undefined?"":
<Slider
nextArrow={<CustomNextArrow />}
prevArrow={<CustomPrevArrow />}
autoplay
animation={false}
style={{width:"100%"}}
arrowPos="outer">
{homedatalist.images_url.map((item, index) => (
<div key={index} className="slider-img-wrapper">
<a href={item.path}>
<img src={item.image_url} />
</a>
</div>
))}
</Slider>
}
<div className="user_navlist">
<div className="user_navlist_black">
<ul className="black_nav_list">
{homedatalist === undefined ? "" :homedatalistreps.map((item,key)=>{
return(
<li className="welcome_shixun_index" data-id="1" data-type="rep" key={key}>
<span className="black_nav_span clearfix font-12">
<Link to={"/shixuns?id="+item.rep_id+"&type=rep"}>
{item.rep_name}
</Link>
<img
src={getImageUrl("images/educoder/icon/downarrowsmall-right.svg")}
className="fr mt15 transform-90"/>
</span>
<ul className="user_navlist_white" >
{
item.sub_rep_list.map((i,k)=>{
return(
<div className="clearfix mt20 mb5 pb10 navlistpanel-line" key={k}>
<p className="little-title clearfix welcome_shixun_index little-titles"
data-id="1" data-rep-id="1" data-type="sub"
>
<Link to={"/shixuns?id="+i.sub_rep_id+"&type=sub&palce="+item.rep_id}>
{i.sub_rep_name}
</Link>
</p>
{
i.tag_rep_list.map((t,e)=>{
return(
<Link className="welcome_shixun_index"
data-id="1" data-rep-id="1" data-sub-id="1"
to={"/shixuns?id="+t.tag_id+"&type=tag&palce="+item.rep_id}
data-type="tag" key={e}>{t.tag_name}</Link>
)
})
}
</div>
)
})
}
</ul>
</li>
)
})
}
</ul>
</div>
</div>
</div>
</div>
{/*实训路径*/}
<div className="clearfix pt20 educontent pr pb20">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>实践课程</p>
<p className="color-grey-cd font-12">TRAINING COURSE</p>
</div>
<Link to={"/paths"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>
<div className="square-list clearfix" style={{width:'102%'}}>
{homedatalist===undefined?"":homedatalist.subjects.map((item,key)=>{
if(key<8)
return(
<div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>
<div className="tag-green">
<span className="tag-name"> {item.name}</span>
<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
</div>
<div className={item.power === false ? "closeSquare" : "none"}>
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
className="mt80 mb25"/>
<p className="font-14 color-white">非试用内容，需要授权</p>
</div>
<Link to={"/paths/" + item.id}
target="_blank"
className="square-img">
<img src={item.image_url}/>
</Link>
<div className="square-main">
<p className="task-hide">
<Link to={"/paths/" + item.id}
target="_blank"
title={item.name}
className="justify color-grey-name">
{item.name}
</Link>
</p>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"章节"}>
<span className="mr10 fl squareIconSpan">
<i className="iconfont icon-zhangjie1 fl mr3 iconfontzhangjie"></i>{item.stages_count}
</span>
</Tooltip>
{/*<Tooltip placement="bottom" title={"实训"}>*/}
{/*<span className="mr10 fl squareIconSpan">*/}
{/*<i className="iconfont icon-daima fl mr3 iconfontshixundaibeijing"></i>{item.shixuns_count}*/}
{/*</span>*/}
{/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
<i className="iconfont icon-chengyuan fl mr3" ></i>{item.members_count}
</span>
</Tooltip>
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
</p>
</div>
</div>
)
})
}
</div>
</div>
{/*精选实训 改为 开发社区*/}
<div className="clearfix pt20 educontent pr pb20">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>开发社区</p>
<p className="color-grey-cd font-12">DEVELOPMENT COMMUNITY</p>
</div>
<Link to={"/shixuns"} className="moreitem">更多<i className="fa fa-angle-right ml5"></i></Link>
<div className="square-list clearfix" style={{width:'102%'}}>
{homedatalist===undefined?"":homedatalist.shixuns.map((item,key)=>{
return(
<div className="square-Item" key={key} id={item.id} style={{width:'286px'}}>
<div className="tag-green">
<span className="tag-name"> {item.tag_name}</span>
<img style={{display:item.tag_name===null?"none":'block'}} src={require(`./tag2.png`)}/>
</div>
<div className={item.power === false ? "closeSquare" : "none"}>
<img src={getImageUrl("images/educoder/icon/lockclose.svg")}
className="mt80 mb25"/>
<p className="font-14 color-white">非试用内容，需要授权</p>
</div>
<Link to={"/shixuns/"+item.identifier+"/challenges"}
target="_blank"
className="square-img">
<img src={item.pic}/>
</Link>
<div className="square-main">
<p className="task-hide">
<Link to={"/shixuns/"+item.identifier+"/challenges"}
target="_blank"
title={item.name}
className="justify color-grey-name">
{item.name}
</Link>
</p>
<p className="clearfix mt8 ml-3">
<span className="rateYoStar fl" style={{padding: '0px',height: '20px',lineHeight: '19px',cursor: 'default'}} title="">
<Rating key={key} value={item.score_info===null?5:item.score_info} disabled allowHalf />
</span>
<span className="fl ml25 font-12 color-grey-9 lineh-12 mt4">{item.score_info===null?"5分":item.score_info+"分"}</span>
</p>
<p className="clearfix mt8 font-12 color-grey-B4">
<Tooltip placement="bottom" title={"关卡"}>
<span className="mr10 fl squareIconSpan">
<i className="iconfont icon-shixunguanqia fl mr3" ></i>{item.challenges_count}
</span>
</Tooltip>
{/*<Tooltip placement="bottom" title={"经验值"}>*/}
{/*<span className="mr10 fl squareIconSpan">*/}
{/*<i className="iconfont icon-jingyan fl mr3"></i>{item.exp}*/}
{/*</span>*/}
{/*</Tooltip>*/}
<Tooltip placement="bottom" title={"学习人数"}>
<span className="mr10 fl squareIconSpan" style={{display:item.stu_num===0?"none":"block"}}>
<i className="iconfont icon-chengyuan fl mr3"></i>{item.stu_num}
</span>
</Tooltip>
<span className="fr color-grey-B3 squareIconSpan">{item.level}</span>
</p>
</div>
</div>
)
})
}
</div>
</div>
{/*导师排行榜*/}
<div className="pt60 pb60 mb30 mentor-ranking">
<div className="educontent">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>导师排行榜</p>
<p className="color-grey-cd font-12">MENTOR RANKING</p>
</div>
<div className="ranking clearfix">
<ul className="grade color-dark">
{
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
if(key===1){
return(
<li className="mt35 pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
{
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
if(key===0){
return(
<li className="pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
{
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
if(key===2){
return(
<li className="mt35 pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan-three.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
</ul>
<br />
<ul className="grade mt30">
{
homedatalist===undefined?"":homedatalist.teachers.map((item,key)=>{
if(key>2) {
return (
<li key={key}>
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url}/>
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
</ul>
</div>
</div>
</div>
{/*程序员排行榜*/}
<div className="pt60 pb60 mb30 pro-ranking">
<div className="educontent">
<div className="edu-txt-center">
<p className="color-dark edu-txt-center font-24" style={{lineHeight: '30px'}}>程序员排行榜</p>
<p className="color-grey-cd font-12">PROGRAMMER RANKING</p>
</div>
<div className="ranking clearfix">
<ul className="grade color-dark">
{
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
if(key===1){
return(
<li className="mt35 pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan-two.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
{
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
if(key===0){
return(
<li className="pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
{
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
if(key===2){
return(
<li className="mt35 pr" key={key}>
<img src={getImageUrl("images/educoder/huangguan-three.png")} className="huangguan" />
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url} />
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
</ul>
<br />
<ul className="grade mt30">
{
homedatalist===undefined?"":homedatalist.students.map((item,key)=>{
if(key>2) {
return (
<li key={key}>
<a href={"/users/"+item.login} className="color-dark">
<img src={'images/'+item.image_url}/>
<span className="task-hide rankName">{item.name}</span>
</a>
</li>
)
}
})}
</ul>
</div>
</div>
</div>
</div>
</Spin>
</div>
);
}
}
export default SnackbarHOC() (TPMIndexHOC ( ShixunsHome ));