import React, {Component} from "react";
import {WordsBtn,markdownToHTML} from 'educoder';
import { Form, Select, Input, Button,Checkbox,Upload,Icon,message,Modal, Table, Divider,InputNumber, Tag,DatePicker,Radio,Tooltip,Spin} from "antd";
import {Link,Switch,Route,Redirect} from 'react-router-dom';
import axios from 'axios';
import ConclusionEvaluation from './shixunreport/ConclusionEvaluation';
import OfficialAcademicTranscript from './shixunreport/OfficialAcademicTranscript';
import Coursesshixundetails from './shixunreport/Coursesshixundetails';
import Shixunechart from './shixunreport/Shixunechart';
import DownloadMessageysl from "../../modals/DownloadMessageysl";
import {UnControlled as CodeMirror} from 'react-codemirror2';
import 'codemirror/mode/cmake/cmake';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/clike/clike';
import '../css/members.css';
import "../common/formCommon.css";
import '../css/Courses.css';
import './style.css';
import 'moment/locale/zh-cn';

class ShixunWorkReport extends Component {

	constructor(props) {
		super(props);
		this.state = {
			data:undefined,
			spinning:true,
			DownloadType:false,
			DownloadMessageval:undefined,
		}

	}

/// 确认是否下载
	confirmysl(url){
		axios.get(url).then((response) => {
			if(response.data.status&&response.data.status===-1){

			}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
					})
				}
			}else {
				this.props.showNotification(`正在下载中`);
				window.open("/api"+url, '_blank');
			}
		}).catch((error) => {
			console.log(error)
		});
	}

	Downloadcal=()=>{
		this.setState({
			DownloadType:false,
			DownloadMessageval:undefined
		})
	}

	componentDidMount() {
		this.setState({
			spinning:true
		})
		let homeworkid=this.props.match.params.homeworkid;
	    let url = `/student_works/${homeworkid}/shixun_work_report.json`
		axios.get(url).then((result) => {
			if (result.data.status === 403||result.data.status === 401||result.data.status === 407||result.data.status === 408) {

			}else{
				this.setState({
					data:result.data,
					spinning:false
				})
			}

		}).catch((error) => {
			console.log(error)
			this.setState({
				spinning:false
			})
		})
		let query = this.props.location.pathname;
		const type = query.split('/');
		this.setState({
			shixuntypes:type[3]
		})
	}
	jumptopic=(anchorName)=>{
;		if (anchorName) {
			// 找到锚点
			let anchorElement = document.getElementById(anchorName);
			// 如果对应id的锚点存在，就跳转到锚点
			if(anchorElement) {
				anchorElement.scrollIntoView();
			}
		}
	}
	gotohome=()=>{
		let courseId=this.props.match.params.coursesId;
		if(courseId===undefined){
			this.props.history.push("/courses");
		}else{
			this.props.history.push(this.props.current_user.first_category_url);
		}
	}

	goback = () => {
		this.props.history.replace(`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${this.state.data.homework_common_id}/list?tab=0`);
	}
	render() {
		let{data} =this.state;
		console.log(data)
		console.log(this.props)
		let category_id=data===undefined?"":data.category===null?"":data.category.category_id;
		let homework_common_id=data===undefined?"":data.homework_common_id;
		let homeworkid=this.props.match.params.homeworkid;
		const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
		return (

				data===undefined?"":<Spin indicator={antIcon} spinning={this.state.spinning}><div className="newMain clearfix ">
				<div className={"educontent mb20" }>
					<div className="educontent">
						<DownloadMessageysl
							{...this.props}
							value={this.state.DownloadMessageval}
							modalCancel={this.Downloadcal}
							modalsType={this.state.DownloadType}
						/>
						<p className="clearfix mt20">
							<a className="btn colorgrey fl hovercolorblue " onClick={()=>this.gotohome()}>
									<span className={"color-grey-9"}>	{data&&data.course_name}</span>
							</a>
							<span className="color-grey-9 fl ml3 mr3">&gt;</span>
							<a className="btn colorgrey fl hovercolorblue " to={"/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+category_id}>
									<span className={"color-grey-9"}>{data===undefined?"":data.category===null?"":data.category.category_name}</span>
							</a>
							<span className="color-grey-9 fl ml3 mr3">&gt;</span>
							<a href={"/courses/"+this.props.match.params.coursesId+"/"+this.state.shixuntypes+"/"+homework_common_id+"/list?tab=0"} className="fl color-grey-9">作业详情</a>
							<span className="color-grey-9 fl ml3 mr3">&gt;</span>
							<WordsBtn className="fl">{data&&data.username}</WordsBtn>
						</p>
					</div>
					<div style={{ width:'100%',height:'75px'}} >
						<p className=" fl color-black mt25 summaryname">{data&&data.shixun_name}</p>
						{/*{this.props.isAdmin()?<a className=" fr font-14 ml30 mt10 mr20 color-grey-9 ">导出实训报告数据</a>:""}*/}
						{/*{this.props.isAdmin() ? <a*/}
							{/*className="fr color-blue font-16"*/}
							{/*onClick={()=>this.confirmysl(`/student_works/${homeworkid}/export_shixun_work_report.pdf`)}*/}
						{/*>导出实训报告数据</a> : ""}*/}
						<a onClick={this.goback} className="color-grey-6 fr font-16 ml30 mt15 mr20">返回</a>
					</div>

					<div className="stud-class-set">
						<div className="clearfix edu-back-white poll_list">

							<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">总体评价</div>

              <ConclusionEvaluation
	              data={data}
              />

						</div>
					</div>

					<div className="stud-class-set">
						<div className="clearfix edu-back-white poll_list">

							<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">阶段成绩</div>

							<OfficialAcademicTranscript
								data={data}
								jumptopic={this.jumptopic}
							/>

						</div>
					</div>

					<div className="stud-class-set bor-bottom-greyE"
					      style={{display:data&&data.work_description===null?"none":""}}
					>
						<div className="clearfix edu-back-white poll_list">
							<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">个人总结</div>
							<style>
								{`
								.personalsummary{
										border:1px solid rgba(235,235,235,1);
										border-radius:2px;
								}
								.pad040{
								    padding: 0px 40px 40px;
								}
								.pad40px{
										padding-bottom: 40px;
								}
								.codebox{
										height: 40px;
										line-height: 30px;
								 }
								 .codeboxright{
								    color: #999999!important;
								    font-size: 16px;
								 }
								`}
							</style>
							<div className={"pad040"}>
								<div className={"personalsummary"}>

									<div className={"markdown-body"}
										dangerouslySetInnerHTML={{__html: markdownToHTML(data&&data.work_description).replace(/▁/g, "▁▁▁")}}></div>
								</div>
							</div>
						</div>
					</div>

					<div className="stud-class-set bor-bottom-greyE">
						<div className="clearfix edu-back-white poll_list">
							<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">图形统计</div>
							<Shixunechart
								data={data}
							/>
						</div>
					</div>

					<div className="stud-class-set bor-bottom-greyE">

						<div className="clearfix edu-back-white poll_list pad40px">
							<div className="font-16 color-dark-21 shixunreporttitle ml20 pd20">实训详情</div>
              <style>
	              {`
	              .poll_list a{
	              padding:0px !important;
	              }
	              .backgroud4CACFF{
	                  background: #4CACFF;
	              }
	              `}
              </style>
							{
								data&&data.shixun_detail===undefined?"":data.shixun_detail.map((item,key)=>{
									return(
										<div id={"id"+item.position} key={key} className={"mb20"}>
											<div className="font-16 color-dark-21 ml20 mr20">
												<p className="clearfix mb20">
									        <span className="panel-inner-icon mr15 fl mt3 backgroud4CACFF">
									            <i className="fa fa-code font-16 color_white"></i>
									        </span>
													<span className="fl mt3 font-14">
														<span className="font-bd mr15">第{item.position}关</span>
														<Link to={/tasks/+item.game_identifier} >
															<span className={"font-14"}>{item.subject}</span>
														</Link>
													</span>
												</p>
												<Coursesshixundetails
													data={item.outputs}
												/>
											</div>

											{item.st===0?item.passed_code===null?"":<div className="font-16 color-dark-21 ml20 mr20">
												<div className="bor-grey-e mt15">
													<p className="clearfix pt5 pb5 pl15 pr15 back-f6-grey codebox">
														<span className="fl">最近通过的代码</span>
														<span className="fr codeboxright">{item.path}</span>
													</p>

													<div className="test-code bor-top-greyE">
														<li className="clearfix">
															<CodeMirror
																value={item.passed_code}
																options={{
																	// mode: 'xml',
																	theme: 'default',
																	lineNumbers: true,
																	// extraKeys: {"Ctrl-Q": "autocomplete"}, // 快捷键
																	indentUnit: 4, //代码缩进为一个tab的距离
																	matchBrackets: true,
																	autoRefresh: true,
																	smartIndent: true,//智能换行
																	styleActiveLine: true,
																	lint: true,
																	readOnly: "nocursor"
																}}
															/>
														</li>
													</div>
												</div>
											</div>:""}
								 </div>
								)
							})
							}
					</div>
					</div>

				</div>
			</div>
				</Spin>

		)
	}
}

export default ShixunWorkReport;


