import React,{ Component } from "react";
import { Modal,Checkbox,DatePicker} from "antd";
import { handleDateString } from 'educoder';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
const CheckboxGroup = Checkbox.Group;
const dateFormat = 'YYYY-MM-DD HH:mm';

function range(start, end) {
	const result = [];
	for (let i = start; i < end; i++) {
		result.push(i);
	}
	return result;
}
function disabledDateTime() {
	return {
		// disabledHours: () => range(0, 24).splice(4, 20),
		disabledMinutes: () => range(1, 30).concat(range(31, 60)),
		// disabledSeconds: () => [55, 56],
	};
}


function disabledDate(current) {
	return current && current < moment().endOf('day').subtract(1, 'days');
}



class OneSelfOrderModal extends Component{
	constructor(props){
		super(props);
		this.state={
			group_ids:[],
			endtime:"",
			course_groups:undefined,
			Checkboxtype:true
		}
	}
	componentDidMount() {


		if(this.props.course_groups!=undefined&&this.props.course_groups.length!=0){
				if(this.props.course_groups!=undefined) {
						let arr = this.props.course_groups.map(item => item.id);
						let newarr = [];
						let course_groups = this.props.course_groups;
						course_groups.map((item, key) => {
							if (item.end_time === null) {
								// if(this.props.starttimesend===undefined){
								// 	item.end_time = moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm");
								// }else{
								// 	item.end_time = moment(handleDateString(this.props.starttimesend)).format("YYYY-MM-DD HH:mm");
								// }
								item.end_time = moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm");
								newarr.push(item)
							} else {
								newarr.push(item)
							}
						})
						this.setState({
							course_groups: newarr
						})
						this.shixunhomeworkedit(arr);
				}
		}

		if(this.props.starttimes===undefined||this.props.starttimes===""||this.props.starttimes===null){
			if(this.props.starttimesend===undefined){
				this.setState({
					endtime:moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm")
				})
			}else{
				this.setState({
					endtime:moment(handleDateString(this.props.starttimesend)).format("YYYY-MM-DD HH:mm")
				})
			}

		}else{
			if(this.props.starttimesend===undefined){
				this.setState({
					endtime:moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm")
				})
			}else{
				this.setState({
					endtime:moment(handleDateString(this.props.starttimesend)).format("YYYY-MM-DD HH:mm")
				})
			}
		}
	}
	componentDidUpdate=(prevProps)=>{

		if(prevProps.course_groups!=this.props.course_groups){
				if(this.props.course_groups!=undefined){
						let arr=this.props.course_groups.map(item => item.id);
						let newarr=[];
						let course_groups=this.props.course_groups;
						course_groups.map((item,key)=>{
							if(item.end_time===null){
								item.end_time = moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm");
								newarr.push(item)
							}else{
								newarr.push(item)
							}
						})
						this.setState({
							course_groups:newarr
						})
						this.shixunhomeworkedit(arr);
				}
		}


		if(prevProps.starttimes!=this.props.starttimes){

			if(this.props.starttimes===undefined||this.props.starttimes===""||this.props.starttimes===null){
				if(this.props.starttimesend===undefined){
					this.setState({
						endtime:moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm")
					})
				}else{
					this.setState({
						endtime:moment(handleDateString(this.props.starttimesend)).format("YYYY-MM-DD HH:mm")
					})
				}

			}else{
				if(this.props.starttimesend===undefined){
					this.setState({
						endtime:moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm")
					})
				}else{
					this.setState({
						endtime:moment(handleDateString(this.props.starttimesend)).format("YYYY-MM-DD HH:mm")
					})
				}
			}
		}
	}

	//勾选实训
	shixunhomeworkedit=(list)=>{

		this.setState({
			group_ids:list
		})
		this.props.getcourse_groupslist && this.props.getcourse_groupslist(list)
	}

	onChangeTimeend= (date, dateString) => {
		// console.log('startValue',dateString);

		this.setState({
			endtime: date===null?"":handleDateString(dateString),
		})

	}

	onChangeTimeendlist=(date, dateString,id)=>{
		let {course_groups,endtimetypeid}=this.state;
		if(endtimetypeid===id){
			if(date!=null){
				this.setState({
					endtimetypeid:undefined
				})
			}
			if(moment(dateString,"YYYY-MM-DD HH:mm") <= moment(this.props.starttime,"YYYY-MM-DD HH:mm")){}else{
				if(date!=null){
					this.setState({
						endtimetypeid:undefined
					})
				}
			}
		}
		let arr=course_groups;

		 arr.map((item,key)=>{
		 	if(item.id===id){
				item.end_time=date===null?"":moment(handleDateString(dateString)).format('YYYY-MM-DD HH:mm')
			}
		 })

		this.setState({
			course_groups:arr
		})

	}

