educoder/public/react/src/modules/modals/SendTopics.js

import React,{ Component } from "react";
import { Modal,Radio,Input,Tooltip,Checkbox,Select, Row,Col } from "antd";
import axios from 'axios';
import { SnackbarHOC } from 'educoder';
import Modals from './Modals';
const { Search } = Input;
class SendTopics extends Component{
  constructor(props){
    super(props);
    this.state={
      sentShixunPath:false,
      sendToCourseList:undefined,
      openSearch:false,
      sendToCourseId:undefined,
      sendToShixunArray:[],
      Modalstype:false,
      cardsModalcancel:this.cardsModalcancel,
      cardsModalsave:this.cardsModalsave,
      modalsTopval:'',
      Modalsbottomval:'',
      courseurl:''
    }
  }


  //发送至
  SentToLesson =() =>{
		let id=this.props.detailInfoList.id;
		let url="/paths/"+id+"/choose_course.json";
		axios.get(url).then((result)=>{
			if(result.status==200){

				if (result.data.status === 403||result.data.status === 402||result.data.status === 407||result.data.status === 408) {

				}else{
					this.setState({
						sendToCourseList:result.data,
						sentShixunPath:true
					})
				}

			}
		}).catch((error)=>{
			console.log(error);
		})
    // this.setState({
    //   sentShixunPath:true
    // })
  }
  //隐藏发送至弹框
  hideSenttothevalue =()=>{
    this.setState({
      sentShixunPath:false,
			sendToShixunArray:[],
			sendToCourseId:undefined,
    })
		this.props.topicscancelmodel()
  }
  //打开课堂列表下拉框
  openList=()=>{
    this.setState({
      openSearch:true
    })
  }
  //关闭课堂列表下拉框
  closeList=()=>{
    this.setState({
      openSearch:false
    })
  }
  
  // 选择课堂获取选中的Id
  selectCloseList=(e)=>{
    this.setState({
      openSearch:false,
      sendToCourseId:e
    })
  }

  //选择checkbox
  changeCheckBoxs=(list)=>{
    this.setState({
      sendToShixunArray:list,
      // shixunNum:list.length
    })
  }
  
  //确认提交
  submitInfo=()=>{
    let {sendToCourseId,sendToShixunArray}=this.state;
    if(sendToCourseId===undefined){
      this.props.showSnackbar("您还未选择发送的课堂");
    }else if(parseInt(sendToShixunArray.length)==0){
      this.props.showSnackbar("您还未选择实训");
    }else{
      let id=this.props.detailInfoList.id;
      let url="/paths/"+id+"/send_to_course.json";
      axios.post(url,{
        shixun_ids:sendToShixunArray,
        course_id:sendToCourseId
      }).then((result)=>{
        if(result.data.status===1){
          this.setState({
            Modalstype:true,
            sentShixunPath:false,
            Modalstopval:result.data.message,
            courseurl:result.data.url,
						sendToShixunArray:[],
						sendToCourseId:undefined,
          })
        }
      }).catch((error)=>{
        console.log(error);
      })
    }
  }

  componentDidMount(){
    // let id=this.props.detailInfoList.id;
    // let url="/paths/"+id+"/choose_course.json";
    // axios.get(url).then((result)=>{
    //   if(result.status==200){
    //     this.setState({
    //       sendToCourseList:result.data
    //     })
    //   }
    // }).catch((error)=>{
    //   console.log(error);
    // })
  }

 cardsModalcancel=()=>{
   this.setState({
     Modalstype:false,
   })
 }
  cardsModalsave=()=>{
    let {courseurl}=this.state;
    window.location.href =courseurl;
  }


  render(){
    let{sentShixunPath,sendToCourseList,Modalstype,Modalstopval,Modalsbottomval,cardsModalcancel,cardsModalsave}= this.state;
    return(
      <div>

        <Modals
          modalsType={Modalstype}
          modalsTopval={Modalstopval}
          modalsBottomval={Modalsbottomval}
          modalCancel={cardsModalcancel}
          modalSave={cardsModalsave}
        >
        </Modals>
	      <style>
					{
						`
						.ant-modal-body{
						 padding:20px 40px;
						}
						.onSearchtopics input{
						  height:40px;
						}
						.over221{
						  height:221px;
						}
						`
					}
				</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">

							{
								sendToCourseList && sendToCourseList.stages.map((item,key)=>{
									return(
										item.shixuns.map((items,keys)=>{
											return(
												<div className="mt5" key={keys}>
													<Checkbox name={key} value={items.shixun_id} key={items.shixun_id}>{items.shixun_name}</Checkbox>
												</div>
											)
										})

									)
								})
							}
            </div>

            <div className="mt20 clearfix edu-txt-center">
              <a onClick={this.hideSenttothevalue} className="pop_close task-btn mr30">取消</a>
              <a className="task-btn task-btn-orange" onClick={this.submitInfo}>确定</a>
            </div>
          </div>
        </Modal>
      </div>
    )
  }
  
}
export default SnackbarHOC()(SendTopics);