import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Breadcrumb,Button } from "antd";
import { WordsBtn,on, off, trigger } from 'educoder';
import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd';
import axios from'axios';
import Modals from '../../modals/Modals';
import '../css/members.css';
import '../css/busyWork.css';
import './Ordering.css';
import NoneData from "../coursesPublic/NoneData";

const reorder = (list, startIndex, endIndex) => {
	const result = Array.from(list);
	const [removed] = result.splice(startIndex, 1);
	result.splice(endIndex, 0, removed);

	return result;
};

class Ordering extends Component{
	constructor(props){
		super(props);
		this.state={
			isSpin:false,
			antIcon:false,
			datas:undefined,
			windowsscrollTop:false,
			newtask_ids:[]
		}
	}

	componentDidMount() {
		this.setState({
			isSpin:true
		})

    let coursesId=this.props.match.params.coursesId;
		let ordering_type=this.props.match.params.ordering_type;
		let url=`/courses/${coursesId}/tasks_list.json`;
		axios.get((url),{params:{
				container_type:ordering_type
			}}).then((result)=>{
			if(result){
				this.setState({
					datas:result.data.tasks,
					isSpin:false
				})
			}
		}).catch((error)=>{
			console.log(error);
			this.setState({
				isSpin:false
			})
		})

		window.addEventListener('scroll', this.handleScroll.bind(this)) //监听滚动
		// window.addEventListener('resize', this.handleResize.bind(this)) //监听窗口大小改变
	}


	// componentWillUnmount() { //一定要最后移除监听器，以防多个组件之间导致this的指向紊乱
	// 	window.removeEventListener('scroll', this.handleScroll.bind(this))
	// 	window.removeEventListener('resize', this.handleResize.bind(this))
	// }

	handleScroll=(e)=>{
		// console.log(
		// 	'浏览器滚动事件',
		// 	e.srcElement.scrollingElement.scrollTop,
		// 	e.srcElement.scrollingElement.scrollHeight
		// )
		//e.srcElement.scrollingElement.scrollTop为距离滚动条顶部高度
		// e.srcElement.scrollingElement.scrollHeight为整个文档高度

		if(e.srcElement.scrollingElement.scrollTop>60){
			this.setState({
					windowsscrollTop:true,
			})
	   }

	   if(e.srcElement.scrollingElement.scrollTop===0){
			 this.setState({
				 windowsscrollTop:false
			 })
		 }
	}
	//
	// handleResize = e => {
	// 	console.log('浏览器窗口大小改变事件', e.target.innerWidth)
	// }



	onDragEnd=(result)=>{

		if(result.destination!=null&&result.destination!=undefined){
			let {datas}=this.state;
			if (!result.destination) {
				console.log('dropped outside the list')
				return;
			}
			if (result.destination.index === result.source.index) {
				console.log('the same')
				return;
			}
			const shixuns_list = reorder(
				datas,
				result.source.index,
				result.destination.index
			);

			let newtask_ids=[]
			shixuns_list.map((item,key)=>{
				newtask_ids.push(item.task_id)
			})

			this.setState({
				datas:shixuns_list,
				newtask_ids:newtask_ids
			})
		}

	}

	updatalist=()=>{

		let {datas,newtask_ids,isSpin}=this.state;
		if(newtask_ids.length===0){
			this.props.showNotification("请先移动需要排序的实训作业任务");
			return
		}

		if(isSpin===true){
			return
		}

		this.setState({
			isSpin:true
		})
		let coursesId=this.props.match.params.coursesId;
		let ordering_type=this.props.match.params.ordering_type;
		let url=`/courses/${coursesId}/update_task_position.json`;
		axios.post(url,{
			container_type:ordering_type,
			task_ids:newtask_ids
		}).then((result)=>{
			if(result.data.status===0){
				this.props.showNotification(result.data.message);
				this.setState({
					isSpin:false,
					datas:datas,
					newtask_ids:[]
				});
			}else{
				this.setState({
					isSpin:false,
				});
			}

		}).catch((error)=>{
			this.setState({
				isSpin:false,
			});
		})

	}