	propsSaves=(ds,endtime)=>{
    let {course_groups}=this.state;

		if(this.props.typs=="end"){
			this.props.Saves()
		}else{

			if(this.props.typs!="end"){
				if(!endtime){
					this.setState({
						endtimetype:true,
						endtimetypevalue:"截止时间不能为空"
					})
					return
				}
				if(moment(endtime,"YYYY-MM-DD HH:mm") <= moment(this.props.starttime,"YYYY-MM-DD HH:mm")){
					this.setState({
						endtimetype:true,
						endtimetypevalue:"必须晚于当前时间"
					})
					return
				}
			}

			let type=false
			if(course_groups===undefined||course_groups.length===0){
				this.props.Saves(ds,moment(handleDateString(endtime),"YYYY-MM-DD HH:mm").format("YYYY-MM-DD HH:mm"))
			}else{
				 let arr=[]
				 ds.map((item,key)=>{
					 course_groups.map((items,key)=>{
					 	if(item===items.id){
					 		if(!items.end_time){
								type=true
								this.setState({
									endtimetype:true,
									endtimetypeid:items.id,
									endtimetypevalue:"截止时间不能为空"
								})
								return

								// arr.push(moment(moment(handleDateString(this.props.staytime)).add(1, 'week')).format("YYYY-MM-DD HH:mm"))
							}else{
								if(moment(items.end_time,"YYYY-MM-DD HH:mm") <= moment(this.props.starttime,"YYYY-MM-DD HH:mm")){
									this.setState({
										endtimetype:true,
										endtimetypevalue:"必须晚于当前时间"
									})
									return
								}
								arr.push(items.end_time)
							}
						}
					 })
				 })

				if(type===false){
					this.props.Saves(ds,arr)
				}

			}


		}
	}

	Checkboxtype=(e)=>{

		let {course_groups}=this.state;

		let arr=[];
   if(e.target.checked==true){
		 course_groups.map((item,key)=>{
			 arr.push(item.id)
		 })
	 }else{
		 arr=[]
	 }
		this.setState({
			Checkboxtype:e.target.checked,
			group_ids:arr
		})
	}

