import React, {Component} from "react";
import {Link, NavLink} from 'react-router-dom';
import {WordsBtn, ActionBtn} from 'educoder';
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Button,Form } from "antd";
import axios from 'axios';
import {
	notification
} from "antd";
import CoursesListType from '../coursesPublic/CoursesListType';
import Groupjobbandetails from './Groupjobbandetails';
import Groupjobquesanswer from './Groupjobquesanswer';
import '../css/members.css';
import "../common/formCommon.css";
import '../css/Courses.css';
import '../css/busyWork.css';
import '../poll/pollStyle.css';
import Generaljobdetails from "../questionbank/Generaljobdetails";

class GroupjobbankPage extends Component {
	//分组作业内容详情
	constructor(props) {
		super(props);
		// this.answerMdRef = React.createRef();
		this.state = {
			tab: ["0"],
			workid:1,
			isSpin:false,
			datas:[],
		}

	}

	//切换tab
	ChangeTab = (e) => {
		// console.log(e);
		this.setState({
			tab: e
		})
		try {
			var currenturl = window.location.href;
			var newUrl = (currenturl.split("?"))[0];
			window.history.pushState('','',newUrl+'?tab='+e);
		}catch (e) {
			console.log(e);
			console.log("44");
		}

	}


	componentDidMount() {
		// console.log("父组件加载框");
		const query = this.props.location.search;
		const type = query.split('?tab=');
		// let sum = []
		// sum.push(type[1])
		// console.log("componentDidMountcomponentDidMount");
		// console.log(type);
		this.setState({
			tab: type[1],
		})
		let querys = this.props.location.pathname;
		const types = querys.split('/');
		// console.log(types);
		this.setState({
			shixuntypes: types[3]
		})
		if(	this.props.match.params.workid){
			this.setState({
				workid:	this.props.match.params.workid,
			})
		}
		this.getdata(this.props.match.params.workid);
	}
  ///获取数据的地方
	getdata=(workid)=>{
		var workids= workid;
		if(workids){

		}else{
			workids=this.state.workid;
		}
		this.setState({
			isSpin:true,
		})
		let url = `/homework_banks/${workids}.json`;
		//
		axios.get(url).then((response) => {
			if(response){
				if(response.data){
					this.setState({
						datas:response.data,
					})
				}else {
					this.setState({
						datas:[],

					})

				}
			}else {
				this.setState({
					datas:[],
				})

			}
			this.setState({
				isSpin:false,
			})
		}).catch((error) => {
			console.log(error)
			this.setState({
				datas:[],
				isSpin:false,
			})
		});
	}


	bindRef = ref => { this.child = ref }
///////////////教师截止

	render() {
		let {tab,datas} = this.state;

		const isAdmin = this.props.isAdmin();
		// console.log(119)


		return (
			<div className="newMain clearfix ">


				<div className={"educontent mt10 mb20"} style={{width: "1200px"}}>

					<div className="educontent mb20">
						<p className="clearfix mb20 mt10">
							<a className="btn colorgrey fl hovercolorblue ">题库</a>
							<span className="color-grey-9 fl ml3 mr3">&gt;</span>
							<a
								className=" btn colorgrey fl hovercolorblue "
							>详情</a>
						</p>
					</div>
					<div className="educontent mb20">
						<p className=" fl color-black  summaryname" style={{heigth: "33px"}}>
							{datas&&datas.name}
						</p>
						<CoursesListType
							typelist={datas.is_public===true?["公开"]:["私有"]}
						/>
					</div>

					<div className="edu-back-white ">
						<div className="stud-class-set bor-bottom-greyE ">
							<div className=" clearfix edu-back-white poll_list">
								<a className={parseInt(tab) === 0 ? "active ml12" : "ml12"} onClick={(e) => this.ChangeTab(0)}>内容详情</a>
								<a className={parseInt(tab) === 1 ? "active ml12" : "ml12"} onClick={(e) => this.ChangeTab(1)}>参考答案</a>
								<a className="fr color-blue font-16" >发送</a>
								<a className="fr color-blue font-16" >编辑</a>
								<a className="fr color-blue font-16" >删除</a>
							</div>
						</div>
					</div>
					<Spin size="large" spinning={this.state.isSpin}  id={"cdiv"}>
					{parseInt(tab) === 0 ? <Groupjobbandetails {...this.props} {...this.state} datas={datas}/>:""}
					{parseInt(tab) === 1 ? <Groupjobquesanswer {...this.props} {...this.state} datas={datas}/>:""}
					</Spin>
				</div>
			</div>
		)
	}
}

export default GroupjobbankPage;