import React, {Component} from "react";
import {Link, NavLink} from 'react-router-dom';
import {WordsBtn, ActionBtn, SnackbarHOC, getImageUrl} from 'educoder';
import axios from 'axios';
import {
	notification,
	Spin,
	Table,
	Pagination,
	Drawer,
	Input
} from "antd";
import Headplugselection from "./component/Headplugselection";
import QuestionModal from "./component/QuestionModal";
import QuestionModals from "./component/QuestionModals";
import Contentpart from "./component/Contentpart";
import {TPMIndexHOC} from "../tpm/TPMIndexHOC";
import NoneData from './component/NoneData';
import './questioncss/questioncom.css';
import SiderBar from "../tpm/SiderBar";

class Question extends Component {
	constructor(props) {
		super(props);
		this.state = {
			page: 1,
			limit: 20,
			count: 50,
			defaultActiveKey: 1,
			Headertop: "",
			Footerdown: "",
			visible: false,
			placement: 'right',
			modalsType: false,
			modalsTypes:false,
			titilesm: "设为公开后，所有成员均可使用试题",
			titiless: "是否设置为公开？",
			titilesms:"单选题",
			titbool: false,
			Contentdata: [],
			difficulty: null,
			visiblemys: false,
			visiblemyss: false,
			item_type: null,
			keyword: null,
			timuid: null,
			items_count: 0,
			basket_list: [],
			completion_questions_count: 0,
			judgement_questions_count: 0,
			multiple_questions_count: 0,
			practical_questions_count: 0,
			program_questions_count: 0,
			single_questions_count: 0,
			subjective_questions_count: 0,
		}

	}

	//初始化
	componentDidMount() {
		let {defaultActiveKey} = this.state;
		var data = {
			public: defaultActiveKey
		};
		this.getdata(data);

		let url = `/users/get_navigation_info.json`;
		axios.get(url, {}).then((response) => {
			// //console.log("开始请求/get_navigation_info.json");
			// //console.log(response);
			if (response != undefined) {
				if (response.status === 200) {
					this.setState({
						Headertop: response.data.top,
						Footerdown: response.data.down
					})
				}
			}
		});

		this.getbasket_listdata();
	}

	callback = (key) => {
		this.setState({
			defaultActiveKey: key,
		})
		var data = {
			public: key,
			item_type: this.state.item_type,
			difficulty: this.state.difficulty,
		};
		this.getdata(data);

	}

	getdata = (data) => {
		const url = `/item_banks.json`;
		axios.get((url), {params: data}).then((response) => {
			if (response === null || response === undefined) {

				return
			}
			if (response.data.status === 403 || response.data.status === 401 || response.data.status === 500) {

			} else {

			}
			//console.log("item_banks");
			//console.log(response);
			this.setState({
				Contentdata: response.data,
				items_count: response.data.items_count,
			})
		}).catch((error) => {
			//console.log(error)

		});
	}

	paginationonChange = () => {

	}
	showDrawer = () => {
		this.setState({
			visible: true,
		});
		this.getbasket_listdata();


	};

	onClose = () => {
		this.setState({
			visible: false,
		});
	};

	onChange = e => {
		this.setState({
			placement: e.target.value,
		});
	};

	getContainer = () => {
		return this.container;
	};
	saveContainer = container => {
		this.container = container;
	};

	showmodels = (id) => {

		this.setState({
			modalsType: true,
			titilesm: "设为公开后，所有成员均可使用试题",
			titiless: "是否设置为公开？",
			titbool: true,
			timuid: id
		})
	};
	showmodelysl = (id) => {
		this.setState({
			modalsType: true,
			titilesm: "确认删除后，无法撤销",
			titiless: "是否确认删除？",
			titbool: false,
			timuid: id
		})
	};


	modalCancel = () => {
		this.setState({
			modalsType: false
		})
	}
	modalCancels=()=>{
		this.setState({
			modalsTypes: false
		})
	}
	showQuestionModals =(item_type)=>{
		this.setState({
			modalsTypes: true,
			titilesms:item_type,
		})

	}
	setDownloads=(item_type)=>{
		this.Deletebigquestiontype(item_type);
	}
	setDownload = () => {
		//确认
		if (this.state.titbool === true) {
			//公开
			this.publicopentimu(this.state.timuid);
		} else {
			// 删除
			this.deletetimu(this.state.timuid);
		}
		this.setState({
			modalsType: false
		})
	}

	setdifficulty = (difficulty) => {
		this.setState({
			difficulty: difficulty,
			visiblemys: false,
		})

		var data = {
			public: this.state.defaultActiveKey,
			difficulty: difficulty,
			item_type: this.state.item_type,
		};

		this.getdata(data);

	}
	setitem_types = (item_type) => {
		this.setState({
			item_type: item_type,
			visiblemyss: false,
		})

		var data = {
			public: this.state.defaultActiveKey,
			difficulty: this.state.difficulty,
			item_type: item_type,
		};

		this.getdata(data);
	}

	handleVisibleChange = (boll) => {
		if (this.state.visiblemyss === true) {
			this.setState({
				visiblemys: boll,
				visiblemyss: false,
			})
		} else {
			this.setState({
				visiblemys: boll,
			})
		}

	}