	render(){
		let {group_ids,endtime,course_groups}=this.state;
    console.log(this.props.modaltype)
		let course_groupstype=course_groups===undefined||course_groups.length===0;
		// TODO course_groups为空时的处理
		return(
			<div>
				<style>
					{
						`
					.ant-input, .ant-input .ant-input-suffix{
							background-color: #fff !important;
					}
					.width300{
					 width:300px;
           display: inline-block;
					}
					`
					}
				</style>
				{
					this.props.OneSelftype===true?<style>
						{
							`
              body {
							  overflow: hidden !important;
							}
              `
						}
					</style>:""
				}
				{
					this.props.OneSelftype===true? <Modal
						keyboard={false}
						className={"HomeworkModal"}
						title={this.props.modalname}
						visible={this.props.OneSelftype}
						closable={false}
						footer={null}
						destroyOnClose={true}
					>
						<div className="task-popup-content">


							{ this.props.usingCheckBeforePost ?
								<React.Fragment>
									<p className="task-popup-text-center font-16">
										<span>发布设置均可修改，</span>
										<span className={"color-blue underline"} onClick={this.props.onToPublishClick}>
                点击修改
                </span>
									</p>
									<p className="task-popup-text-center font-16 mt10">
										此设置将对所有分班生效
									</p>
								</React.Fragment> :
								<React.Fragment>
									<p className="task-popup-text-center font-16">
										{this.props.Topval}
										<span className={"color-blue underline"}>{this.props.Topvalright}</span>
									</p>
									{/*<p className="task-popup-text-center font-16 mt10">*/}
										{/*{this.props.Botvalleft===undefined?"":<span className={"colorFF6800"}>"{this.props.Botvalleft}"</span>}*/}
										{/*{this.props.Botval}*/}
									{/*</p>*/}
								</React.Fragment>  }


							{this.props.starttime===undefined||
							this.props.starttime===""?""
								: <p className="task-popup-text-center font-16 mt20 mb10">
									{/*<span className={"font-14 mr20 color979797"}>*/}
											{/*<span className={"mr10"}>发布时间:</span>*/}
										{/*{this.props.starttime}</span>*/}
									{this.props.modaltype===undefined||this.props.modaltype===2?	<span className={"font-14 color979797"}>
									{/*{this.props.endtime}*/}
								  <span className={"mr10"}>截止时间</span>
									<DatePicker
										dropdownClassName="hideDisable"
										showTime={{ format: 'HH:mm' }}
										disabledTime={disabledDateTime}
										disabledDate={disabledDate}
										showToday={false}
										locale={locale}
										format={dateFormat}
										placeholder="请选择截止时间"
										id={"endTime"}
										width={"210px"}
										value={endtime===null||endtime===""?"":moment(endtime, dateFormat)}
										onChange={this.onChangeTimeend}
										className={ this.state.endtimetype===true?"noticeTip":""}
									/>

										{/*<div className={"fr mr90 mt5"}>(仅支持半点和整点)</div>*/}
                </span>:""}

								</p>}
							{/* usingCheckBeforePost 为true的时候 全选所有分班 */}

							<style>
								{
									`
                  .HomeworkModal .ant-checkbox-wrapper {
                        margin-top: 0px;
                        float: left;
                    }

               	  .upload_select_box li:hover {
										background: transparent;
									}

									.F4FAFF{
									background: #F4FAFF;
									}
                  `
								}
							</style>
							{this.props.modaltype===undefined||this.props.modaltype===2
							|| this.props.usingCheckBeforePost ?"":<div className="clearfix edu-txt-center lineh-40 F4FAFF">
								<li style={{ width: '100%',padding: "0px 10px"}} className={"mb10"}>
									<span style={{"float":"left","color":"#05101A"}} className="task-hide color-grey-name color-grey-9">分班名称</span>
									<span style={{"float":"right","color":"#05101A","margin-right": "145px"}} className="task-hide color-grey-name color-grey-9">截止时间</span>
								</li>
							</div>}
							{this.props.modaltype===undefined||this.props.modaltype===2
							|| this.props.usingCheckBeforePost ?"":<ul className={this.state.endtimetypeid!=undefined&&this.state.endtimetype===true?"upload_select_box fl clearfix mb20":"upload_select_box fl clearfix mb30"}
																												 style={{"overflow-y":"auto",padding:"10px 0px"}}
																												 id="search_not_members_list"

							>

								{  <Checkbox.Group style={{ width: '100%' }} value={group_ids}  onChange={this.shixunhomeworkedit}>
									{
										course_groups===undefined||course_groups.length===0?"":course_groups.map((item,key)=>{

											return(
												<div className="clearfix edu-txt-center lineh-40 mb10" key={key}>
													<li  style={{ width: '100%',padding: "0px 10px"}} className={"mb10"}>
														<Checkbox
															className="task-hide edu-txt-left width300"
															name="shixun_homework[]"
															value={item.id}
															key={item.id}
														>
															<span style={{"textAlign":"left","color":"#05101A"}} className="task-hide color-grey-name">{item.name}</span>
														</Checkbox>
														<DatePicker
															dropdownClassName="hideDisable"
															showTime={{ format: 'HH:mm' }}
															disabledTime={disabledDateTime}
															disabledDate={disabledDate}
															showToday={false}
															locale={locale}
															format={dateFormat}
															placeholder="请选择截止时间"
															width={"210px"}
															value={item.end_time===null||item.end_time===""?"":moment(handleDateString(item.end_time), dateFormat)}
															onChange={(e,data)=>this.onChangeTimeendlist(e,data,item.id)}
															className={ this.state.endtimetypeid===item.id&&this.state.endtimetype===true||moment(handleDateString(item.end_time),"YYYY-MM-DD HH:mm") <= moment(this.props.starttime,"YYYY-MM-DD HH:mm")?"noticeTip fr":"fr"}
														/>
													</li>

												</div>
											)
										})
									}
								</Checkbox.Group>}

							</ul>
							}
							{this.state.endtimetype===true&&course_groupstype===true?<div className={"color-red"} style={{'text-align': 'center'}}>{this.state.endtimetypevalue}</div>:""}
							{this.state.endtimetypeid!=undefined&&this.state.endtimetype===true?<div className={"color-red fl ml10 mb20"}>{this.state.endtimetypevalue}</div>:""}
							{course_groupstype===true?<div className={this.state.endtimetype===true&&course_groupstype===true?"clearfix mt10 edu-txt-center mb10":"clearfix mt20 edu-txt-center mb10"}>
								<a  className="task-btn color-white mr30" onClick={this.props.Cancel}>{this.props.Cancelname}</a>
								<a className="task-btn task-btn-orange" onClick={()=>this.propsSaves(group_ids,this.state.endtime)}>{this.props.Savesname}</a>
							</div>:<div className="clearfix mt30 edu-txt-center mb10">
								{course_groupstype===true?"":<Checkbox className="fl ml10" checked={this.state.Checkboxtype} onChange={this.Checkboxtype}>全选</Checkbox>}
								<a className="task-btn task-btn-orange fr" onClick={()=>this.propsSaves(group_ids,this.state.endtime)}>{this.props.Savesname}</a>
								<a  className="task-btn color-white mr30 fr" onClick={this.props.Cancel}>{this.props.Cancelname}</a>
							</div>}

						</div>
					</Modal>:""}
			</div>
		)
	}
}
export default OneSelfOrderModal;