	goback=()=>{
		 window.location.href=`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${this.props.match.params.main_id}`
	}


	render(){
		let {
			datas,
			Modalstype,
			windowsscrollTop,
		}=this.state;

		let main_id=this.props.match.params.main_id;
		let category_id=this.props.match.params.category_id;

		console.log(this.props)
		console.log(window)

		let positiontype=null;

		if(windowsscrollTop===true){
			positiontype={position:'fixed',zIndex:'9000',left:'20%',top: '0px'}
		}else{
			positiontype={}
		}
		return(

				<div className={"mb200"}>
					{/*提示*/}
					{Modalstype&&Modalstype===true?<Modals
						modalsType={this.state.Modalstype}
						modalsTopval={this.state.Modalstopval}
						modalCancel={this.state.ModalCancel}
						modalSave={this.state.ModalSave}
						modalsBottomval={this.state.ModalsBottomval}
						loadtype={this.state.Loadtype}
						antIcon={this.state.antIcon}
					/>:""}


					<div className="educontent clearfix">

						{windowsscrollTop===false?<div className={"mt20 mb20"}>

								<Breadcrumb separator=">">
									<Breadcrumb.Item href={this.props.current_user&&this.props.current_user.first_category_url}>{this.props.current_user&&this.props.current_user.course_name}</Breadcrumb.Item>
									<Breadcrumb.Item href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${this.props.match.params.main_id}`}>实训作业</Breadcrumb.Item>
									<Breadcrumb.Item>调整排序</Breadcrumb.Item>
								</Breadcrumb>

						</div>:""}


						<p className="clearfix bor-bottom-greyE edu-back-white orderingbox"
						   style={positiontype}
						>
							   <span>温馨提示：请在列表中长按鼠标左键，进行拖放排序。完成排序后请点击“保存”</span>
									<Button className="fr orderingbtnleft" type="primary" onClick={()=>this.updatalist()}>保存</Button>
									<Button className="fr mr30 orderingbtnright" onClick={()=>this.goback()}>取消</Button>
						</p>


					</div>

					<Spin size="large" spinning={this.state.isSpin} >
						<DragDropContext onDragEnd={this.onDragEnd} >
							<Droppable droppableId={this.props.match.params.ordering_type}>
								{(provided, snapshot) => (
									<div
										ref={provided.innerRef}
										{...provided.droppableProps}
										className={"educontent mb50 mt40 droppableul ordermiddiv"}
										onScroll={this.contentViewScrolledit}
									>
										{datas===undefined?"":
											 datas.map((item, index) => {
												return (
													<Draggable
														key={item.task_id}
														draggableId={item.task_id}
														index={index}
														className={"TabsWarps"}
													>
														{(provided, snapshot) => (
															<div className={"mt30 edu-back-white pd1323s relativef ordermidbox"}
																	 key={index}
																	 ref={provided.innerRef}
																	 {...provided.draggableProps}
																	 {...provided.dragHandleProps}
															>
																<div className={"clearfix"}>
																	<div className={"item-body"}>
																		<div className={"clearfix ds pr orderSection"}>
																			<p title={item.task_name} className="font-16  color-dark maxwidth865s orderfonttop"
																				 href={`/courses/${this.props.match.params.coursesId}/shixun_homeworks/${item.task_id}/list?tab=0`}>{item.task_name}</p>
																			<p className={"color-grey panel-lightgrey mt16  "}>
																			<span className="topicswidth400">
																				<span className="topsics100 color-grey9 orderfontbom mr20 maxwidth795">{item.user_name}</span>
																				<span className="mr50 color-grey9 orderfontbom maxwidth795">{item.category}</span>
																			</span>
																			</p>
																		</div>
																	</div>
																</div>
															</div>
														)}
													</Draggable>
												)
											})

										}
									</div>
								)}
							</Droppable>
						</DragDropContext>



						{
							datas===undefined?"":datas.length===0? <NoneData></NoneData>:""
						}

					</Spin>

				</div>
		)
	}
}
export default Ordering;