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,Pagination} from "antd";
import {Link,Switch,Route,Redirect} from 'react-router-dom';
import axios from 'axios';
import Exercisetablesmubu from './Exercisetablesmubu';
import Exercisestatisticalresulttabel from './Exercisestatisticalresulttabel';

import '../css/members.css';
import '../css/busyWork.css';
import '../poll/pollStyle.css';

const CheckboxGroup = Checkbox.Group;
function createMarkup(value) { return {__html:value} };
class Exercisestatisticalresult extends Component {

	constructor(props) {
		super(props);
		this.state = {
			data:undefined,
			sort:"percent",
			exercise_group_id:[],
			page:1,
			limit:10,

		}
	}

	componentDidMount() {
	 let{sort,exercise_group_id,page,limit}=this.state;
	  this.updatefun(sort,exercise_group_id,page,limit)
	}

	updatefun=(sort,exercise_group_id,page,limit)=>{
		let ExerciseId=this.props.match.params.Id;
		let url = `/exercises/`+ExerciseId+`/exercise_result.json`;
		axios.get(url,{
			params:{
				sort:sort,
				exercise_group_id:exercise_group_id,
				page:page,
				limit:limit
			}
		}).then((result) => {
			console.log(result)

				this.setState({
					data:result.data
				})

		}).catch((error) => {
			console.log(error)
		})
	}


	onSortTypeChange=(value)=>{
		let{exercise_group_id,page,limit}=this.state;
		 this.setState({
			 sort:value
		 })
		 this.updatefun(value,exercise_group_id,page,limit)
	}

	funtaskstatustwo=(checkedValues,list)=>{

		let{sort,page,limit}=this.state;
    if(checkedValues.length===list.length){
			this.setState({
				exercise_group_id:[]
			})
		}else{
			this.setState({
				exercise_group_id:checkedValues
			})
		}


		this.updatefun(sort,checkedValues,page,limit)
	}
	PaginationCourse=(pageNumber)=>{
		let{sort,exercise_group_id,limit}=this.state;

		this.setState({
			page:pageNumber
		})

		this.updatefun(sort,exercise_group_id,pageNumber,limit)

	}

	render() {
		let{data,sort,page,limit} =this.state;
		let choicetype=["满分作答","部分得分作答","零分作答","未批"]
		return (
			<div className=" ">

				<style>
					{`
					 div{
					 color: rgba(0, 0, 0, 0.65);
					 }
					`}
				</style>
				<div className={"educontent mb20" } style={{width: "1250px"}}>

					{data&&data.course_groups.length===0?"":<div className="stud-class-set">
						<div className="clearfix edu-back-white">
							<ul className="clearfix" style={{padding:'20px'}}>
							<li className="clearfix  mt10">
								<span className="fl mr10 color-grey-8">分班情况：</span>
								<span className="fl "><a id="graduation_comment_no_limit"
								                         className={this.state.exercise_group_id.length===0?"pl10 pr10 mr20 check_on":"pl10 pr10 mr20" }
								>不限</a></span>
								<CheckboxGroup onChange={(e)=>this.funtaskstatustwo(e,data&&data.course_groups)} value={this.state.exercise_group_id} style={{paddingTop: '4px'}}>
									{ data&&data.course_groups.map((item, key) => {
										return (
											<span key={key}>
                        <Checkbox value={item.exercise_group_id}
                                  // checked={course_group_info === undefined ? false : course_group_info[key].course_group_id === item.course_group_id ? true : false}
                                  className="fl ">{item.exercise_group_name}
                          <span>({item.exercise_group_students})</span>
                        </Checkbox>
                    </span>
										)
									})}
								</CheckboxGroup>
							</li>
							</ul>
						</div>
					</div>}

					<div className="stud-class-set">
						<div className="clearfix edu-back-white poll_list">
               <Exercisestatisticalresulttabel
	               data={data}
               />
						</div>
					</div>
					<style>
						{`
						.fafafa{
						    background: #fafafa;
						    height:50px;
						  }
						  .drop_down_normal li{
    						text-align: center;
						  }
						  .mr33{
    						margin-right: 33px;
						  }
						`}
					</style>

					<div className="stud-class-set fafafa">
						<li className="drop_down fr mt10 mr33">
							{sort==="percent"?"正确率":sort==="type"?"题型":sort==="position"?"题序":""}<i className="iconfont icon-xiajiantou font-12 ml2"></i>
							<ul className="drop_down_normal">
								{sort==='percent'?"":<li onClick={() => this.onSortTypeChange('percent')}>正确率</li>}
								{sort==='type'?"":<li onClick={() => this.onSortTypeChange('type')}>题型</li>}
								{sort==='position'?"":<li onClick={() => this.onSortTypeChange('position')}>题序</li>}
							</ul>
						</li>
					</div>
         

				 <style>
					 {`
					 .CACFF{
						 color:#4CACFF;
					 }
					 .bor-greyE{
						border: 1px solid #EEEEEE!important;
					 }


					 `}
				 </style>

					{data&&data.commit_results.map((item,key)=>{

							 return(
								<div className="stud-class-set mb20" key={key}>
									<div className="clearfix edu-back-white poll_list"  style={{padding: '20px'}}>
										<div className="font-16 shixunreporttitle  fl" >
										<span className="CACFF">{item.ques_position+"."}{item.ques_type===0?"单选":item.ques_type===1?"多选":item.ques_type===2?"判断":item.ques_type===3?"填空":item.ques_type===4?"主观":item.ques_type===5?"实训":""}题</span>
										<div>
											{/*Q{item.ques_position}：*/}
											<div dangerouslySetInnerHTML={{__html: markdownToHTML(item.ques_title).replace(/▁/g,"▁▁▁")}}></div>

											{/*<span className="markdown-body" dangerouslySetInnerHTML={createMarkup(item.ques_title)}></span>*/}
										</div>
										 </div>
								    <div className="fr shixunreporttitles">正确率<span style={{color:'#FF6800'}}> {item.right_percent}%</span></div>
									</div>
									{item.ques_type===5?

									item.ques_details.map((ite,k)=>{
										return(
											<div className={"mt20"}>
												<div className="clearfix edu-back-white poll_list"  style={{padding: '0px 20px'}}>
													<div className="font-16 shixunreporttitle  fl" >
														<span> {ite.challenge_position}：{ite.challenge_name}</span>
													</div>
												</div>
												<Exercisetablesmubu
													data={ite.challenge_details}
													type={item.ques_type}
													effictive_counts={item.effictive_counts}
													choicetype={choicetype}
												/>
											</div>
										)
									}):
							    <Exercisetablesmubu
								    data={item.ques_details}
								    type={item.ques_type}
								    effictive_counts={item.effictive_counts}
										choicetype={choicetype}
									 />}
								</div>
							 )
						 })}

				</div>

				<div className="mb40 edu-txt-center padding20-30"
				     style={
					     {
						     display: data&&data===undefined?1:data&&data.commit_results.length< 10 ? 'none' : 'block'
					     }
				     }>

					<Pagination
						showQuickJumper
						defaultCurrent={1}
						pageSize={limit}
						total={data&&data.questions_count}
						current={page}
						onChange={this.PaginationCourse}
					/>

				</div>
			</div>


		)
	}
}

export default Exercisestatisticalresult;