import React, {Component} from "react";
import {WordsBtn} from 'educoder';
import {Table} from "antd";
import {Link,Switch,Route,Redirect} from 'react-router-dom';

class OfficialAcademicTranscript extends Component {

	constructor(props) {
		super(props);
		this.state = {
			loadingstate:true,
			datas:undefined
		}
	}

	componentDidMount() {

	}
	myjumptopic=(e)=>{
		console.log("获取到值");
		console.log(e);
		this.props.jumptopic(e);
	}

	render() {

		let {data}=this.props;

		let datas=[];
		if(data!=undefined){
			data.stage_list===undefined?"":data.stage_list.forEach((item,key)=>{
				datas.push({
					customs: key+1,
					taskname:{name:item.name,complete_status:item.complete_status},
					openingtime:item.open_time,
					evaluating: item.evaluate_count,
					finishtime:item.finished_time,
					elapsedtime:item.time_consuming,
					empvalue:{myself:item.myself_experience,experience:item.experience},
					// adjustmentminute:asdasd
				})
			})
		}



		let columns=[{
			title: '关卡',
			dataIndex: 'customs',
			key: 'customs',
			render: (text, record) => (
				<span className={"color-grey-9"}>
					{record.customs}
        </span>
			),
		}, {
			title: '任务名称',
			dataIndex: 'taskname',
			key: 'taskname',
			className:"TaskForms",
			render: (text, record) => (
				<span>
					<span className={"task-hide"} style={{color:"#676767"}}><a className="tasknameName font-14" onClick={()=>this.myjumptopic("id"+record.customs)} title={record.taskname.name} >
						{record.taskname.name}{record.taskname.complete_status===2?<span className={"tasknamebox ml10"}>延时</span>:record.taskname.complete_status===3?<span className={"tasknameboxs ml10"}>延时</span>:""}
					</a></span>
        </span>
			),
		}, {
			title: '开启时间',
			dataIndex: 'openingtime',
			key: 'openingtime',
			render: (text, record) => (
				<span className={"color-grey-9"}>
					{record.openingtime}
        </span>
			),
		}, {
			title: '评测次数',
			key: 'evaluating',
			dataIndex: 'evaluating',

			render: (text, record) => (
				<span className={"color-grey-9"}>
           	{record.evaluating}
        </span>
			),
		}, {
			title: '完成时间',
			key: 'finishtime',
			dataIndex: 'finishtime',
			render: (text, record) => (
				<span className={"color-grey-9"}>
         	{record.finishtime}
        </span>
			),
		}, {
			title: '耗时',
			key: 'elapsedtime',
			dataIndex: 'elapsedtime',

			render: (text, record) => (
				<span>
					  {record.elapsedtime}
        </span>
			),
		}, {
			title: '经验值',
			key: 'empvalue',
			dataIndex: 'empvalue',

			render: (text, record) => (
				<span>
					 <span style={{color:'#29BD8B'}}>{record.empvalue.myself}</span><span className={"color-grey-9"}>/{record.empvalue.experience}</span>
        </span>
			),
		}];
		// {
		// 	title: '调分',
		// 		key: 'adjustmentminute',
		// 	dataIndex: 'adjustmentminute',
		//
		// 	render: (text, record) => (
		// 	<span>
    //          <a>6小时 50分钟 6秒</a>
    //     </span>
		// ),
		// },



		return (
			<div>
				{/*{data===undefined?"":""}*/}
				<style>{`
				.ant-table-thead > tr > th{
				    text-align: center;
					}
				.tasknamebox{
			    width: 50px;
			    height: 24px;
			    border: 1px solid rgba(221,23,23,1);
			    border-radius: 12px;
			    color: rgba(221,23,23,1);
			    display: inline-block;
					line-height: 24px;
					text-align: center;
					}

					.tasknameboxs{
				    width: 50px;
						height: 24px;
						border: 1px solid rgba(221,23,23,1);
						color: rgba(221,23,23,1);
						border-radius: 12px;
					}

				  .ant-table-tbody > tr > td{
            font-size:14px;
					}
					.task-hide{
						max-width: 345px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
					.ant-table-tbody > tr{
					   height:64px;
					}
					.tasknameName:link{color:#676767}
					.tasknameName:hover{color:#4CACFF}
					.tasknameName{
					     overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
						    width: 450px;
						    text-align: left !important;
					}
					.TaskForms{
					   width: 500px;
					   text-align: left !important;
					   padding: 16px !important;
					}
				  .TaskForms.ant-table-header-column{
						width: 100%;
						text-align: center;
				  }
			`}
				</style>
				{datas===undefined?"":<Table
			    dataSource={datas}
					columns={columns}
			    pagination={false}
					// loading={loadingstate}
					// onChange={this.TablePagination}
				/>}
			</div>

		)
	}
}

export default OfficialAcademicTranscript;