import React, {Component} from 'react';
import {getImageUrl} from 'educoder';
import {Modal, Input, Spin, Tooltip, Icon, Dropdown, Button} from 'antd';
import axios from 'axios';
import competition from '../comcss/competition.css';
import Registrationitem from "../Registrationitem";
import InfiniteScroll from 'react-infinite-scroller';
// import PersonModaltion from "./PersonModaltion";
const {Search} = Input;

//立即申请试用
class PersonModal extends Component {

	constructor(props) {
		super(props);
		this.state = {
			addonAfter: 0,
			test: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
			test2: [19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
			test3: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18],
			loading: false,
			loading1: false,
			loading2: false,
			hasMore: true,
			person1: false,
			person2: false,
			Numberofteammentors: "0-3",
			Thecurrentnumber: "3",

		}
	}

	modalCancel = () => {
		window.location.href = "/"
	}

	setDownload = () => {
		//立即联系
	};

	//输入框事件
	changeTopicName = (e) => {
		// console.log("调用了changeTopicName");
		let num = parseInt(e.target.value.length);
		if (num > 60) {
			return;
		}
		this.setState({
			addonAfter: num < 0 ? 0 : num
		});
		this.setState({
			polls_nametest: e.target.value
		})
	};

	//onSearchsou
	onSearch = (value) => {
		console.log("搜索的数据" + value);
	};
	handleInfiniteOnLoad = () => {
		this.setState({
			loading: true,
		})
		const test3 = this.state.test;
		this.state.test2.forEach(function (item) {
			test3.push(item)
		});
		setTimeout(() => {
			this.setState({
				test: test3,
				hasMore: true,
				loading: false,
			});
		}, 1000)

	}
	handleInfiniteOnLoad1 = () => {
		console.log("调用了方法1111");
		this.setState({
			loading1: true,
		})
		setTimeout(() => {
			console.log("调用了方法11112");
			this.setState({
				loading1: false,
				hasMore: true,
			});
		}, 1000)

	}
	handleInfiniteOnLoad2 = () => {
		console.log("调用了方法1111");
		this.setState({
			loading2: true,

		})
		setTimeout(() => {
			console.log("调用了方法11113");
			this.setState({
				hasMore: true,
				loading2: false,
			});
		}, 1000)

	}
	inputOnBlur = (e) => {
		console.log("inputOnBlur");
		console.log(e);
		this.setState({
			person1: false
		})
	}
	inputOnBlur2 = (e) => {
		console.log("inputOnBlur");
		console.log(e);
		this.setState({
			person2: false
		})
	}

	startSearch = (e) => {
		console.log("startSearch");
		console.log(e);
	}

	inputOnFocus = (e) => {
		console.log("inputOnFocus");
		console.log(e);

		this.setState({
			person1: true
		})
	}

	inputOnFocus2 = (e) => {
		console.log("inputOnFocus2");
		console.log(e);
		this.setState({
			person2: true
		})
	}

