import React, { Component } from "react";
import axios from 'axios';
import {
	Radio,
	Tooltip,
} from "antd";
import './../questioncss/questioncom.css';
import Certifiedprofessional from "../../modals/Certifiedprofessional";
import './list-jihe.scss'
import RenderHtml from "../../../components/render-html";

const tagArray = [
	'A．', 'B．', 'C．', 'D．', 'E．', 'F．', 'G．', 'H．', 'I．',
	'J．', 'K．', 'L．', 'M．', 'N．', 'O．', 'P．', 'Q．', 'R．',
	'S．', 'T．', 'U．', 'V．', 'W．', 'X．', 'Y．', 'Z．'
]
const tagArrays = [
	'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I',
	'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
	'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
]
const questionType = [
	{
		type: 'SINGLE',
		color: 'typeGreen',
		name: '单选题'
	},
	{
		type: 'MULTIPLE',
		color: 'typeBlue',
		name: '多选题'
	},
	{
		type: 'JUDGMENT',
		color: 'typeRed',
		name: '判断题'
	},
	{
		type: 'PROGRAM',
		color: 'typeYellow',
		name: '编程题'
	}
]

//Paperreview_single.js Paperlibraryseeid_items.js
class Listjihe extends Component {
	constructor(props) {
		super(props);
		this.state = {
			page: 1,
			name: "单选题",
			nd: "简单",
			url: "",
			mydisplay: false,
			occupation: 2,
			isysladmins: false,
		}
	}

	//初始化
	componentDidMount() {
		let isysladmins = false;
		if (this.props) {
			if (this.props.current_user) {
				if (this.props.current_user.admin) {
					isysladmins = true;
				} else if (this.props.current_user.business) {
					isysladmins = true;
				}
			}
		}
		this.setState({
			isysladmins: isysladmins
		})

	}

	handleShowUploadImage = (url) => {
		try {
			this.props.handleShowUploadImage(url);
		} catch (e) {

		}

	}
	handleClose = () => {
		try {
			this.props.handleClose();
		} catch (e) {

		}
	}
	//选用
	Selectingpracticaltraining = (id) => {
		try {
			if (this.props.Datacountbool) {
				if (this.props.Datacount === 100) {
					this.props.showNotification(`已选100个试题（不能在选用更多试题）`);
					return;
				}
			}
		} catch (e) {

		}


		let data = {}
		if (this.props.exam_id === undefined) {
			data = {
				item_ids: [id]
			}
		} else {
			data = {
				item_ids: [id],
				exam_id: this.props.exam_id === undefined ? "" : parseInt(this.props.exam_id),
			}
		}
		this.getitem_baskets(data);
	}
	getitem_baskets = (data) => {
		this.props.getitem_baskets(data);

	}
	//撤销
	Selectingpracticaltrainings = (id) => {

		this.props.getitem_basketss(id);
	}


	seturls(url) {
		let newOpenWindow = window.open('about:blank');  // 在ajax外部先打开空白新窗口
		newOpenWindow.location = url;
	}

	seturlsbc(id) {
		let url = `/problems/${id}/start.json`;
		axios.get(url, {}).then((response) => {
			if (response) {
				if (response.data.status === 0) {
					let newOpenWindow = window.open('about:blank');  // 在ajax外部先打开空白新窗口
					let identifiers = response.data.identifier;
					newOpenWindow.location = `/myproblems/${identifiers}`;
				} else {
					this.props.showNotification(response.data.message);
				}
			}
		});
	}

	HideAddcoursestypess = (i) => {
		console.log("调用了");
		this.setState({
			mydisplay: true,
			occupation: i,
		})
	}

	mydisplayHidedel = () => {
		this.setState({
			mydisplay: false,
		})
	}

