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";
 // 公告栏
class Eduinforms extends Component{
	constructor(props){
		super(props);
		this.messageRef = React.createRef();

		this.state={
			description:null,
			isSpin:true,
			whethertoedit:false,

		}
	}

	componentDidMount() {
		console.log("获取到数据");
    console.log(this.props);
    let url = `/courses/${this.props.match.params.coursesId}/informs.json`;
		//
		axios.get(url).then((response) => {
			if(response){
       if(response.data){
         this.setState({
					 description:response.data.description,
					 isSpin:false,
				 })
			 }else {
				 this.setState({
					 description:null,
					 isSpin:false,

				 })

			 }
			}else {
				this.setState({
					description:null,
					isSpin:false,
				})

			}
		}).catch((error) => {
			console.log(error)
			this.setState({
				description:null,
				isSpin:false,
			})
		});

	}


	componentDidUpdate = (prevProps) => {



	}
	bianji = (bians)=>{
		this.setState({
			whethertoedit:bians,
		})

	};

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

				}
				var  id=this.props.match.params.coursesId

				var  url = `/courses/${id}/update_informs.json`;
				axios.post(url,{
					description:values.description,
				}).then((result) => {
				 if(result){
				 	if(result.data){
           if(result.data.status === 0){
            this.setState({
							description:values.description,
							whethertoedit:false,
						})
						 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,whethertoedit} =this.state;
		const {getFieldDecorator} = this.props.form;

		return(
			<React.Fragment  >
				<div id={"zhudiv"}>
					<div className="edu-back-white">
						<p className="clearfix padding30 bor-bottom-greyE">
							<p style={{height: '20px'}}>
								<span className="font-18 fl color-dark-21">公告栏</span>
								{
									this.props.isAdmin()===true?
										<li className="btn colorblue font-16 fr" style={{cursor: "default"}}
												onClick={() => this.bianji(true)}>
											编辑
										</li>
										:""
								}

							</p>

						</p>
					</div>
					<Spin size="large" spinning={this.state.isSpin}  id={"cdiv"}>

								<div id={"cdiv1"}>
									{
										whethertoedit === false?
											<div>
												{
													description === null || description=== undefined ||description === "" ?
														<div className="alltask ">
															<div className="edu-tab-con-box clearfix edu-txt-center"><img className="edu-nodata-img mb20"
																																														src={getImageUrl("images/educoder/nodata.png")} />
																<p className="edu-nodata-p mb20">暂时还没有相关数据哦！</p></div>
														</div>
														:
														<div  className="edu-back-white ">
														<div id="MakedownHTML"  className={"markdown-body fonttext yslmtopcg"}   dangerouslySetInnerHTML={{__html: markdownToHTML(description).replace(/▁/g, "▁▁▁")}}>


														</div>
														</div>
												}
											</div>
											:
											<div>
												<Form layout='vertical' onSubmit={this.handleSubmit} >

											<div  className="edu-back-white ">
												<div className={"yslmt16px"}>
													<style>
														{
															`
																.ant-form-item-children {
																		position: unset;
																}
															.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', {
														rules: [{
															required: true, message: '请在此输入内容,最多5000个字符',
														}, {
															max: 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" style={{display:"block;"}}>
													<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>
									}


								</div>




					</Spin>

				</div>
			</React.Fragment>
		)
	}
}
const Eduinformss = Form.create({ name: 'eduinforms' })(Eduinforms);
export default Eduinformss;