import React,{ Component } from "react";
import '../css/signincdi.css';
import { Tabs,Pagination} from 'antd';
import {queryString} from 'educoder';
import  Teaccomponent from '../component/teachercomponent/Teaccomponent';
import Createsignmodel from '../model/Createsignmodel';
import Studentssignmodels from "../model/Studentssignmodel";
import Qrcodesignin from "../model/Qrcodesignin";
import Signinname from '../model/Signinname';
import Signinstatistics from "../Signinstatistics/Signinstatistics";
import Signindetails from '../student/Signindetails';

import axios from 'axios';

const { TabPane } = Tabs;
//在线学习

class Students_signin extends Component{
	constructor(props){
		super(props);

		this.state={
			visible:false,
			page:1,
			limit:5,
			count:50,
			defaultActiveKey:"1",
			attendances_count:0,
			datas:[],
			normal_count:0,
			leave_count:0,
			absence_count:0,
			Studentssigntype:false,
			Studentssigntypedata:null,
			Qrcodesignintype:false,
			Qrcodesignintypedata:null,
			switchs:false,
			switattendance_id:null,
			Spin:false,
			Signinnamestype:false,
			mybianjiname:"",

		}
	}

	componentDidMount() {
		let data={
			key:"1",
			page:1,
			limit:5
		}
  this.gogetdatas(data);

		// const query = this.props.location.search;
		// const parsed = queryString.parse(query);
		// console.log("parsed");
		// console.log(parsed);
	}

	componentDidUpdate = (prevProps) => {


	}

	callback=(key)=> {
		//.log(key);
		this.setState({
			defaultActiveKey: key,
			page:1,
			limit:5
		})
		let data={
			key:key,
			page:1,
			limit:5
		}
		if(key==="1" || key ==="2"){
			this.gogetdatas(data);
		}
	}

	gogetdatas =(mydata)=>{
		this.setState({
			Spin:true
		})
		const  coureid=this.props.match.params.coursesId;
		let urls = `/courses/${coureid}/attendances.json`;
		let arry={}
		if(mydata.key==="1" || mydata.key ===1){
			  arry={
					page:mydata.page,
					limit:mydata.limit,
				};
		}else if(mydata.key==="2" || mydata.key ===2){
			arry={
				history:true,
				page:mydata.page,
				limit:mydata.limit,
			}
		}
		axios.get(urls, {
			params: arry
		}).then((response) => {
			//.log(response);
           if(response){
           	if(response.data){
           		this.setState({
								attendances_count:response.data.attendances_count,
								datas:response.data.attendances,
								normal_count:response.data.normal_count,
								leave_count:response.data.leave_count,
								absence_count:response.data.absence_count,
							})
							if(response.data.attendances.length===0&&mydata.page!==1){
								this.setState({
									page:mydata.page-1,
									limit:5
								})
								let data={
									key: mydata.key,
									page:mydata.page-1,
									limit:5
								}
								this.gogetdatas(data);
							}
						}
					 }
			this.setState({
				Spin:false
			})
		}).catch((error) => {
			this.setState({
				Spin:false
			})
		})
	}

	Createsign=()=>{
   this.setState({
		 visible:true
	 })
	}


	hideCreatesign=()=>{
		this.setState({
			visible:false
		})
	}


	paginationonChange = (pageNumber) => {
		this.setState({
			page: pageNumber,
		})

		let data={
			key:this.state.defaultActiveKey,
			page:pageNumber,
			limit:5
		}
		this.gogetdatas(data);

	}

	getsetdatas=()=>{
		let data={
			key:this.state.defaultActiveKey,
			page:this.state.page,
			limit:5
		}
		this.gogetdatas(data);
	}

	Gotomodes(data,bool){
		 if(bool===true){
		 	this.setState({
				Studentssigntypedata:data,
				Studentssigntype:true
			})
		 }else{
		 	this.setState({
				Studentssigntype:false,
				Studentssigntypedata:null,

			})
		 }


	}
	GotomQrcodesodesy(data,bool){
		if(bool===true){
			this.setState({
				Qrcodesignintype:true,
				Qrcodesignintypedata:data,
			})
		}else{
			this.setState({
				Qrcodesignintype:false,
				Qrcodesignintypedata:null,

			})
		}


	}

	qiandaoxiangq=(bool,id)=>{
		this.setState({
			switchs:bool,
			switattendance_id:id,
		})
		// if(bool){
		// 	var currenturl = window.location.href;
		// 	var newUrl = (currenturl.split("?"))[0];
		// 	window.history.pushState('','',newUrl+'?type='+2);
		// }
	}


	settabsdata=()=>{
		let data={
			defaultActiveKey:"1",
			key:"1",
			page:1,
			limit:5
		}
		this.gogetdatas(data);
	}

	Signinnamestypes=(id,bool,name)=>{
		this.setState({
			switattendance_id:id,
			Signinnamestype:bool,
			mybianjiname:name,
		})
	}


