import React, {Component} from "react";
import {Prompt} from 'react-router-dom';
import { SnackbarHOC,queryString} from 'educoder';
import axios from 'axios';
import { Breadcrumb } from "antd";

import {TPMIndexHOC} from "../tpm/TPMIndexHOC";
import Itembankstop from "./component/Itembankstop";
import './questioncss/questioncom.css';
import '../tpm/newshixuns/css/Newshixuns.css';
import SingleEditor from "./component/SingleEditor";
import ChoquesEditor from "./component/ChoquesEditor"
import JudquestionEditor from "./component/JudquestionEditor";
import SubquestionEditor from './component/SubquestionEditor'
import Bottomsubmit from "../../modules/modals/Bottomsubmit";
import QuestionModalPicture from "./component/QuestionModalPicture";

class Questionitem_banks extends Component {
	constructor(props) {
		super(props);
		this.contentMdRef = React.createRef();
		this.answerMdRef = React.createRef();
		this.Choques = React.createRef();
		this.Judquestio = React.createRef();
		this.SubQuestionRef = React.createRef();//问答题
		this.state = {
			item_type: null,
			item_banksedit: [],
			myquestion_choicesco: [],
			disciplinesdata: [],
			knowledgepoints: [],
			disciplmy:[],
			pages:1,
			url:''

	}

	}

	//初始化
	componentDidMount() {
		const query = this.props.location.search;
		const parsed = queryString.parse(query);
		console.log(parsed);
		try {
			this.setState({
				pages:parsed.pages
			})
		}catch (e) {

		}

		const params = this.props && this.props.match && this.props.match.params;
		if (JSON.stringify(params) === "{}") {
			//新增
		} else {
			//编辑

			const url = `/item_banks/${this.props.match.params.id}/edit.json`;
			axios.get((url)).then((response) => {
				if (response === null || response === undefined) {

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

				} else {

				}

			  try {
					this.setState({
						item_banksedit: response.data,
					})
				}catch (e) {

				}
			}).catch((error) => {
				////////console.log(error)

			});

		}

		let urls = `/disciplines.json`;
		axios.get(urls, {
			params: {
				source: "question"
			}
		}).then((response) => {
			if (response) {
				this.setState({
					disciplinesdata: response.data.disciplines,
				})
				if (response.data) {
					if (response.data.disciplines) {

						const didata = response.data.disciplines;

						for (var i = 0; i < didata.length; i++) {
							const childern=[];
							//方向
							const fxdidata = didata[i].sub_disciplines;


							for (var j = 0; j < fxdidata.length; j++) {
								//课程
								const zsddata = fxdidata[j].tag_disciplines;
								childern.push(
									{
										value: fxdidata[j].id,
										label: fxdidata[j].name,
									}
								)
								for (var k = 0; k < zsddata.length; k++) {
									//知识点
									this.state.knowledgepoints.push(zsddata[k]);


								}
							}

							const datakec={
								value: didata[i].id,
								label: didata[i].name,
								children: childern,
							}
							this.state.disciplmy.push(datakec);
						}

						this.setState({
							knowledgepoints: this.state.knowledgepoints,
							disciplmy:this.state.disciplmy,
						})


					}

				}

			}
		});

	}