	render() {
		let { mydisplay } = this.state;
		let { defaultActiveKey, items, listjihe, chakanjiexiboolindex, keindex } = this.props;

		// 编程答案
		var rightkey = null
		var MULTIPLEkey = null;
		if (items) {
			if (items.item_type) {
				if (items.item_type === "PROGRAM") {

				} else {
					if (items.item_type === "JUDGMENT") {
						//多选题
						if (items.choices) {
							if (items.choices.length > 0) {
								var arr = items.choices;
								for (let data of arr) {
									if (data.is_answer === true) {
										rightkey = data.choice_text;
										break;
									}
								}
							}
						}
					} else {
						// 单选题和判断题
						if (items.item_type === "MULTIPLE") {
							if (items.choices) {
								if (items.choices.length > 0) {
									var arr = items.choices;
									for (var i = 0; i < arr.length; i++) {
										if (arr[i].is_answer === true) {
											if (MULTIPLEkey === null) {
												MULTIPLEkey = tagArrays[i];

											} else {
												MULTIPLEkey = MULTIPLEkey + tagArrays[i];
											}

										}
									}
								}
							}

						} else {
							if (items.choices) {
								if (items.choices.length > 0) {
									var arr = items.choices;
									for (var i = 0; i < arr.length; i++) {
										if (arr[i].is_answer === true) {
											rightkey = i;
											break;
										}
									}
								}
							}
						}
					}
				}
			}

		}
		var itemssname = items.name + "";

		var itemsnamesy = items && items.program_attr && items.program_attr.description + "";
		var analysisnames = items && items.analysis + "";

		const types = questionType.filter(item => item.type === items.item_type);
		let rightkeyy = tagArrays[rightkey] ? tagArrays[rightkey] : "无";
		let MULTIPLEkeys = MULTIPLEkey ? MULTIPLEkey : "无";
		let rightkeys = rightkey ? rightkey : "无";
		let Periofters = false;
		if (this.props) {
			if (this.props.current_user) {
				if (this.props.current_user.admin) {
					Periofters = true;
				}
				else if (this.props.current_user.business) {
					Periofters = true;
				}
				else if (this.props.current_user.is_shixun_marker) {
					Periofters = true;
				}
				else if (this.props.current_user.is_teacher) {
					Periofters = true;
				} else if (this.props.current_user.user_identity !== "学生") {
					Periofters = true;
				}
			}
		}
		return (
			<div key={keindex}
				className={chakanjiexiboolindex === keindex ? "w100s borderwds283 pd20 mb20 listjihecolors" : "borderwds pd20 mb20 listjihecolors"}>
				{
					mydisplay === true ?
						<Certifiedprofessional {...this.props} {...this.state} ModalCancelsy={this.mydisplayHidedel} />
						: null
				}
				{
					mydisplay === true ?
						<style>
							{` body{ overflow:hidden!important; } `}
						</style>
						: null
				}
				<div className="w100s sortinxdirection plpr pb5">
					<div className="w50s listjihetixingstit sortinxdirection ">

						<span className={`typeBlue lh26s  xiaoshout`}>{types[0] && types[0].name}</span>
						{defaultActiveKey === 0 || defaultActiveKey === "0" ?
							(
								items.public === false ?
									items.item_type === "PROGRAM" ?
										(
											items.program_attr.status === 0 ?
												""
												:
												items.apply === false ?
													<span className={`  typeRed typesBtn`}>私有</span>
													:
													(
														items.public == true ?
															<span className={`typeGreen typesBtn`}>已公开</span>
															:
															""
													)
										)
										: items.apply === false ?
											<span className={` typeRed typesBtn`}>私有</span>
											:
											""
									:
									<span className={`typeGreen typesBtn`}>已公开</span>


							) : ""
						}
					</div>
					<div className="w50s xaxisreverseorder">
						{
							defaultActiveKey === 0 || defaultActiveKey === "0" ?
								<div className="xaxisreverseorder">
									<p className="viewparsings  xiaoshou" onClick={() => this.props.showmodelysl(items.id)}>
										<i className="iconfont icon-shanchu1 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
										<span>删除</span>
									</p>
									{
										items.item_type === "PROGRAM" ?
											this.props.Isitapopup && this.props.Isitapopup === "true" ?
												""
												:
												<a target="_blank" href={`/problems/${items.program_attr.identifier}/edit`}>
													<p className="viewparsings  xiaoshou mr25">
														<i className="iconfont icon-bianji2 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
														<span>编辑</span>
													</p>
												</a>
											:
											this.props.Isitapopup && this.props.Isitapopup === "true" ?
												""
												:
												<a target="_blank" href={`/problemset/edit/${items.id}`}>
													<p className="viewparsings  xiaoshou mr25">
														<i className="iconfont icon-bianji2 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
														<span>编辑</span>
													</p>
												</a>
									}
									{
										items.public === false ?
											items.item_type === "PROGRAM" ?
												(
													items.program_attr.status === 0 ?
														""
														:
														items.apply === false ?
															<p className="viewparsings  xiaoshou mr25"
																onClick={() => this.props.showmodels(items.id)}>
																<i
																	className="iconfont icon-gongkai font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																<span>设为公开</span>
															</p>
															:
															(
																items.public == true ?
																	<p className="viewparsings  xiaoshou mr25"
																		onClick={() => this.props.setasprivates(items.id)}
																	>
																		<i
																			className="iconfont icon-dianjiliang font-13 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																		<span>设为私有</span>
																	</p>
																	:
																	<p className="viewparsings  xiaoshou mr25"
																		onClick={(e) => this.props.showmodelsInaudit(e)}>
																		<i
																			className="iconfont icon-gongkai font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																		<span>公开审核中</span>
																	</p>
															)
												)
												: items.apply === false ?
													<p className="viewparsings  xiaoshou mr25" onClick={() => this.props.showmodels(items.id)}>
														<i className="iconfont icon-gongkai font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
														<span>设为公开</span>
													</p>
													:
													(
														items.public == true ?
															""
															:
															<p className="viewparsings  xiaoshou mr25" onClick={(e) => this.props.showmodelsInaudit(e)}>
																<i className="iconfont icon-gongkai font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																<span>公开审核中</span>
															</p>
													)
											:
											<p className="viewparsings xiaoshou mr25" onClick={() => this.props.setasprivates(items.id)}>
												<i className="iconfont icon-dianjiliang font-13 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
												<span>设为私有</span>
											</p>
									}

								</div>
								:
								//公开
								<div className="xaxisreverseorder">
									{
										items.edit_role === true ?
											<p className="viewparsings  xiaoshou" onClick={() => this.props.showmodelysl(items.id)}>
												<i className="iconfont icon-shanchu1 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
												<span>删除</span>
											</p>
											: ""
									}

									{
										items.item_type === "PROGRAM" ?
											this.props.Isitapopup && this.props.Isitapopup === "true" ?
												""
												:
												(
													items.edit_role === true ?
														<a target="_blank" href={`/problems/${items.program_attr.identifier}/edit`}>
															<p className="viewparsings  xiaoshou mr25">
																<i className="iconfont icon-bianji2 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																<span>编辑</span>
															</p>
														</a>
														: ""
												)
											:
											this.props.Isitapopup && this.props.Isitapopup === "true" ?
												""
												:
												(
													items.edit_role === true ?
														<a target="_blank" href={`/problemset/edit/${items.id}`}>
															<p className="viewparsings  xiaoshou mr25">
																<i className="iconfont icon-bianji2 font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
																<span>编辑</span>
															</p>
														</a>
														: ""
												)
									}
								</div>
						}
						{
							items.item_type === "PROGRAM" ?
								""
								:

								(
									items.edit_role === true && items.check_answer_role === true ?
										<p className="viewparsings xiaoshou  mr25" onClick={() => this.props.chakanjiexibool(keindex)}>
											<i className="iconfont icon-jiexi font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
											查看解析</p>
										: items.check_answer_role === true ?
											<p className="viewparsings xiaoshou " onClick={() => this.props.chakanjiexibool(keindex)}>
												<i className="iconfont icon-jiexi font-17 lg ml7 lh26 icontianjiadaohangcolors mr5"></i>
											查看解析</p>
											: ""
								)

						}

					</div>

				</div>
				{/*//题干标题*/}
				<div className="w100s sortinxdirection plpr">
					<div className="listjihetixingstitsmy  xiaoshout" style={{
						fontWeight: "bold"
					}}>
						{this.props.listjihe}
					</div>

					{
						items.item_type === "PROGRAM" ?
							(
								this.props.defaultActiveKeys && this.props.defaultActiveKeys === "0" ?
									<a onClick={() => this.seturls(`/problems/${items.program_attr.identifier}/edit`)} >
										<RenderHtml className="marpres marpresys titequestion" value={itemssname} />
									</a>
									:
									<a onClick={() => this.seturlsbc(items.program_attr.identifier)}>
										<RenderHtml className="marpres marpresys titequestion" value={itemssname} />
									</a>
							)

							:
							<div>
								{items === undefined || items === null || items === "" ? "" :
									items.name === undefined || items.name === null || items.name === "" ?
										""
										:
										items.name.length > 0 ?
											itemssname === null || itemssname === undefined ? "" :
												<RenderHtml className="marpres marpresys titequestion" value={itemssname} />
											: ""
								}
							</div>
					}

				</div>
				{/*内容*/}
				<div className="w100s sortinxdirection plpr">
					{items.item_type === "JUDGMENT" ?
						<p className="w100s listjihetixingstitsp sortinxdirection ">
							{
								items === undefined || items === null ? "" : items.choices.map((object, index) => {
									return (
										<p className={index === 1 ? "sortinxdirection  ml10" : "sortinxdirection  "}>
											<Radio disabled={true}>
												{object.choice_text}
											</Radio>
										</p>
									)
								})
							}
						</p> :
						items.item_type === "PROGRAM" ?
							<div className="w100s listjihetixingstitssy sortinxdirection ">
								{itemsnamesy === null || itemsnamesy === undefined ? null : <RenderHtml value={itemsnamesy} className="marpres" />}
							</div>
							:
							<div className="w100s listjihetixingstitsppy verticallayout ">
								{
									items === undefined || items === null ? "" : items.choices.map((object, index) => {
										var string = ""
										string = object.choice_text;
										return (
											<div className={index === 0 ? "sortinxdirection " : "sortinxdirection "}>
												<p className="">{tagArray[index]}</p>
												{object ?
													object.choice_text === undefined || object.choice_text === null || object.choice_text === "" ?
														null
														:
														object.choice_text.length > 0 ? <RenderHtml className="marpres optionquestion" value={string} /> : null
													:
													null
												}
											</div>
										)
									})
								}
							</div>
					}
				</div>

				<div className="w100s sortinxdirection mt10 plpr">
					<p
						className="listjihetixing">难度：<span>{items.difficulty === 1 ? "简单" : items.difficulty === 2 ? "适中" : items.difficulty === 3 ? "困难" : ""}</span>
					</p>
				</div>
				{/*更新时间*/}
				<div className="w100s sortinxdirection plpr">
					<div className="w50s listjihetixingstit sortinxdirection">
						<p className="updatetimes lh30">更新时间：{items.update_time}</p>
						{
							items.item_type === "PROGRAM" ?
								<p className="updatetimes lh30 ml25 tknamelengs">编程语言：{items.program_attr.language}</p>
								: ""
						}
						{items.item_type === "PROGRAM" ? items.program_attr.status === 0 ? <p className="updatetimes  ml25 nofabu mt5">未发布</p> : "" : ""}
					</div>
					<div className="w50s xaxisreverseorder">
						{
							items.choosed === true ?
								<p className="selectionssradiu  xiaoshou" onClick={() => this.Selectingpracticaltrainings(items.id)}>
									{/*<i className="iconfont icon-jianhao font-12 lg ml7 lh30 icontianjiadaohangcolor mr5"></i>*/}
									<span className=" lh30">撤销</span></p>
								:
								items.item_type === "PROGRAM" ?
									items.program_attr.status === 0 ?
										<Tooltip placement="top" title={"编程题未发布，不能选用！"}>
											{
												Periofters === false ? "" :
													<p className="selectionys  jinzhixiaoshou">
														<i
															className="iconfont icon-tianjiadaohang font-12  ml7 lh17 icontianjiadaohangcolor mr5 lh20ss"></i>
														<span className="mr15 lh16 lh20ss">选用</span>
													</p>
											}

										</Tooltip>

										:
										(
											Periofters === false ? "" :
												<p className="selection  xiaoshou" onClick={() => this.Selectingpracticaltraining(items.id)}>
													<i
														className="iconfont icon-tianjiadaohang font-12  ml7 lh17 icontianjiadaohangcolor mr5 lh20ss"></i>
													<span className="mr15 lh16 lh20ss">选用</span>
												</p>
										)

									:
									(
										Periofters === false ? "" :
											<p className="selection  xiaoshou" onClick={() => this.Selectingpracticaltraining(items.id)}>
												<i
													className="iconfont icon-tianjiadaohang font-12  ml7 lh17 icontianjiadaohangcolor mr5 lh20ss"></i>
												<span className="mr15 lh16 lh20ss">选用</span>
											</p>
									)

						}

						{
							items.item_type === "PROGRAM" ?
								(
									Periofters === false ?
										<p className="selection typeBlues xiaoshou" onClick={() => this.seturlsbc(items.program_attr.identifier)}>
											<span className=" lh16 lh20ss">开始体验</span>
										</p>
										:
										<p className="selection typeBlues xiaoshou mr35" onClick={() => this.seturlsbc(items.program_attr.identifier)}>
											<span className=" lh16 lh20ss">开始体验</span>
										</p>
								)
								: ""
						}


					</div>
				</div>
				{
					chakanjiexiboolindex === keindex ? <div>
						<div className="w100s questiontypeheng mt23">
						</div>
						<div className=" sortinxdirection mt15 yldxtit">
							{
								items.item_type === "SINGLE" ?
									<RenderHtml className=" testfondex yldxtit" value={"答案：" + rightkeyy} />
									: items.item_type === "MULTIPLE" ? <RenderHtml className=" testfondex yldxtit" value={"答案：" + MULTIPLEkeys} />
										:
										<RenderHtml className=" testfondex yldxtit" value={"答案：" + rightkeys} />
							}

						</div>
						<div className=" sortinxdirection mt5 yldxtit">
							<p className=" testfondex yldxtit "
								style={{ wordBreak: "break-word" }}
							>
								解析：
							</p>
							<p id={"analysisnamesid"} className="wt930px testfondex yldxtit programquill"
								style={{ wordBreak: "break-word" }}
							>
								{items ?
									items.analysis === undefined || items.analysis === null || items.analysis === "" ?
										<p className=" testfondex yldxtit "
											style={{ wordBreak: "break-word" }}
										>
											暂无解析
										</p>
										:
										items.analysis.length > 0 ?
											analysisnames === null || analysisnames === undefined ? "" :
												<RenderHtml className="marpres optionquestion" value={analysisnames} />
											:
											<p className=" testfondex yldxtit "
												style={{ wordBreak: "break-word" }}
											>
												暂无解析
											</p>
									:
									""
								}
							</p>
						</div>
					</div> : ""
				}


			</div>
		)

	}

}

export default Listjihe;
