import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Button,Form } from "antd";
import { WordsBtn,on, off, trigger,markdownToHTML,getImageUrl} from 'educoder';
import './myysleduinforms.css'
import axios from 'axios';
import TPMMDEditor from "../../tpm/challengesnew/TPMMDEditor";
import moment from "../new/CoursesNew";
import Fileslistitem from "../Resource/Fileslistitem";
// 公告栏
class Bullsubdirectory extends Component{
	constructor(props){
		super(props);
		this.messageRef = React.createRef();

		this.state={
			description:null,
			isSpinysl:false,
			whethertoeditysl:false,
			addonAfter:0,
			eduintits:"",
			informs:[],


		}
	}

	componentDidMount() {
		console.log("获取到数据");
		console.log(this.props);
		let{id,myname,mydescription} =this.props
		this.props.form.setFieldsValue({
			id:id,
			eduintits:myname,
			description:mydescription,
		});
		this.setState({
			id:id,
			eduintits:myname,
			description:mydescription,

		})
		if(myname!=undefined){
			this.setState({
				addonAfter:myname.length
			})
		}

	}


	bianji = (bians)=>{
		this.setState({
			whethertoeditysl:bians,
		})
		if(bians===true){
			this.props.getyslbooltrue();
		}else {
			this.props.getyslboolfalse();
		}
	};
	changeTopicName = (e) => {
		console.log("调用了changeTopicName");
		let num = e.target.value.length;

		if(num>60){
			return;
		}
		this.setState({
			addonAfter: num < 0 ? 0 : num
		});
		if(num<=60){
			this.setState({
				eduintits: e.target.value
			})

			this.props.form.setFieldsValue({
				eduintits: e.target.value,
			});
		}


	}
	handleSubmit=(e) => {
		e.preventDefault();
		this.props.form.validateFields((err, values) => {
			if (!err) {
				console.log(values.description);
				if(values.eduintits === undefined|| values.eduintits === "" || values.eduintits ===null){
					this.props.showNotification(`请输入标题`);
					return

				}
				if(values.description === undefined|| values.description === "" || values.description ===null){
					this.props.showNotification(`请输入内容`);
					return

				}
				var  id=this.props.match.params.coursesId
				var titname="";
				try {
					if(values.eduintits.length>0){
						if( values.eduintits.length>60){
							var str=values.eduintits;
							titname=str.substring(0,60);
						}else {
							titname=values.eduintits;
						}
					}else {
						titname=values.eduintits;
					}
				}catch (e) {
					titname=values.eduintits;
				}
				var  url = `/courses/${id}/update_informs.json`;
				axios.post(url,{
					inform_id:this.state.id,
					name:titname,
					description:values.description,
				}).then((result) => {
					if(result){
						if(result.data){
							if(result.data.status === 0){
								this.props.form.setFieldsValue({
									id:this.state.id,
									eduintits:titname,
									description:values.description,
								});
								this.setState({
									whethertoeditysl:false,
									id:this.state.id,
									eduintits:titname,
									description:values.description,
								});
								this.props.getinputdata();
								this.props.getyslboolfalse();
								this.props.showNotification(result.data.message);
							}else {
								this.props.showNotification(result.data.message);

							}
						}

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

		});
	}


	render(){
		let{description,whethertoeditysl,addonAfter,eduintits,informs,isSpinysl} =this.state;
		let{myname,mydescription}=this.props;
		const {getFieldDecorator} = this.props.form;

		return(
			<React.Fragment  >
				<div >
					<Spin size="large" spinning={isSpinysl}  >
										<div  className="edu-back-white ">
											{
												whethertoeditysl === false?
													<div>
														<div  className="" >
															<div className="fudonyingxiangysl"><div className="ysltitbt fl"><span >{myname}</span></div>
																{
																	this.props.isAdmin() === true ?
																		(this.props.yslbool===false?
																				<i className="iconfont icon-bianji1 newbianji1 fr pr25  yslbianji" onClick={()=>this.bianji(true)}></i>
																				:
																				""
																		)

																		:""
																}
															</div>
															<div id="MakedownHTML"className={"markdown-body fonttext yslmtopcg yslminHeigth markdownysltext"}   dangerouslySetInnerHTML={{__html: markdownToHTML(mydescription).replace(/▁/g, "▁▁▁")}}/>
														</div>
														<div className="bor-bottom-greyE mr25 ml25"></div>
													</div>
													:
													<div  className="edu-back-white ">
														<Form layout='vertical' onSubmit={this.handleSubmit} >
															<style>
																{
																	`.ant-form-item{
															    margin-bottom:0px !important;
															}
															.chooseDestwo .ant-form-item{
															    margin-bottom:0px !important;
															}
														
															.chooseDestwo .ant-form-item-control-wrapper .ant-form-item-control .ant-form-explain{
															padding-left: 25px !important;
															}
															.ant-form-vertical .ant-form-item {
															margin-bottom:0px !important;
															 }
															`

																}
															</style>
															<Form.Item
																style={{"borderBottom":'none'}}
																className="chooseDestwo "
															>
																{getFieldDecorator('eduintits',{ initialValue: this.state.eduintits }, {
																	rules: [{
																		required: true, message: '请在此输入标题,最多60个字符',
																	}],
																})(
																	<div className="ysleduinwh">
																		<div className="yslduinlefts">
																			<span className="yslduincolorred">*</span>
																		</div>
																		<div className="yslduinleft">
																			<style>{
																				`
																					.ant-input{
																				border-right: none !important;
																				height: 40px !important;
																				}
																		`
																			}</style>
																			<Input placeholder="请在此输入标题，最多60个字符" maxLength="60"
																						 style={{ textAlign: "left",width:"100%",}}
																						 onInput={this.changeTopicName}
																						 autoComplete="off"
																						 addonAfter={String(addonAfter)+"/60"}
																						 value={eduintits}
																						 className="searchViewAfter"></Input>
																		</div>

																	</div>
																)}
															</Form.Item>


															<div  className="edu-back-white ">
																<div className={"yslmt16px"}>
																	<style>
																		{
																			`
																.ant-form-item-children {
																		position: unset;
																}
																
																	.chooseDes .ant-form-item{
															    margin-bottom:0px !important;
															}
															.rememberTip{
																position:absolute;
																right:0px;
																bottom:-10px;
															}
															.chooseDes .ant-form-explain{
															position:absolute;
															bottom:-10px;
															left:0px;
														}
														.ant-form-vertical .ant-form-explain {
																margin-top: 0px !important;
																margin-bottom: 0px !important;
																padding-left: 0px !important;
														}
														.chooseDes .ant-form-item-with-help {
																	margin-bottom: 24px !important;
															}
															
															.courseMessageMD .ant-form-item-with-help {
																	margin-bottom: 24px !important;
															}
														.chooseDes .editormd-toolbar {
														 width: 100%; 
														 min-height: 37px; 
														 background: #fff; 
														 display: none; 
														 position: absolute !important; 
														 left: 0;
												     z-index: 10; 
														 border-bottom: 1px solid #ddd; 
														 
														}
														.yslmt16px .ant-form-item-with-help
														{
																margin-bottom: 24px !important;
														}
															`
																		}
																	</style>
																	<Form.Item
																		style={{"borderBottom":'none'}}
																		className="chooseDes "
																	>
																		{getFieldDecorator('description', { initialValue: this.state.description },{
																			rules: [{
																				required: true, message: '请在此输入内容,最多5000个字符',
																			}, {
																				len: 5000, message: '最大限制为5000个字符',
																			}],
																		})(
																			<TPMMDEditor ref={this.messageRef}
																									 placeholder={'请在此输入内容,最多5000个字符'}
																									 initValue={description}
																									 mdID={'courseMessageMD'}
																									 className="courseMessageMD "
																									 height={518}
																			></TPMMDEditor>
																		)}
																	</Form.Item>
																</div>
															</div>

															<Form.Item>
																<div className="clearfix mt28  fr pb50 mr25">
																	<a className="defalutCancelbtn fl mr20 " onClick={()=>this.bianji(false)}>取消</a>
																	<Button   htmlType="submit"  className="ant-btn defalutSubmitbtn fl  ant-btn-primary">
																		<span>提 交</span></Button>
																</div>
															</Form.Item>
														</Form>
														<div className="bor-bottom-greyE mr25 ml25"></div>
													</div>
											}
										</div>
					</Spin>

				</div>
			</React.Fragment>
		)
	}
}
const Bullsubdirectorys = Form.create({ name: 'bullsubdirectorys' })(Bullsubdirectory);
export default Bullsubdirectorys;