	componentWillMount () {
		// 拦截判断是否离开当前页面
		window.addEventListener('beforeunload', this.beforeunload);
	}
	componentWillUnmount () {
		// 销毁拦截判断是否离开当前页面
		window.removeEventListener('beforeunload', this.beforeunload);
	}
	beforeunload (e) {
		let confirmationMessage = '你确定离开此页面吗?';
		(e || window.event).returnValue = confirmationMessage;
		return confirmationMessage;
	}


	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);
		// }).catch((error) => {
		// 	////////console.log(error)
		//
		// });
	}

	getcontentMdRef = (Ref) => {
		this.contentMdRef = Ref;
	}
	getanswerMdRef = (Ref) => {
		this.answerMdRef = Ref;
	}

	getJudquestio = (Ref) => {
		this.Judquestio = Ref;
	}

	getChoquesEditor = (Ref) => {
		this.Choques = Ref;
	}
	getSubQuestionRef = (Ref)=>{
		this.SubQuestionRef = Ref
	}
	//跳转道描点的地方
	scrollToAnchor = (anchorName) => {
		try {
			if (anchorName) {
				// 找到锚点
				let anchorElement = document.getElementById(anchorName);
				// 如果对应id的锚点存在，就跳转到锚点
				if (anchorElement) {
					anchorElement.scrollIntoView();
				}
			}
		} catch (e) {

		}

	}
	preservation = () => {
		const params = this.props && this.props.match && this.props.match.params;
		var url = "";
		var boolnew = true;
		if (JSON.stringify(params) === "{}") {
			// "新增"
			url = "/item_banks.json";
			boolnew = true;
		} else {
			url = `/item_banks/${params.id}.json`;
			boolnew = false;
			// "编辑"
		}

			if (this.contentMdRef.Getdatas().length === 0) {
				this.scrollToAnchor("Itembankstopid");
				return;
			}

			var Getdatasdata=this.contentMdRef.Getdatas();
			if (this.state.item_type === null) {
				return
			}


		if (this.state.item_type === "SINGLE") {
			if (this.answerMdRef != null) {
				//单选题
				// ////console.log(this.answerMdRef.onSave());

				if (this.answerMdRef.onSave().length === 0) {
					return;
				}
				var anserdata = this.answerMdRef.onSave();
				const choices = [];
				// 1: [3]
				// 2: (4) ["1", "2", "3", "4"]
				for (var k = 0; k < anserdata[2].length; k++) {
					const choicesdata = {
						choice_text: anserdata[2][k],
						is_answer: anserdata[1][0] === (k + 1) ? 1 : 0,
					}
					choices.push(choicesdata);
				}


				var myrbkc=[];
				var Getdatasdatas=Getdatasdata[2].rbzsd;
				for(let myda of Getdatasdatas) {
					myrbkc.push(myda.id);
				}
				var data = {
					discipline_id: Getdatasdata[3].rbkc[0],
					sub_discipline_id:   Getdatasdata[3].rbkc[1],
					tag_discipline_id: myrbkc,
					name: anserdata[0],
					item_type: Getdatasdata[1].rbtx,
					difficulty:Getdatasdata[0].rbnd,
					analysis: anserdata[3],
					choices: choices,

				};

				if (boolnew === true) {

					axios.post(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								this.restricte=true;
								this.props.history.replace('/problemset');

							}
						}).catch((error) => {
					})
				} else {
					axios.put(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								this.restricte=true;
								this.props.history.replace('/problemset');


							}
						}).catch((error) => {
					})
				}


			}


		}
		if (this.state.item_type === "MULTIPLE") {
			if (this.Choques != null) {
				//多选题
				// ////console.log(this.Choques.onSave());
				if (this.Choques.onSave().length === 0) {
					return;
				}
				var anserdata = this.Choques.onSave();
				const choices = [];
				// 1: [3]
				// 2: (4) ["1", "2", "3", "4"]
				for (var k = 0; k < anserdata[2].length; k++) {

					var bool = false
					for (var y = 0; y < anserdata[1].length; y++) {
						if (anserdata[1][y] === (k + 1)) {
							bool = true
						}
					}

					const choicesdata = {
						choice_text: anserdata[2][k],
						is_answer: bool === true ? 1 : 0,
					}
					choices.push(choicesdata);
				}


				var myrbkc=[];
				var Getdatasdatas=Getdatasdata[2].rbzsd;
				for(let myda of Getdatasdatas) {
					myrbkc.push(myda.id);
				}
				var data = {
					discipline_id: Getdatasdata[3].rbkc[0],
					sub_discipline_id:   Getdatasdata[3].rbkc[1],
					tag_discipline_id: myrbkc,
					name: anserdata[0],
					item_type: Getdatasdata[1].rbtx,
					difficulty:Getdatasdata[0].rbnd,
					analysis: anserdata[3],
					choices: choices,

				};


				if (boolnew === true) {
					axios.post(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								// this.props.showNotification(`新增多选题成功`);
								this.restricte=true;
								this.props.history.replace('/problemset');


							}
						}).catch((error) => {
						////console.log(error);
					})

				} else {
					axios.put(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								// this.props.showNotification(`编辑多选题成功`);
								this.restricte=true;
								this.props.history.replace('/problemset');


							}
						}).catch((error) => {
						////console.log(error);
					})
				}


			}

		}
		if (this.state.item_type === "JUDGMENT") {
			if (this.Judquestio != null) {
				//判断题
				// ////console.log(this.Judquestio.onSave());
				if (this.Judquestio.onSave().length === 0) {
					return;
				}
				var anserdata = this.Judquestio.onSave();
				const choices = [];
				const choicesdata = {
					choice_text: "正确",
					is_answer: anserdata[1] === "0" ? 1 : 0,
				}
				choices.push(choicesdata);

				const choicesdatas = {
					choice_text: "错误",
					is_answer: anserdata[1] === "1" ? 1 : 0,
				}
				choices.push(choicesdatas);
				var myrbkc=[];
				var Getdatasdatas=Getdatasdata[2].rbzsd;
				for(let myda of Getdatasdatas) {
					myrbkc.push(myda.id);
				}
				var data = {
					discipline_id: Getdatasdata[3].rbkc[0],
					sub_discipline_id:   Getdatasdata[3].rbkc[1],
					tag_discipline_id: myrbkc,
					name: anserdata[0],
					item_type: Getdatasdata[1].rbtx,
					difficulty:Getdatasdata[0].rbnd,
					analysis: anserdata[2],
					choices: choices,

				};
				if (boolnew === true) {
					axios.post(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								// this.props.showNotification(`新增判断题成功`);
								this.restricte=true;
								this.props.history.replace('/problemset');

							}
						}).catch((error) => {
						////console.log(error);
					})

				} else {
					axios.put(url, data)
						.then((result) => {
							if (result.data.status == 0) {
								// this.props.showNotification(`编辑判断题成功`);
								this.restricte=true;
								this.props.history.replace('/problemset');

							}
						}).catch((error) => {
						////console.log(error);
					})
				}


			}

		}
		if (this.state.item_type === "PROGRAM") {
			//编程题 跳转到 oj 中创建
			var myrbkc=[];
			var Getdatasdatas=Getdatasdata[2].rbzsd;
			for(let myda of Getdatasdatas) {
				myrbkc.push(myda.id);
			}

			let arrays=myrbkc.join(',');
			this.restricte=true;
	    window.open(`/problems/new?difficult=${Getdatasdata[0].rbnd}&sub_discipline_id=${Getdatasdata[3].rbkc[1]}&tag_discipline_id=${arrays}&newoj=1&pages=${this.state.pages}`);
			setTimeout(() => {
				this.restricte=true;
			}, 1000);
		}
		if (this.state.item_type === "SUBJECTIVE") {
			const mdData = this.SubQuestionRef.onSave();
			console.log(mdData)
			const  data = {
				discipline_id: Getdatasdata[3].rbkc[0],
				sub_discipline_id:   Getdatasdata[3].rbkc[1],
				tag_discipline_id: Getdatasdata[2].rbzsd.map(item=>item.id),
				name: mdData.question_title,
				item_type: Getdatasdata[1].rbtx,
				difficulty:Getdatasdata[0].rbnd,
				analysis:mdData.question_analysis,
				standard_answers:mdData.standard_answers
			};
			console.log(data)
		}

	}


	setitem_type = (item_type) => {
		this.setState({
			item_type: item_type
		})
		this.scrollToAnchor("Itembankstopid");
	}

	handleShowUploadImage=(url)=>{
		
		this.setState({
			url:url
		})
	}
	handleClose=()=>{
		this.setState({
			url:'',
		})
	}


	render() {
		let {page, limit, count, Headertop, visible, placement, modalsType, item_type,restricte,url} = this.state;
		const params = this.props && this.props.match && this.props.match.params;
		return (
			<div>
				<div id={"Itembankstopid"} className="newMain clearfix intermediatecenter "
				>

					{url?
						<QuestionModalPicture url={url} {...this.props} {...this.state} handleClose={()=>this.handleClose()}></QuestionModalPicture>
						:
						""
					}
					{
						restricte===false?
							<Prompt
								when={true}
								message={() => '你确定离开此页面吗?'}
							/>
							:
							""
					}


					<style>
						{
							`
					 body{
            width: 100%!important;

          }
						`
						}
					</style>
					<div className="w1200mss">
						<div className="w100s mt30">
							<Breadcrumb separator=">">
								<Breadcrumb.Item href="/problemset">试题库</Breadcrumb.Item>
								<Breadcrumb.Item>{JSON.stringify(params) === "{}" ? "新增" : "编辑"}试题</Breadcrumb.Item>
							</Breadcrumb>
						</div>

						{/*题目头部操作*/}
						<Itembankstop
							{...this.state}
							{...this.props}
							getcontentMdRef={(ref) => this.getcontentMdRef(ref)}
							setitem_type={(item) => this.setitem_type(item)}
						>

						</Itembankstop>
						<div >
						{
							item_type && item_type === "SINGLE" ?

								<div className=" clearfix  educontent  w100s w1200fpx mt19">
									<SingleEditor
										{...this.state}
										{...this.props}
										getanswerMdRef={(ref) => this.getanswerMdRef(ref)}
										handleShowUploadImage={(url)=>this.handleShowUploadImage(url)}
									>

									</SingleEditor>
								</div>
								: item_type && item_type === "MULTIPLE" ?
								<div className=" clearfix  educontent  w100s w1200fpx mt19">
									<ChoquesEditor
										{...this.state}
										{...this.props}
										getanswerMdRef={(ref) => this.getChoquesEditor(ref)}
										handleShowUploadImage={(url)=>this.handleShowUploadImage(url)}
									>

									</ChoquesEditor>
								</div>

								: item_type && item_type === "JUDGMENT" ?

									<div className=" clearfix  educontent  w100s w1200fpx mt19">
										<JudquestionEditor
											{...this.state}
											{...this.props}
											item_banksedit={this.state.item_banksedit}
											getanswerMdRef={(ref) => this.getJudquestio(ref)}
										>

										</JudquestionEditor>
									</div>
									: item_type && item_type === "SUBJECTIVE" ?

									<div className=" clearfix  educontent  w100s w1200fpx mt19">
										<SubquestionEditor
											{...this.state}
											{...this.props}
											getanswerMdRef={(ref) => this.getSubQuestionRef(ref)}
										>

										</SubquestionEditor>
									</div>
		

									: item_type && item_type === "PROGRAM" ?
										""
										: ""
					   	}
 						</div>
					</div>


				</div>
				{
					item_type === null ?
						""
						:
						<Bottomsubmit {...this.props} {...this.state} bottomvalue={item_type === "PROGRAM" ? "创建" : "保存"}
													onSubmits={() => this.preservation()} url={'/problemset'}></Bottomsubmit>
				}
			</div>
		)

	}

}


export default SnackbarHOC()(TPMIndexHOC(Questionitem_banks));

