import React, {Component} from "react";
import {Modal, Radio, Input, Tooltip, Checkbox, Select, Row, Col, Spin} from "antd";
import axios from 'axios';

const {Search} = Input;

class SendTopicsModel extends Component {
	constructor(props) {
		super(props);
		this.state = {
			courses: [],
			search: null,
			Radiolist: undefined,
			showcheck: false,
			smallisSpin: false,
			yslbanksMenu: undefined,
			exercise_id: null,
		}
	}


	componentDidMount() {
		// console.log("SendTopicssssssssssss");
		// console.log(this.props);
		let {search} = this.state;
		this.onupdatalist(search)
		this.setState({
			yslbanksMenu: this.props.banksMenu,
		})
	}

	//获取的课堂
	onupdatalist = (search) => {
		let url = "/question_banks/my_courses.json";
		axios.get(url, {
			params: {
				search
			}
		}).then((result) => {
			this.setState({
				courses: result.data.courses
			})
		}).catch((error) => {
			console.log(error);
		})
	}

	onSearchChange = (e) => {
		this.setState({
			search: e.target.value
		})
		// this.onupdatalist(e.target.value)
	}

	onSearch = (search) => {
		this.onupdatalist(search)
	}


	onChange = (e) => {
		console.log("SendTopics");
		console.log(e);
		this.setState({
			Radiolist: e.target.value
		})
	}

	submitInfo = () => {
		if(this.state.Radiolist){
				let url = `/examination_banks/${this.props.paramsid}/send_to_course.json`;
				var data = {
					course_id: this.state.Radiolist
				};
				this.getwangluodata(url, data);
		}else{
			this.props.showNotification(`您需要创建课堂，才能发送`);
			this.setState({
				showcheck: true,
				smallisSpin: false
			})
		}
	}
	getwangluodata = (url, data) => {
		this.setState({
			smallisSpin: true
		})
		var newOpenWindow=window.open('about:blank');  // 在ajax外部先打开空白新窗口

		axios.post(url, data).then((response) => {
			if (response) {
				if (response.data) {
					if (response.data.status === 0) {
						this.setState({
							exercise_id: response.data.exercise_id
						})
						try {
							newOpenWindow.location=response.data.first_category_url;
						}catch (e) {

						}
						this.props.submitInfos(false, null);
					}
				}
			}
			this.setState({
				smallisSpin: false
			})
		}).catch((error) => {
			console.log(error)
			this.setState({
				smallisSpin: false
			})
		});
	}

	render() {
		let {courses, Radiolist, showcheck, smallisSpin} = this.state;

		const radioStyle = {
			display: 'block',
			height: '30px',
			lineHeight: '30px',
		};

		return (
			<div>


				<style>
					{
						`
						.ant-modal-body{
						 padding:20px 40px;
						}
						.onSearchtopics input{
						  height:40px;
						}
						.over221{
						  height:221px;
						  overflow-y: auto;
						}

						`
					}
				</style>
				<Modal
					keyboard={false}
					title="发送至课堂"
					visible={this.props.visible}
					closable={false}
					footer={null}
					destroyOnClose={true}
					width={600}
				>
					<div className="newupload_conbox">
						<div className="mb15 font-14 edu-txt-center color-orange-tip">
							{this.props&&this.props.mypaper===true?
								"温馨提示：当前试卷将会发送到指定课堂"
								:
							  "温馨提示：选择的试卷将会发送到指定课堂"
							}
						</div>
						<div className="mb5"
							// onMouseLeave={this.closeList}
						>
							<Search
								className="mb14 onSearchtopics"
								placeholder="请输入课堂名称进行搜索"
								onChange={this.onSearchChange}
								onSearch={this.onSearch}
							></Search>
						</div>
						<div className="edu-back-skyblue pl15 pr15 clearfix over221 pt5">
							<Radio.Group onChange={this.onChange} value={Radiolist}>
								{
									courses && courses.map((item, key) => {
										return (
											<div className="mt5" key={key}>
												<Radio style={radioStyle} value={item.course_id} key={item.course_id}>
													{item.course_name}
												</Radio>
											</div>
										)
									})
								}
							</Radio.Group>

						</div>
						{showcheck === true ? <div className={"color-red mt10"}>请先选择课堂</div> : ""}
						<div className="mt20 clearfix edu-txt-center">
							<a onClick={() => this.props.submitInfos(false, null)} className="pop_close task-btn mr30 ">取消</a>
							<a className="task-btn task-btn-orange" onClick={() => this.submitInfo()}>确定</a>
						</div>
					</div>
				</Modal>
			</div>
		)
	}

}

export default SendTopicsModel;