	render() {
		const {
			addonAfter, test, test3, Numberofteammentors, Thecurrentnumber, person1, person2
		} = this.state;
		//Modal
		//keyboard是否支持键盘 esc 关闭
		//closable    是否显示右上角的关闭按钮
		//底部内容，当不需要默认底部按钮时，可以设为 footer={null}
		//destroyOnClose 关闭时销毁 Modal 里的子元素
		//centered 垂直居中展示 Modal
		//visible 弹出框是否显示
		const listItems = test.map((item, index) =>
			<div className="reglistviewdivss2 " style={{
				width: "100%",
				display: "flex",
				justifyContent: " space-around",
				alignItems: "center",
				height: "40px",
			}}>
				<p className="    reglistviewdivss4p"
					 style={{
						 textAlign: "center",
					 }}
				>陈明</p>
				<p className="    reglistviewdivss4p"
					 style={{
						 textAlign: "center",
					 }}
				>导师／创建者</p>
				<p className="    reglistviewdivss5p"
					 style={{
						 textAlign: "center",
					 }}
				>国防科技大学</p>
				<p className="    reglistviewdivss2p"
					 style={{
						 textAlign: "center",
					 }}
				>职称；教授</p>
				<p className="    reglistviewdivss33p"
					 style={{
						 textAlign: "center",
					 }}
				><i className="iconfont icon-guanbi font-12"/></p>
			</div>
		);
		const cpersondiv1Items = test3.map((item, index) =>
			<div className="reglistviewdivss2 " style={{
				width: "100%",
				display: "flex",
				justifyContent: " space-around",
				alignItems: "center",
				height: "40px",
			}}>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>李小猫{index}</p>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>职称：副教授</p>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>国防科技大学</p>
			</div>
		);
		const cpersondiv1 = (
			<div className={"   backgroundspersondiv cpersondiv1 borders2"}>
				{
					person1 ?
						<Spin spinning={this.state.loading1}>
							<div className="demo-infinite-container2">
								<InfiniteScroll
									initialLoad={false}
									pageStart={0}
									loadMore={() => this.handleInfiniteOnLoad1()}
									hasMore={!this.state.loading1 && this.state.hasMore}
									useWindow={false}
								>
									{
										cpersondiv1Items
									}

								</InfiniteScroll>
							</div>
						</Spin>
						:
						""
				}
			</div>
		)
		const persondiv2Items = test3.map((item, index) =>
			<div className="reglistviewdivss2 " style={{
				width: "100%",
				display: "flex",
				justifyContent: " space-around",
				alignItems: "center",
				height: "40px",
			}}>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>李小猫{index}</p>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>职称：副教授</p>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
					 }}
				>国防科技大学</p>
				<p className="    cpersondiv1Items"
					 style={{
						 textAlign: "center",
						 color: "#FF6800",
					 }}
				>已加入其他战队</p>
			</div>
		);
		const persondiv2 = (
			<div className={"   backgroundspersondiv cpersondiv1 borders2"}>
				{
					person2 === true ?
						<Spin spinning={this.state.loading2}>
							<div className="demo-infinite-container2">
								<InfiniteScroll
									initialLoad={false}
									pageStart={0}
									loadMore={() => this.handleInfiniteOnLoad2()}
									hasMore={!this.state.loading2 && this.state.hasMore}
									useWindow={false}
								>
									{
										persondiv2Items
									}

								</InfiniteScroll>
							</div>
						</Spin>
						: ""
				}

			</div>
		)
		return (

			<Modal
				keyboard={false}
				closable={false}
				footer={null}
				destroyOnClose={true}
				title="创建战队"
				centered={true}
				visible={this.props.modalsType === undefined ? false : this.props.modalsType}
				width="620px"
			>


				<div className="permaindiv">
					{/*队名*/}
					<style>{
						`
																		.yslzxueshiskmc .ant-input{
																		border-right: none !important;
																		height: 40px !important;
																	  width: 428px !important;

																		}
																		
																		.yslzxueshiskmc .ant-input-wrapper {
																	    max-width: 487px;
																		}
																		 .yslzxueshisy span .ant-input-group-addon{
																		  width: 65px !important;
																		  background-color: #fafafa!important;
																		 }
																		  .yslzxueshisy .ant-input-wrapper span{
															         width: 58px !important;
																		 }
																		 
																		 
																		.yslzxueshiskmc .ant-input-group-addon{
																		  width: 65px !important;
																		  background-color: #fafafa!important;
																		 }
																		 .yslzxueshiskmc .ant-input-group-wrapper{
																		   width: 408px !important;
																		 }
																		 .yslzxueshiskmcs .ant-input-group-wrapper{
																		   width: 408px !important;
																		 }
																		
																		`
					}</style>
					<div style={{
						display: "flex",
						flexDirection: "initial",

					}}>
						<p style={{
							width: "59px",
							marginTop: "9px",
							fontSize: "16px",
						}}>
								<span style={{
									color: "#f5222d",
									fontSize: "16px",
								}}>*</span>
							队名:
						</p>

						<Input className="yslzxueshiskmc" onInput={this.changeTopicName} placeholder="请输入您的战队名称，最多不超过60个字符"
									 addonAfter={String(addonAfter) + "/60"} maxLength={60}/>

					</div>


					{/*导师*/}
					<div style={{
						display: "flex",
						flexDirection: "initial",
						marginTop: "14px",
					}}>
						<p style={{
							width: "59px",
							marginTop: "9px",
							fontSize: "16px",
						}}>
								<span style={{
									color: "#f5222d",
									fontSize: "16px",
								}}>*</span>
							导师:
						</p>
						<style>
							{
								`
								.yslzxueshiskmcd .ant-input{
																		height: 40px !important;
																		width: 487px !important;
																		}
								`
							}
						</style>
						{/*<div className={"yslzxueshiskmcd2"}>*/}
						<Dropdown overlay={cpersondiv1} getPopupContainer={trigger => trigger.parentNode}
											visible={this.state.person1}>
							<Input
								className="yslzxueshiskmcd"
								placeholder="请输入老师姓名的任意关键字进行搜索，可以后续在添加"
								onPressEnter={this.startSearch}
								onBlur={this.inputOnBlur}
								onFocus={this.inputOnFocus}
								suffix={
									<i class="iconfont icon-sousuo"/>
								}
							/>
						</Dropdown>
						{/*</div>*/}
					</div>

					{/*队员*/}
					<div style={{
						display: "flex",
						flexDirection: "initial",
						marginTop: "14px",
					}}>
						<p style={{
							width: "59px",
							marginTop: "9px",
							fontSize: "16px",
						}}>
								<span style={{
									color: "#f5222d",
									fontSize: "16px",
								}}>*</span>
							队员:
						</p>
						<style>
							{
								`
								.yslzxueshiskmcd .ant-input{
																		height: 40px !important;
																		width: 487px !important;
																		}
								`
							}
						</style>
						{/*<Search*/}
						{/*	*/}
						{/*	placeholder="请输入想要队员姓名的任意关键字进行搜索"*/}
						{/*	onSearch={(value) => this.onSearch(value)}*/}
						{/*/>*/}

						<Dropdown overlay={persondiv2} getPopupContainer={trigger => trigger.parentNode}
											visible={this.state.person2}>
							<Input
								className="yslzxueshiskmcd"
								placeholder="请输入想要队员姓名的任意关键字进行搜索"
								onPressEnter={this.startSearch}
								onBlur={this.inputOnBlur2}
								onFocus={this.inputOnFocus2}
								suffix={
									<i class="iconfont icon-sousuo "/>
								}
							/>
						</Dropdown>

					</div>


					{/*表格*/}
					<div style={{marginTop: "18px", marginLeft: "53px", border: "1px solid #E0E0E0"}}>
						{/*<PersonModaltion ></PersonModaltion>*/}
						<div>
							<div className="reglistviewdivss2 " style={{
								width: "100%",
								display: "flex",
								justifyContent: " space-around",
								alignItems: "center",
								height: "40px",
								backgroundPosition: "center",
								backgroundSize: "110% 100%",
								backgroundColor: "#E0E0E0",

							}}>
								<p className="    reglistviewdivss4p"
									 style={{
										 textAlign: "center",
									 }}
								>姓名</p>
								<p className="    reglistviewdivss4p"
									 style={{
										 textAlign: "center",
									 }}
								>角色</p>
								<p className="    reglistviewdivss5p"
									 style={{
										 textAlign: "center",
									 }}
								>单位</p>
								<p className="    reglistviewdivss2p"
									 style={{
										 textAlign: "center",
									 }}
								>其他</p>
								<p className="    reglistviewdivss3p"
									 style={{
										 textAlign: "center",
									 }}
								>操作</p>
							</div>
						</div>
						<Spin spinning={this.state.loading}>
							<div className="demo-infinite-container">
								<InfiniteScroll

									initialLoad={false}
									pageStart={0}
									loadMore={() => this.handleInfiniteOnLoad()}
									hasMore={!this.state.loading && this.state.hasMore}
									useWindow={false}
								>
									{listItems}

								</InfiniteScroll>
							</div>
						</Spin>
					</div>

					{/*最后一行文字*/}
					<p style={{
						marginLeft: "53px",
						color: "#D0021B",
						fontSize: "12px",
						marginTop: "9px"
					}}>战队导师为{Numberofteammentors}人,现在为{Thecurrentnumber}人</p>
					<div style={{
						marginTop: "24px",
						marginLeft: "53px",
						display: "flex",
						alignItems: "center",
						paddingBottom: "20px"
					}}>
						<div style={{
							display: "flex",
							justifyContent: "center",
							width: "100%"
						}}>
							<div className="personbut1">
								<p>取消</p>
							</div>
							<div className="personbut2">
								<p>确定</p>
							</div>
						</div>
					</div>
				</div>
			</Modal>
		)
	}
}

export default PersonModal;