import React, { Component } from "react";
import '../css/signincdi.css';
import { Tabs, Pagination } from 'antd';
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);

	}

	componentDidUpdate = (prevProps) => {
		try {
			if (this.props.homedirectory !== prevProps.homedirectory) {
				if (this.props.homedirectory === true) {
					this.setState({
						switchs: false,
					})
				}
			}
		} catch (e) {

		}
	}

	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 === false) {
			this.getsetdatas();
		}
	}


	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()}
					/>
					{/*创建实训*/}
					{this.state.visible === true ? <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">
												{attendances_count > 0 ? <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">
												{attendances_count > 0 ? <Pagination showQuickJumper current={page} onChange={this.paginationonChange}
													pageSize={limit}
													total={attendances_count}></Pagination> : ''
												}</div>
										</TabPane>
										{
											isAdmin === true ?
												<TabPane tab="签到统计" key="3">
													{defaultActiveKey && defaultActiveKey === "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;
