educoder/public/react/src/tpm/component/TPMRightSection.js

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import axios from 'axios';

import { getImageUrl,} from "educoder";

import './TPMright.css';

import {Icon,Tooltip} from 'antd';

// import "antd/dist/antd.css";

class TPMRightSection extends Component {
	constructor(props) {
		super(props)
		this.state = {

			TPMRightSection:false,
			clickNewsubscripttype:false
		}
	}

	// componentDidMount() {
	//   let id=this.props.match.params.shixunId;
	//
	//   let shixunsDetailsURL=`/shixuns/`+id+`/show_right.json`;
	//
	//   axios.get(shixunsDetailsURL).then((response)=> {
	//         if(response.status===200){
	//             this.setState({
	//               TPMRightSectionData: response.data
	//           });
	//         }
	//     }).catch((error)=>{
	//       console.log(error)
	//     });
	// }

	// shouldComponentUpdate(nextProps, nextState) {
	//      return nextProps.TPMRightSectionData !== this.state.TPMRightSectionData
	// }
	clickNewsubscript=(val)=>{
		if(val===0){
			this.setState({
				TPMRightSection:true,
				clickNewsubscripttype:true
			})
		}else{
			this.setState({
				TPMRightSection:false,
				clickNewsubscripttype:false
			})
		}

	}
	render() {
		let {TPMRightSection,clickNewsubscripttype}=this.state;
		let {TPMRightSectionData}=this.props

		return (
			<div>
				{
					TPMRightSectionData===undefined?"":
						<div>
							<div className="edu-back-white padding40-20 mb10">
								<p className="font-16 mb20">创建者</p>
								<div className="df">
									<a href={TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":`/users/${TPMRightSectionData.creator.login}/courses`}>
										<img alt="头像" className="radius mr10" height="80" src={getImageUrl(TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":'images/'+TPMRightSectionData.creator.image_url+"?1532489442")} width="80" />
									</a>
									<div className="flex1">

										<p className="mb20">{TPMRightSectionData===undefined?"":TPMRightSectionData.creator===undefined?"":TPMRightSectionData.creator.name}</p>
										<div className="clearfix">
											<span>发布 {TPMRightSectionData.user_shixuns_count}</span>
											{/*<span className="ml20">粉丝 <span id="user_h_fan_count">{TPMRightSectionData.fans_count}</span></span>*/}
											{/* <a href="/watchers/unwatch?className=fr+user_watch_btn+edu-default-btn+edu-focus-btn&amp;object_id=3039&amp;object_type=user&amp;shixun_id=61&amp;target_id=3039" className="fr edu-default-btn user_watch_btn edu-focus-btn" data-method="post" data-remote="true" id="cancel_watch" rel="nofollow">取消关注</a> */}
										</div>

									</div>
								</div>
							</div>
							{
								TPMRightSectionData === undefined ? "" :TPMRightSectionData.tags===undefined?"": TPMRightSectionData.tags.length === 0 ? "" :
									<div className="edu-back-white padding40-20 mb10 relative">
										<p className="font-16 mb20">技能标签 <span className="color-grey-c">{TPMRightSectionData.tags.length}</span></p>
										<div className={TPMRightSection===false?"newedbox newedboxheight":"newedbox newminheight"}>
											<div className="clearfix" id="boxheight">
												{ TPMRightSectionData.tags.map((item,key)=>{
													return(
														<span className={item.status===false?"newedu-filter-btn fl":"edu-filter-btn29BD8B fl"}
																	style={{display:item.tag_name===" "||item.tag_name===""?"none":""}}
																	key={key}>{item.tag_name}</span>
													)})
												}
											</div>
										</div>


										<div className={TPMRightSectionData.tags.length>15&&clickNewsubscripttype===false?"newsubscript mb9 color-grey-9":"newsubscript mb9 color-grey-9 none"}

												 data-tip-down="显示全部"
												 onClick={()=>this.clickNewsubscript(0)}><span className="mr8">...</span><Icon type="caret-down" />
										</div>


										<div className={clickNewsubscripttype===false?"newsubscript mb9 color-grey-9 none":"newsubscript mb9 color-grey-9"}

												 data-tip-down="显示全部"
												 onClick={()=>this.clickNewsubscript(1)}><Icon type="caret-up" />
										</div>

									</div>


							}


						<div className="padding20 edu-back-white mb10 mt10" style={{
								display: TPMRightSectionData === undefined?"none":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "none" : "block"
							}}>
								<p className="mb20 font-16 clearfix">所属课程</p>
								<div className="recommend-list" >
									{
										TPMRightSectionData===undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.map((i,k)=>{

											return(

												<div  className="recomments clearfix df" key={k}>

													<a href={"/paths/"+i.id} height="96" width="128" target="_blank">
														<img alt="实训" height="96" src={"/"+i.image_url} width="128" />
													</a>

													<div className="ml10 flex1">
														<a href={"/paths/"+i.id}  target="_blank" data-tip-down={i.name} className="color-grey-6 task-hide mb12 recomment-name">{i.name}</a>
														<p className="clearfix mt8 font-12 color-grey-B4">

															<Tooltip placement="bottom" title={"章节"}>
																<span className="mr10 fl squareIconSpan"><i className="iconfont icon-shixun fl mr3"></i>{i.stages_count}</span>
															</Tooltip>

															{/*<Tooltip placement="bottom" title={"经验值"}>*/}
															{/*<span className="mr10 fl squareIconSpan"><i className="iconfont icon-jingyan fl mr3"></i>{i.score_count}</span>*/}
															{/*</Tooltip>*/}

															<Tooltip placement="bottom" title={"学习人数"}>
																<span className="mr10 fl squareIconSpan"><i className="iconfont icon-chengyuan fl mr3"></i>{i.members_count}</span>
															</Tooltip>

														</p>
													</div>

												</div>

											)
										})
									}
								</div>
							</div>

		       {TPMRightSectionData === undefined?"":TPMRightSectionData.paths===undefined?"":TPMRightSectionData.paths.length === 0 ? "" :
						 this.props.user&&this.props.user.main_site===true?<div className="padding20 edu-back-white"
									 style={{
										 display:
											 TPMRightSectionData === undefined?"none":TPMRightSectionData.recommands===undefined?"none":TPMRightSectionData.recommands.length === 0 ? "none" : "block"
									 }}
							>
								<p className="mb20 font-16 clearfix">推荐实训</p>
								<div className="recommend-list">
									{
										TPMRightSectionData===undefined?"":TPMRightSectionData.recommands===undefined?"":TPMRightSectionData.recommands.map((item,key)=>{
											return(
												<div className="recomments clearfix df" key={key}>
													<a href={"/shixuns/"+item.identifier+"/challenges"} target="_blank">
														<img alt="69?1526971094" height="96" src={"/"+item.pic} width="128"/>
													</a>
													<div className="ml10 flex1">
														<Tooltip placement="bottom" title={item.name}>
															<a href={"/shixuns/"+item.identifier+"/challenges"}  target="_blank"  className="color-grey-6 task-hide mb12 recomment-name">{item.name}</a>
														</Tooltip>
														<p className="clearfix mt8 font-12 color-grey-B4">
															{item.stu_num} 人学习
														</p>
														<p className="edu-txt-right color-orange pr10">{item.level}</p>
													</div>
												</div>
											)
										})
									}
								</div>
							</div>:""
		       }
						</div>
				}
			</div>
		)


	}
}

export default TPMRightSection;