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",
			keywordteachers: "",
			team_idstudents: undefined,
			team_idteachers: undefined,
			teacher_ids: undefined,
			keywordstudents: "",
			Aggregatedata: [],
			name: "",
			teacher_idss: [],
			member_ids: [],

		}
	}

	componentDidMount() {


	}

	creident = (name, teacher_ids, member_ids) => {
		let collaborators = `/competitions/${"gcc-course-2019"}/competition_teams.json`;
		axios.post(collaborators, {
			name: name,
			teacher_ids: teacher_ids,
			member_ids: member_ids,
		}).then((result) => {
			if (result) {
				if (result.data) {


				}
			}
		}).catch((error) => {
			console.log(error)
		});
	}

	Getteacherdata = (keywordteachers, team_idteachers, teacher_ids) => {
		//老师姓名  keyword
		//当前战队ID team_id
		//当前老师ID数组 teacher_ids
		console.log("搜索的老师");
		const datas = {
			keyword: keywordteachers,
			team_id: team_idteachers,
			teacher_ids: teacher_ids,
		};
		let url = `/competitions/${"gcc-course-2019"}/teachers.json`;
		axios.get((url), {params: datas}).then((result) => {
			if (result) {
				if (result.data) {
					console.log(result);
					this.setState({
						teacher_ids: result.data.teachers
					})
				}
			}
		}).catch((error) => {
			console.log(error);
		})
	};
	Getstudentsdata = (keywordstudents, team_idstudents, student_ids) => {
		//学生姓名  keyword
		//当前战队ID team_id
		//当前队员ID数组 student_ids
		console.log("搜索的学生");
		const datas = {
			keyword: keywordstudents,
			team_id: team_idstudents,
			student_ids: student_ids,
		};
		let url = `/competitions/${"gcc-course-2019"}/students.json`;
		axios.get((url), {params: datas}).then((result) => {
			if (result) {
				if (result.data) {
					console.log(result);
					this.setState({
						member_ids: result.data.teachers
					})

				}
			}
		}).catch((error) => {
			console.log(error);
		})
	};

	//老师输入框事件
	teacheronChange = (e) => {
		console.log(e.target.value);
		console.log("老师输入框事件|||||||||||123123123");
		this.setState({
			person1: true,
			keywordteachers: e.target.value
		})
	};

	//学生输入框事件
	studentsonChange = (e) => {
		console.log("学生输入框事件");
		console.log(e);
		this.setState({
			person2: true,
			keywordstudents: e.target.value
		})

	}

	//点击获取老师数据
	getdatacpersondiv1Items = (object) => {
		console.log("点击获取老师数据");
		console.log(object);
		this.setState({
			person1: false,
			keywordteachers: object.name
		})
	}
	//点击获取学生数据2
	getdatacpersondiv1Items2 = (object) => {
		console.log("点击获取学生数据2");
		console.log(object);
		this.setState({
			person2: false,
		})
	}
	//输入框事件
	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);
		const {keywordteachers, team_idteachers, teacher_ids} = this.state;
		this.Getteacherdata(keywordteachers, team_idteachers, teacher_ids);
	}

	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,
			keywordteachers, team_idteachers, teacher_ids,
			keywordstudents, team_idstudents, student_ids
		} = 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>
		);
		var cpersondiv1Items = [];
		if (teacher_ids) {
			cpersondiv1Items = teacher_ids.map((item, index) =>
				<a className="reglistviewdivss2 " key={index} style={{
					width: "100%",
					display: "flex",
					justifyContent: " space-around",
					alignItems: "center",
					height: "40px",

				}}
					 onClick={() => this.getdatacpersondiv1Items(item)}
				>
					<p className="    cpersondiv1Items"
						 style={{
							 textAlign: "center",
							 width: "100px"
						 }}
					>{item.name === undefined || item.name === null || item.name === "" ? "--" : item.name}</p>
					<p className="    cpersondiv1Items"
						 style={{
							 textAlign: "center",
							 width: "100px"

						 }}
					> {item.identity === undefined || item.identity === null || item.identity === "" ? "--" : item.identity}</p>
					<p className="    cpersondiv1Items"
						 style={{
							 textAlign: "center",
							 width: "120px"

						 }}
					>{item.school_name === undefined || item.school_name === null || item.school_name === "" ? "--" : item.school_name}</p>
				</a>
			);
		}

		const cpersondiv1 = (
			<div className={"   backgroundspersondiv cpersondiv1 borders2"}>
				<Spin spinning={false}>
							<div className="demo-infinite-container2">
								<InfiniteScroll
									initialLoad={false}
									pageStart={0}
									loadMore={() => this.handleInfiniteOnLoad1()}
									// hasMore={!this.state.loading1 && this.state.hasMore}
									hasMore={false}
									useWindow={false}
								>
									{
										cpersondiv1Items
									}

								</InfiniteScroll>
							</div>
						</Spin>
			</div>
		)
		const persondiv2Items = test3.map((item, index) =>
			<a className="reglistviewdivss2 " key={index} style={{
				width: "100%",
				display: "flex",
				justifyContent: " space-around",
				alignItems: "center",
				height: "40px",
			}}
				 onClick={() => this.getdatacpersondiv1Items2(item)}
			>
				<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>
			</a>
		);
		const persondiv2 = (
			<div className={"   backgroundspersondiv cpersondiv1 borders2"}>
				{/*this.state.loading2*/}
				<Spin spinning={false}>
							<div className="demo-infinite-container2">
								<InfiniteScroll
									initialLoad={false}
									pageStart={0}
									loadMore={() => this.handleInfiniteOnLoad2()}
									// hasMore={!this.state.loading2 && this.state.hasMore}
									hasMore={false}
									useWindow={false}
								>
									{
										persondiv2Items
									}

								</InfiniteScroll>
							</div>
						</Spin>
			</div>
		);
		return (

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

				<style>
					{
						`
						a:hover
						{
						background-color:#F6F4F4;
						}
						`
					}
				</style>
				<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}
								onFocus={this.inputOnFocus}
								onChange={(e) => this.teacheronChange(e)}
								value={this.state.keywordteachers}
								suffix={
									<i class="iconfont icon-sousuo"
										 onClick={() => this.Getteacherdata(keywordteachers, team_idteachers, teacher_ids)}/>
								}
							/>
						</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}
								onFocus={this.inputOnFocus2}
								onChange={(e) => this.studentsonChange(e)}
								value={this.state.keywordstudents}
								suffix={
									<i class="iconfont icon-sousuo "
										 onClick={() => this.Getstudentsdata(keywordstudents, team_idstudents, student_ids)}/>
								}
							/>
						</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 onClick={() => this.props.Tmoconfirm1(false)}> 取消</p>
							</div>
							<div className="personbut2">
								<p onClick={() => this.props.Tmoconfirm1(true)}>确定</p>
							</div>
						</div>
					</div>
				</div>
			</Modal>
		)
	}
}

export default PersonModal;