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,
	Col, Row, InputNumber, DatePicker, AutoComplete,Button,Tag
} from "antd";
import './../questioncss/questioncom.css';
const InputGroup = Input.Group;
const { Option } = Select;
const options = [
	{
		value: 'zhejiang',
		label: 'Zhejiang',
		children: [
			{
				value: 'hangzhou',
				label: 'Hangzhou',
				children: [
					{
						value: 'xihu',
						label: 'West Lake',
					},
				],
			},
		],
	},
	{
		value: 'jiangsu',
		label: 'Jiangsu',
		children: [
			{
				value: 'nanjing',
				label: 'Nanjing',
				children: [
					{
						value: 'zhonghuamen',
						label: 'Zhong Hua Men',
					},
				],
			},
		],
	},
];
class Itembankstop extends Component {
	constructor(props) {
		super(props);
		this.contentMdRef = React.createRef()
		this.state = {
			page:1,
			Knowpoints:[],
			rbtx:"",
		}
	}
	//初始化
	componentDidMount(){
		try {
			this.props.getcontentMdRef(this);
		}catch (e) {

		}
		//console.log("componentDidMount");
		//console.log(this.state);
		//console.log(this.props);
		// let homeworkid = this.props.match.params.homeworkid;
		// let url = "/homework_commons/" + homeworkid + "/end_groups.json";
		// axios.get(url).then((response) => {
		// 	if (response.status === 200) {
		// 		this.setState({})
		// 	}
		// }).catch((error) => {
		// 	//console.log(error)
		// });()
		// 题型




	}
	componentDidUpdate(prevProps) {
		//  console.log("componentDidUpdate");
		// console.log(prevProps);
		// console.log(this.props.item_banksedit);

		if(prevProps.item_banksedit !== this.props.item_banksedit){
			this.handleFormtixing(this.props.item_banksedit.item_type);
			this.handleFormLayoutChange(this.props.item_banksedit.difficulty);
		}
	}
	onChange=(e)=> {
		//console.log(`checked = ${e.target.checked}`);
	}
	Getdatas=()=>{
     return this.handleSubmits();
	}
	handleSubmits=()=>{
		var data=[];
		this.props.form.validateFields((err, values) => {
			data=[]
			if (!err) {
				// //console.log("获取的form 数据");
				// //console.log(values);
				data= values;
			}
		});

		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);
		this.props.form.setFieldsValue({
			rbkc:value,
		});

	}

	handleFormzhishidian=(value)=>{
		//知识点
		//console.log("知识点");
		//console.log(value);
		this.props.form.setFieldsValue({
			rbzsd:value,
		});
    this.setState({
			Knowpoints:value,
		})
	}

	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 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,
		})

		// //console.log("deletesobject");
		// //console.log(item);
		// //console.log(index);
		// //console.log(this.state.Knowpoints);
		// //console.log("tmp");
		// //console.log(tmp);
	}



	render() {
		let {page}=this.state;
		const { getFieldDecorator } = this.props.form;
		console.log("renderrenderrender");
		console.log(this.props.item_banksedit);
		console.log("renderrenderrendersssss");
		console.log(this.state.rbtx);
		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}>
					<Form.Item
						label="课程"
					>
						{getFieldDecorator("rbkc",
							{
								rules: [{ required: true, message: '请选择课程' }],
							}
						)(

							<InputGroup compact  >
								<Select style={{ width: '258px' }} onChange={this.handleFormkechen}  placeholder="请选择...">

									<Option value="Home">Home</Option>
									<Option value="Company">Company</Option>
								</Select>
							</InputGroup>
						)}
					</Form.Item>
									<Form.Item
						label="知识点"
					>
						{getFieldDecorator("rbzsd",
							{
								rules: [{ required: true, message: '请选择知识点' }],
							}
						)(
							<div className="sortinxdirection">
								<InputGroup compact >
									<Cascader style={{ width: '258px' }} defaultValue={this.state.Knowpoints} options={options} onChange={this.handleFormzhishidian} placeholder="请选择..." />
								</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}</p>
												<i className="iconfont icon-roundclose font-25 lg ml7 icondowncolorss" onClick={()=>this.deletesobject(object,index)}></i>
											</div>
										)
									})}

								</div>
							</div>

						)}
					</Form.Item>

					<Form.Item
						label="题型"
					>
						{getFieldDecorator("rbtx",
							{
								rules: [{ required: true, message: '请选择题型'}],
							}
						)(
							<InputGroup compact>
								<Select style={{ width: '258px' }}  defaultValue={this.state.rbtx} 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>


					<style>
						{
							`
							.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;

							}
							.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;

							}
							.ant-radio-button-wrapper:not(:first-child)::before{
								border:0px !important;
									width:0px !important;
							}
							
							.ant-radio-button-wrapper{
								border:0px !important;
							}
							.ant-radio-group{
								border:0px !important;
							}
							.ant-radio-group label{
								border:0px !important;
							}
							
							.ant-radio-group span{
								border:0px !important;
							}
							
							ant-radio-button-wrapper:focus-within {
									outline: 0px solid #ffffff;
							}
							
							`
						}
					</style>
					<Form.Item label="难度">
						{getFieldDecorator('rbnd',
							{
								rules: [{ required: true, message: '请选择难度'}],
							}
						)(

							<Radio.Group defaultValue={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>

					{/*<Form.Item>*/}
					{/*	<Button type="primary" htmlType="submit" className="login-form-button">*/}
					{/*		提交*/}
					{/*	</Button>*/}
					{/*</Form.Item>*/}

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

	}



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