	handleVisibleChanges = (boll) => {
		if (this.state.visiblemys === true) {
			this.setState({
				visiblemyss: boll,
				visiblemys: false,
			})
		} else {
			this.setState({
				visiblemyss: boll,
			})
		}

	}

	setdatafunsval = (e) => {
		this.setState({
			keywords: e.target.value
		})
		var data = {
			public: this.state.defaultActiveKey,
			difficulty: this.state.difficulty,
			item_type: this.state.item_type,
			keywords: e.target.value,
		};

		this.getdata(data);
	}

	setdatafuns = (value) => {
		this.setState({
			keywords: value,
		})
		var data = {
			public: this.state.defaultActiveKey,
			difficulty: this.state.difficulty,
			item_type: this.state.item_type,
			keywords: value,
		};

		this.getdata(data);
	}

	deletetimu = (id) => {

		const url = `/item_banks/${id}.json`;
		axios.delete(url)
			.then((response) => {
				if (response.data.status == 0) {
					this.props.showNotification('删除试题成功')
					// props.history.push(response.data.right_url)
					var data = {
						public: this.state.defaultActiveKey,
						difficulty: this.state.difficulty,
						item_type: this.state.item_type,
						keywords: this.state.keywords,
					};
					this.getdata(data);
				}
			})
			.catch(function (error) {
				console.log(error);
			});
	}
	publicopentimu = (id) => {

		const url = `/item_banks/${id}/set_public.json`;
		axios.post(url)
			.then((result) => {
				if (result.data.status == 0) {
					this.props.showNotification(`公开题目成功`);
					var data = {
						public: this.state.defaultActiveKey,
						difficulty: this.state.difficulty,
						item_type: this.state.item_type,
						keywords: this.state.keywords,
					};
					this.getdata(data);
				}
			}).catch((error) => {
			console.log(error);
		})
	}

	getbasket_listdata = () => {
		// 获取试题篮展开的数据
		const url = "/item_baskets/basket_list.json";
		axios.get(url)
			.then((result) => {
					// console.log("getbasket_listdata");
					// console.log(result.data);
					this.setState({
						completion_questions_count: result.data.completion_questions_count,
						judgement_questions_count: result.data.judgement_questions_count,
						multiple_questions_count: result.data.multiple_questions_count,
						practical_questions_count: result.data.practical_questions_count,
						program_questions_count: result.data.program_questions_count,
						single_questions_count: result.data.single_questions_count,
						subjective_questions_count: result.data.subjective_questions_count,
					})

			}).catch((error) => {
			// console.log(error);
			this.setState({
				completion_questions_count: 0,
				judgement_questions_count: 0,
				multiple_questions_count: 0,
				practical_questions_count: 0,
				program_questions_count: 0,
				single_questions_count: 0,
				subjective_questions_count: 0,
			})
		})

	}


   //选用
	getitem_baskets=(data)=>{
		//选用题型可以上传单个 或者多个题型
		let url="/item_baskets.json";

		axios.post(url, data)
			.then((result) => {
				if (result.data.status == 0) {
					this.props.showNotification(`选用成功`);
					var data = {
						public: this.state.defaultActiveKey,
						difficulty: this.state.difficulty,
						item_type: this.state.item_type,
						keywords: this.state.keywords,
					};
					this.getdata(data);
					this.getbasket_listdata();
				}
			}).catch((error) => {
			console.log(error);
		})
	}
  // 撤销
	getitem_basketss=(id)=>{
		//选用题型可以上传单个 或者多个题型
		let url=`/item_baskets/${id}.json`;

		axios.delete(url)
			.then((result) => {
				if (result.data.status == 0) {
					this.props.showNotification(`撤销成功`);
					var data = {
						public: this.state.defaultActiveKey,
						difficulty: this.state.difficulty,
						item_type: this.state.item_type,
						keywords: this.state.keywords,
					};
					this.getdata(data);
					this.getbasket_listdata();
				}
			}).catch((error) => {
			console.log(error);
		})
	}
	//全选试题库
	selectallquestionsonthispage=()=>{
		var item_idsdata=[];

		var arr= this.state.Contentdata.items;
		for(let data of arr) {
			item_idsdata.push(data.id);
		}
		const data={
			item_ids:item_idsdata
		}
		this.getitem_baskets(data);
	}

  //删除大题型
	Deletebigquestiontype =(item_type)=>{
		const  url=`/item_baskets/delete_item_type.json`;
		axios.delete((url), { data: {
				item_type:item_type
				}})
			.then((response) => {
				if (response.data.status == 0) {
					this.props.showNotification('删除成功');
					var data = {
						public: this.state.defaultActiveKey,
						difficulty: this.state.difficulty,
						item_type: this.state.item_type,
						keywords: this.state.keywords,
					};
					this.getdata(data);
					this.getbasket_listdata();
				}
			})
			.catch(function (error) {
				console.log(error);
			});

	}




