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,
	Radio,
	Checkbox,
	Form,
	Input,
	Select,
	Cascader,
	AutoComplete,
	Col, Row, InputNumber, DatePicker, Button, Tag
} from "antd";
import './../questioncss/questioncom.css';

const InputGroup = Input.Group;
const {Option} = Select;

class Comthetestpapers extends Component {
	constructor(props) {
		super(props);
		this.contentMdRef = React.createRef()
		this.state = {
			page: 1,
			Knowpoints: [],
			rbtx: undefined,
			rbkc: undefined,
			knowledgepoints: [],
			options: [],
		}
	}

	//初始化
	componentDidMount() {
		try {
			this.props.getcontentMdRef(this);
		} catch (e) {

		}

		this.setState({
			options: this.props.disciplmy,
			knowledgepoints: this.props.knowledgepoints,
		})


	}


	handdisciplinesChange =(name,title)=>{
		this.setState({
			rbkc:[name.id,title.id]
		})
		this.props.form.setFieldsValue({
			rbkc: [name.id,title.id],
		});

		if(this.props.item_banksedit.tag_disciplines.length===0){
			const didata = this.props.disciplinesdata;
			const knowledgepointsdata = [];

			for (var i = 0; i < didata.length; i++) {
				//方向
				if (name.id === didata[i].id) {
					const fxdidata = didata[i].sub_disciplines;
					for (var j = 0; j < fxdidata.length; j++) {
						//课程
						if (title.id === fxdidata[j].id) {
							const zsddata = fxdidata[j].tag_disciplines;
							for (var k = 0; k < zsddata.length; k++) {
								//知识点
								knowledgepointsdata.push(zsddata[k]);


							}

						}

					}
				}


			}

			this.setState({
				Knowpoints: [],
				knowledgepoints: knowledgepointsdata,
			})

		}










	}
	handletag_disciplinesChange = (data) => {
		try {
			var sju=data[data.length-1].name;
			this.setState({
				rbzsd:sju,
				Knowpoints:data,
			})
			this.props.form.setFieldsValue({
				rbzsd: sju,
			});
		}catch (e) {

		}
	}
	onChange = (e) => {

	}
	Getdatas = () => {
		return this.handleSubmits();
	}
	handleSubmits = () => {
		var data = [];
		this.props.form.validateFields((err, values) => {
			data = [];
			if (!err) {
				data.push({
					rbnd: parseInt(values.rbnd)
				})
				data.push({
					rbtx: values.rbtx
				})
				data.push({
					rbzsd: this.state.Knowpoints
				})
				data.push({
					rbkc: values.rbkc
				})
				data.push({
					classroom:values.classroom
				})
				data.push({
					kssc:values.kssc
				})

			}
		});

		return data;

	}
	handleSubmit = (e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				////console.log("获取的form 数据");
				////console.log(values);

			}


		});
	}

	handleFormLayoutChange = (value) => {
		//难度塞选
		////console.log("难度塞选");
		////console.log(value);
		this.props.form.setFieldsValue({
			rbnd: value + "",
		});
		this.setState({
			rbnd: value + "",
		})

	}
	handleFormkechen = (value) => {
		//课程
		////console.log("课程");
		////console.log(value);
		var valuename = undefined;
		this.props.form.setFieldsValue({
			rbzsd: value,
		});

		var arr = this.state.knowledgepoints;
		for (let data of arr) {
			if (data.id === value) {
				this.state.Knowpoints.push(data);
				valuename = data.name;
			}
		}

		var tmp = JSON.parse(JSON.stringify(this.state.knowledgepoints));
		for (var i = 0; i < tmp.length; i++) {
			if (tmp[i].id === value) {
				this.state.knowledgepoints.splice(i, 1);
			}
		}

		this.setState({
			rbzsd: valuename,
			Knowpoints: this.state.Knowpoints,
			knowledgepoints: this.state.knowledgepoints,
		})

	}

	handleFormzhishidian = (value) => {
		console.log("handleFormzhishidian 课程");
		console.log(value);

		//课程
		this.props.form.setFieldsValue({
			rbkc: value,
		});
		this.setState({
			rbkc:value,
		})
		// console.log("handleFormzhishidian");
		// console.log(this.props.disciplinesdata);

		const didata = this.props.disciplinesdata;
		const knowledgepointsdata = [];

		for (var i = 0; i < didata.length; i++) {
			//方向
			if (value[0] === didata[i].id) {
				const fxdidata = didata[i].sub_disciplines;
				for (var j = 0; j < fxdidata.length; j++) {
					//课程
					if (value[1] === fxdidata[j].id) {
						const zsddata = fxdidata[j].tag_disciplines;
						for (var k = 0; k < zsddata.length; k++) {
							//知识点
							knowledgepointsdata.push(zsddata[k]);


						}

					}

				}
			}


		}

		this.setState({
			Knowpoints: [],
			knowledgepoints: knowledgepointsdata,
		})

		this.props.form.setFieldsValue({
			rbzsd: undefined,
		});
		this.setState({
			rbzsd: undefined,
		})
	}

	handleFormtixing = (value) => {
		//题型
		//console.log("题型");
		//console.log(value);
		this.setState({
			rbtx: value + "",
		})
		this.props.form.setFieldsValue({
			rbtx: value + "",
		});
		this.props.setitem_type(value);
	}
	preventDefault = (e) => {
		e.preventDefault();
		////console.log('Clicked! But prevent default.');
	}
	deletesobject = (item, index) => {
		var arr = this.state.Knowpoints;
		for (let data of arr) {
			if (data.id === item.id) {
				this.state.knowledgepoints.push(data);
			}
		}


		var tmp = JSON.parse(JSON.stringify(this.state.Knowpoints));
		for (var i = 0; i < tmp.length; i++) {
			if (i >= index) {
				var pos = this.state.Knowpoints.indexOf(tmp[i]);
				this.state.Knowpoints.splice(pos, 1);
			}
		}

		this.props.form.setFieldsValue({
			rbzsd: this.state.Knowpoints,
		});


		this.setState({
			Knowpoints: this.state.Knowpoints,
		})

		if (this.state.Knowpoints.length === 0) {
			this.setState({
				rbzsd: undefined,
			})
		} else if (this.state.Knowpoints.length > 0) {
			try {
				const myknowda = this.state.Knowpoints;
				this.setState({
					rbzsd: myknowda[this.state.Knowpoints.length - 1].name,
				})
			} catch (e) {

			}

		}

	}
	handleSearch=(value)=>{


		if(value!=""){
			this.props.form.setFieldsValue({
				classroom:value,
				// course:value
			});
			// this.Searchvalue(value)
		}

	};

	handleChange=(e)=>{
		console.log(e);
		this.props.form.setFieldsValue({
			// course:value,
			classroom:e.target.value,
		})
		if(e.target.value){
			if(e.target.value.length>60){
				this.setState({
					bordebool:true,
				})
			}else if(e.target.value.length===0){
				this.setState({
					bordebool:true,
				})
			}else{
				this.setState({
					bordebool:false,
				})
			}
		}else{
			this.setState({
				bordebool:true
			})

		}

	};

	render() {
		let {page,options} = this.state;
		const {getFieldDecorator} = this.props.form;
		const optionss = this.state.searchlist && this.state.searchlist.map(d => <Option key={d.name} value={d.name}>{d.name}</Option>);
		var addonAfterthree=this.props.form&&this.props.form.getFieldValue('classroom');
		var addonAfteronelens3=0;
		if(addonAfterthree){
			addonAfteronelens3=String(addonAfterthree).length;
		}

		console.log("Comthetestpapers.js");
		console.log(this.props);
		return (

			<div className=" clearfix  educontent Contentquestionbankstyle w100s w1200fpx mt19">
				<style>
					{
						`
						.ant-form-item{
						 margin-bottom: 0px !important;
						
						
						}
						.ant-form-explain{
						padding-left:0px !important;
						margin-top: 3px !important;
						}
					.ant-select-selection{
					height: 33px !important;
					}
					.ant-input-group{
					  width:258px !important;
					} 
					.ant-input {
					height: 33px !important;
					}
					
					.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):focus-within {
    outline: 0px solid rgba(24, 144, 255, 0.06) !important;
}
           
						`
					}
				</style>
				<div className="h12"></div>
				<Form onSubmit={this.handleSubmit}>
					<div className="kechen">
				<Form.Item
					label="课程:"
				>
					{getFieldDecorator("rbkc",
						{
							rules: [{required: true, message: '请选择课程'}],
						}
					)(
						<div className="sortinxdirection">
							<InputGroup compact>
								<Cascader style={{width: '258px'}} value={this.state.rbkc} options={options} onChange={this.handleFormzhishidian}
													placeholder="请选择..."/>
							</InputGroup>
						</div>
					)}
				</Form.Item>
					</div>

					<div className="zsdd">
					<Form.Item
						label="知识点:"
					>
						{getFieldDecorator("rbzsd"
						)(
							<div className="sortinxdirection">
								<InputGroup compact>
									<Select style={{width: '258px'}} value={this.state.rbzsd} onChange={this.handleFormkechen}
													placeholder="请选择...">
										{this.state.knowledgepoints && this.state.knowledgepoints.map((object, index) => {
											return (
												<Option value={object.id}>{object.name}</Option>
											)
										})}
									</Select>
								</InputGroup>
								<div className="sortinxdirection" style={{
									height: "33px",
									lineHeight: "28px",

								}}>

									{this.state.Knowpoints === undefined ? "" : this.state.Knowpoints.map((object, index) => {
										return (
											<div className="mytags" style={{
												position: "relative",
											}}>
												<p className="w100s  stestcen lh32">{object.name}</p>
												<i className="iconfont icon-roundclose font-25 lg ml7 icondowncolorss"
													 onClick={() => this.deletesobject(object, index)}></i>
											</div>
										)
									})}

								</div>
							</div>
						)}
					</Form.Item>
					</div>
					<style>
						{
							`
										.ml19{
											margin-left:19px;
											}
										`
						}
					</style>
					<div className="stud-class-set    ">
						<style>{
							`
										.yslzxueshis .ant-input{
										border-right: none !important;
										height: 38px !important;
										width: 970px !important;
										}
										 .yslzxueshisy span .ant-input-group-addon{
											width: 65px !important;
											background-color: #fafafa!important;
										 }
										.yslzxueshisy .ant-input-group-addon{
											width: 65px !important;
											background-color: #fafafa!important;
										 }

										`
						}</style>
						<div className="sjmc">
						<Form.Item label="试卷名称:">
							{getFieldDecorator('classroom', {
								rules:  [{required: true, message: "不能为空"}],
							})(

								<AutoComplete
									onSearch={this.handleSearch}
									className={"fl construction yslzxueshis "}
									dataSource={optionss}
								>
									<Input className="yslzxueshisy " placeholder="例如：数据结构" onInput={this.handleChange}  addonAfter={String(addonAfteronelens3)+"/60"}  maxLength={60} />
								</AutoComplete>
							)}
							<div id='isclassroom'></div>
						</Form.Item>
						</div>

					</div>
					<style>
						{
							`
							.kssc .ant-form-item-label{
							    line-height: 38px !important;
							}
							
							`
						}
					</style>
					<div className="kssc">

					<Form.Item label="考试时长:">
						{getFieldDecorator('kssc')(<InputNumber
							min={0}
							step={0.1}
						></InputNumber>)}
						<span className="ant-form-text"> 分钟</span>
					</Form.Item>
					</div>
					<div className="tixing">
					<Form.Item
						label="题型:"
					>
						{getFieldDecorator("rbtx",
							{
								rules: [{required: true, message: '请选择题型'}],
							}
						)(
							<InputGroup compact>
								<Select style={{width: '258px'}} value={this.state.rbtx} onChange={this.handleFormtixing}
												placeholder="请选择...">
									<Option value="SINGLE">单选题</Option>
									<Option value="MULTIPLE">多选题</Option>
									<Option value="JUDGMENT">判断题</Option>
									<Option value="PROGRAM">编程题</Option>
								</Select>
							</InputGroup>
						)}
					</Form.Item>
					</div>

					<style>
						{
							`
							.rbndclass .ant-radio-button-wrapper{
							width:106px !important;
							height:33px !important;
							background:#EEEEEE;
							border-radius:17px !important;
							color:#333333; 
							text-align: center !important;
							border:0px !important;
							margin-right: 27px !important;
							    margin-top: 6px !important;

							}
							.rbndclass .ant-radio-button-wrapper-checked {
						    width: 106px !important;
								height: 33px !important;
								background: #4CACFF !important;
								border-radius: 17px !important;
								text-align: center !important;
								border:0px !important;
								color: #ffffff !important;
								margin-right: 27px !important;
								    margin-top: 6px!important;

							}
							.rbndclass .ant-radio-button-wrapper:not(:first-child)::before{
								border:0px !important;
									width:0px !important;
							}
							
							.rbndclass .ant-radio-button-wrapper{
								border:0px !important;
							}
							.rbndclass .ant-radio-group{
								border:0px !important;
							}
							.rbndclass .ant-radio-group label{
								border:0px !important;
							}
							
							.rbndclass .ant-radio-group span{
								border:0px !important;
							}
							
							ant-radio-button-wrapper:focus-within {
									outline: 0px solid #ffffff;
							}
							
							`
						}
					</style>
					<div className="rbndclass">
						<Form.Item label="难度:">
							{getFieldDecorator('rbnd',
								{
									rules: [{required: true, message: '请选择难度'}],
								}
							)(
								<Radio.Group value={this.state.rbnd} onChange={this.handleFormLayoutChange}>
									<Radio.Button value="1">简单</Radio.Button>
									<Radio.Button value="2">适中</Radio.Button>
									<Radio.Button value="3">困难</Radio.Button>
								</Radio.Group>,
							)}
						</Form.Item>
					</div>

				</Form>
				<div className="h20"></div>
			</div>
		)

	}


}

const Comthetestpaperss = Form.create({name: 'Itembankstops'})(Comthetestpapers);
export default Comthetestpaperss;