import React,{ Component } from "react";
import { Modal,Radio,Input,Tooltip,Checkbox,Select, Row,Col } from "antd";
import axios from 'axios';
const { Search } = Input;
class SendTopics extends Component{
  constructor(props){
    super(props);
    this.state={
			courses:[],
			search:null,
			Radiolist:undefined,
			showcheck:false
    }
  }




  componentDidMount(){
   let{search}=this.state;
   this.onupdatalist(search)
  }

  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)=>{
  	 this.setState({
			 Radiolist:e.target.value
		 })
	}

	submitInfo=()=>{
		let{Radiolist}=this.state;
		let url=`/question_banks/send_to_course.json`;
		let object_id=this.props.checkBoxValues;
		let object_type=this.props.category;
		if(Radiolist===undefined){
      this.setState({
				showcheck:true
			})
		}else{
			axios.post(url,{
					object_id: object_id,
					object_type:object_type,
					course_id:Radiolist
				}
			).then((result)=>{
				if(result.data.status===0){
					this.props.updataslist()
					this.props.topicscancelmodel()
					this.props.showNotification(result.data.message)
				}else{
					this.props.showNotification(result.data.message)
				}
			}).catch((error)=>{
				console.log(error)
			})
		}

	}
  render(){
    let{courses,Radiolist,showcheck}= 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">
							温馨提示：选择的题将会发送到指定课堂
						</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.topicscancelmodel()} className="pop_close task-btn mr30">取消</a>
              <a className="task-btn task-btn-orange" onClick={()=>this.submitInfo()}>确定</a>
            </div>
          </div>
        </Modal>
      </div>
    )
  }
  
}
export default SendTopics;