	render() {
		let {
			page, limit, count, Headertop, visible, placement, modalsType, modalsTypes,basket_list,
			completion_questions_count, judgement_questions_count, multiple_questions_count, practical_questions_count,
			program_questions_count, single_questions_count, subjective_questions_count
		} = this.state;

		const Datacount = completion_questions_count + judgement_questions_count
			+ multiple_questions_count + practical_questions_count
			+ program_questions_count
			+ single_questions_count
			+ subjective_questions_count;
		return (
			<div className="newMain clearfix" ref={this.saveContainer}>
				{
					visible===true?
						<style>
							{
								`
						.newHeaders{
						position: fixed;
						top: 0px;
						z-index:  999 !important;
						}
						.ant-drawer {
    z-index: 800 !important;
}
						.ant-notification{
						position: fixed;
						z-index: 1500 !important;
						}
						.newFooter{
						 position: relative;
							z-index: 9999999 ;
						}
						`
							}
						</style>
						:""
				}
				{
					visible===true?
				<div
				style={{
					marginTop: "60px"
				}}></div>
				:""}

				<QuestionModals {...this.props}{...this.state} modalsTypes={modalsTypes} modalCancels={() => this.modalCancels()}
											 setDownloads={(e) => this.setDownloads(e)}></QuestionModals>
				<QuestionModal {...this.props}{...this.state} modalsType={modalsType} modalCancel={() => this.modalCancel()}
											 setDownload={() => this.setDownload()}></QuestionModal>
				<SiderBar
					{...this.props}
					{...this.state}
					showDrawer={() => this.showDrawer()}
					Headertop={Headertop}/>
				{/*顶部*/}
				<Headplugselection></Headplugselection>
				{/*头部*/}
				<Contentpart {...this.state} {...this.props}
										 getitem_basketss={(id)=>this.getitem_basketss(id)}
										 selectallquestionsonthispage={()=>this.selectallquestionsonthispage()}
										 getitem_baskets={(e)=>this.getitem_baskets(e)}
										 setdatafuns={(e) => this.setdatafuns(e)}
										 setdatafunsval={(e) => this.setdatafunsval(e)}
										 handleVisibleChanges={(e) => this.handleVisibleChanges(e)}
										 setitem_types={(e) => this.setitem_types(e)}
										 handleVisibleChange={(e) => this.handleVisibleChange(e)}
										 setdifficulty={(e) => this.setdifficulty(e)}
										 showmodels={(e) => this.showmodels(e)}
										 showmodelysl={(e) => this.showmodelysl(e)}
										 callback={(e) => this.callback(e)}></Contentpart>
				{/*分页*/}
				{/*<div className="clearfix mt5">*/}
				{/*<div className="educontent mt10 pb20 w1200s">*/}
				{/*	fenye*/}
				<div className="mb30 clearfix educontent mt40 intermediatecenter">
					<Pagination showQuickJumper current={page} onChange={this.paginationonChange}
											pageSize={limit}
											total={count}></Pagination>
				</div>

				{/*抽屉效果*/}
				<style>
					{
						`
						 .ant-drawer-content-wrapper{
						width: 200px !important;
						overflow：hidden;
						margin-top: 62px;
						}
					 .ant-drawer-body{
						   height: 100%;
						   background:rgba(234,234,234,1);
						}
						`
					}
				</style>

				<Drawer
					className="drawercontainer"
					placement={placement}
					closable={false}
					onClose={() => this.onClose()}
					visible={visible}
					mask={false}
					closable={true}
				>

					{Datacount && Datacount > 0 ?
						<div>
							<div className="mt25 mb26">
								<Input placeholder="未命名试卷"/>
							</div>
							{
								single_questions_count === 0 ?
									""
									: <div className="sortinxdirection" onClick={()=>this.showQuestionModals("SINGLE")} >
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">单选题{'('}{single_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								multiple_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection" onClick={()=>this.showQuestionModals("MULTIPLE")}>
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">多选题{'('}{multiple_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								judgement_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection" onClick={()=>this.showQuestionModals("JUDGMENT")}>
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">判断题{'('}{judgement_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								completion_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection" onClick={()=>this.showQuestionModals("COMPLETION")}>
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">填空题{'('}{completion_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								subjective_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection" onClick={()=>this.showQuestionModals("SUBJECTIVE")}>
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">简答题{'('}{subjective_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								practical_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection">
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">实训题{'('}{practical_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}
							{
								program_questions_count === 0 ?
									""
									:
									<div className="sortinxdirection" onClick={()=>this.showQuestionModals("PROGRAM")}>
										<p
											className="w50s intermediatecenterysls sortinxdirection font-14">编程题{'('}{program_questions_count}{')'}</p>
										<p className="w50s intermediatecenterysls xaxisreverseorder"><i
											className="iconfont icon-shanchu1 font-14 lg  lh30 icondrawercolor "></i></p>
									</div>
							}

							<div className="intermediatecenter verticallayout mt42">
								<div className="drawerbutton">
									试卷预览
								</div>
							</div>
						</div>
						:
						<div className="drawernonedatadiv intermediatecenter">
							<NoneData></NoneData>
						</div>
					}


				</Drawer>


			</div>
		)

	}


}

export default SnackbarHOC()(TPMIndexHOC(Question));