import React, {Component} from "react";
import '../css/signincdi.css';
import {Progress, message} from 'antd';
import QRCode from 'qrcode.react';
import axios from 'axios';

function clearSlct() {
	if ("getSelection" in window) {
		window.getSelection().removeAllRanges();
	} else {
		document.selection.empty();
	}
	;
}

function jsCopy(s) {
	clearSlct();
	const copyEle = document.getElementById(s);
	copyEle.select();
	const copyStatus = document.execCommand("Copy");
	// 对成功与否定进行提示
	copyStatuss(copyStatus)
}

function copyStatuss(copyStatus) {
	if (copyStatus) {
		message.success('复制成功');
	} else {
		message.error('复制失败');
	}
}

//条目
class Detailss extends Component {
	//条目组件
	constructor(props) {
		super(props);

		this.state = {}
	}

	componentDidMount() {

	}

	componentDidUpdate = (prevProps) => {


	}


	render() {
		const isAdmin = this.props.isAdmin();
		let item = this.props.headdata;
		let defaultActiveKey = this.props.defaultActiveKey;
		let jdt;
		try {
			jdt = item.normal_count / item.all_count * 100;
		} catch (e) {
			jdt = 100;
		}
		return (
			<React.Fragment>
				<div className="ws100s edu-back-white sortinxdirection" style={{
					position: "relative"
				}}>
					<div className="ws100s teacherentrydiv ">
						<div className="ws100s sortinxdirection">
							<p className="sortinxdirection"  onClick={()=>this.props.qiandaoxiangq(false)}>
								<i style={{color:'#BBBBBB'}} className="iconfont icon-zuojiantou1  posiivsiconmyss mr5 colorbluesigin xiaoshou font-14" onClick={()=>this.props.qiandaoxiangq(false)}></i>
							</p>
							<p className="ws100s teachedivp ymaxnamewidthdivp86">
								{item && item.name}
							</p>
						</div>


						<div className="ws100s sortinxdirection mt17">
							<div className="teachedivps">
								签到人数：
							</div>
							<div className="progressivps">
								<Progress percent={jdt} showInfo={false} strokeColor="#1890ff"/>
							</div>
							<div className="progressivpss h28s">
								已签到 {item && item.normal_count ? item.normal_count : 0} /
								应签到 {item && item.all_count ? item.all_count : 0}
							</div>
						</div>


						<div className="ws100s sortinxdirection  mt5">
							<div className="ws75s sortinxdirection">


								<div className="teachedivps  h40s">
									签到发起人：
								</div>
								<div className="teachedivpsy ymaxnamewidth60 h40s">
									{item && item.author.user_name}
								</div>

								<div className="teachedivps ml20 h40s">
									签到方式：
								</div>
								<div className="teachedivpsy ymaxnamewidth80 h40s">
									{item && item.mode ?
										item.mode === "QRCODE" ?
											"二维码签到"
											: item.mode === "NUMBER" ?
											"数字签到"
											: item.mode === "QUICK" ?
												"快捷签到"
												: ""
										: ""}
								</div>

								<div className="teachedivps ml20 h40s">
									开始结束时间：
								</div>
								<div className="teachedivpsy h40s">
									{item && item.attendance_date} {item && item.start_time}-{item && item.end_time}
								</div>
							</div>
							{
								defaultActiveKey === "1" ?
									<div className="ws25s" style={item && item.mode === "NUMBER"?{
										position: "relative",
										overflow: 'hidden',
									}:{
										position: "relative",
									}}>
										{
											item && item.mode === "NUMBER" ?
												<div className="ws100s xaxisreverseorder ">
													<p className="h40s font-16 xiaoshou" style={{
														color: "#1890FF"
													}} onClick={() => {
														jsCopy("file_path" + 1)
													}}>
														复制签到码
													</p>
													<p className="h40s  font-16" style={{
														color: "#333333",
														marginRight: "10px",
													}}>
														{item&&item.code}
													</p>
													<p className="h40s  font-16" style={{
														color: "#909399"
													}}>签到码：</p>
													<div style={{
														overflow: 'hidden',
														height: "1px",
														width: "1px",
														position: "absolute",
														right: "-200px",
													}}>
														<input id={"file_path" + 1} className="file_path_input" value={item&&item.code}/>
													</div>
												</div>
												:
												item && item.mode === "QRCODE" ?
													<div style={{
														position: "absolute",
														bottom: "-11px",
														right: "0px",
													}}>
														<QRCode
															value={item&&item.code}  //value参数为生成二维码的链接
															size={84} //二维码的宽高尺寸
															fgColor="#000000"  //二维码的颜色
														/>
														<div className="font-14" style={{
															width: "84px",
															textAlign: "center",
															color: "#333333"
														}}>
															扫码签到
														</div>
													</div>

													: ""
										}


									</div>

									:
									""
							}

						</div>
					</div>

				</div>

			</React.Fragment>
		)
	}
}

export default Detailss;