	render(){

		let {page,per_page,count,defaultActiveKey,limit,attendances_count,datas,absence_count,leave_count,normal_count,
			Studentssigntype,Studentssigntypedata,Qrcodesignintype,Qrcodesignintypedata,switchs,switattendance_id,Spin,
			mybianjiname
		} =this.state;
		const  isAdmin =this.props.isAdmin();

		return(
			<React.Fragment>

				<div className="">
					{/*编辑名称*/}
					<Signinname
						{...this.props}
						{...this.state}
						switattendance_id={switattendance_id}
						mybianjiname={mybianjiname}
						Signinnamestypes={(id,b,a)=>this.Signinnamestypes(id,b,a)}
						getsetdatas={()=>this.getsetdatas()}
					/>
					{/*创建实训*/}
					<Createsignmodel
						{...this.state}
						{...this.props}
						hideCreatesign={()=>this.hideCreatesign()}
						settabsdata={()=>this.settabsdata()}
					/>
					{/*签到*/}
					<Studentssignmodels
						{...this.state}
						{...this.props}
						Studentssigntype={Studentssigntype}
						Studentssigntypedata={Studentssigntypedata}
						Gotomodes={(d,b)=>this.Gotomodes(d,b)}
						getsetdatas={()=>this.getsetdatas()}
					/>
					{/*二维码*/}
					<Qrcodesignin
						{...this.state}
						{...this.props}
						Qrcodesignintype={Qrcodesignintype}
						Qrcodesignintypedata={Qrcodesignintypedata}
						getsetdatas={()=>this.getsetdatas()}
						GotomQrcodesodesy={(d,b)=>this.GotomQrcodesodesy(d,b)}
					/>
					{
						switchs===false?
							<div className="clearfix   yslmaxheigthk" >
								<div className="ws100s" style={{
									position: "relative"
								}}>
									<Tabs activeKey={defaultActiveKey} onChange={this.callback}>
										<TabPane tab="正在签到" key="1">
											<p className="mt20 mysligtes">共{attendances_count}个签到正在进行</p>
											<Teaccomponent
												Spin={Spin}
												Signinnamestypes={(id,b,a)=>this.Signinnamestypes(id,b,a)}
												qiandaoxiangq={(b,id)=>this.qiandaoxiangq(b,id)}
												Gotomodes={(d,b)=>this.Gotomodes(d,b)}
												GotomQrcodesodesy={(d,b)=>this.GotomQrcodesodesy(d,b)}
												getsetdatas={()=>this.getsetdatas()}
												datas={datas}
												defaultActiveKey={defaultActiveKey}
												{...this.state}
												{...this.props}

											></Teaccomponent>



											<div className="mb30 clearfix educontent mt40 intermediatecenter">
												<Pagination showQuickJumper current={page} onChange={this.paginationonChange}
																		pageSize={limit}
																		total={attendances_count}></Pagination>
											</div>
										</TabPane>
										<TabPane tab="历史签到" key="2">
											<div className="ws100s mt20 sortinxdirection">
												<p className=" ws50s mysligtes sortinxdirection">已完成{attendances_count}次签到</p>
												{
													isAdmin===false?
														<div className="ws50s xaxisreverseorder">
															<p className="kkp pr32 " style={{color:"#FF835C"}}>旷课：{absence_count}</p>
															<p className="kkp mr20r" style={{color:"#EAAE4E"}}>请假：{leave_count}</p>
															<p className="kkp mr20r" style={{color:"#26C7C9"}}>正常签到：{normal_count}</p>

														</div>
														:
														""
												}
											</div>



											<Teaccomponent
												Spin={Spin}
												Signinnamestypes={(id,b,a)=>this.Signinnamestypes(id,b,a)}
												qiandaoxiangq={(b,id)=>this.qiandaoxiangq(b,id)}
												Gotomodes={(d,b)=>this.Gotomodes(d,b)}
												GotomQrcodesodesy={(d,b)=>this.GotomQrcodesodesy(d,b)}
												getsetdatas={()=>this.getsetdatas()}
												datas={datas}
												defaultActiveKey={defaultActiveKey}
												{...this.state}
												{...this.props}
											></Teaccomponent>


											<div className="mb30 clearfix educontent mt40 intermediatecenter">
												<Pagination showQuickJumper current={page} onChange={this.paginationonChange}
																		pageSize={limit}
																		total={attendances_count}></Pagination>
											</div>
										</TabPane>
										{
											isAdmin===true?
												<TabPane tab="签到统计" key="3">
													<Signinstatistics
														{...this.props}
														{...this.state}
													/>
												</TabPane>
												:
												""
										}

									</Tabs>
									{
										isAdmin?
											<div className="positiondivs sortinxdirection xiaoshou">
												<i className="iconfont icon-bianji5  posiivsicon"></i>
												<p className="posiivs xiaoshou" onClick={()=>this.Createsign()}>创建签到</p>
											</div>
											:""
									}
								</div>

							</div>
							:
							// 签到详情
							<Signindetails
								defaultActiveKey={defaultActiveKey}
								switattendance_id={switattendance_id}
								{...this.props}
								{...this.state}
								 qiandaoxiangq={(b)=>this.qiandaoxiangq(b)}
							></Signindetails>

					}

				</div>
			</React.Fragment>
		)
	}
}
export default Students_signin;