import React,{ Component } from "react";
import { Input,Checkbox,Table, Pagination, Modal,Menu, Tooltip,Spin,Button,Form,Row, Col } 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";
import Modals from "../../modals/Modals";
// 公告栏
class Bullsubdirectory extends Component{
constructor(props){
super(props);
this.messageRef = React.createRef();
this.state={
description:null,
isSpinysl:false,
whethertoeditysl:false,
addonAfter:0,
eduintits:"",
informs:[],
Modalstype:false,
Modalstopval:"是否确认删除?",
ModalCancel:"",
ModalSave:"",
index:0,
}
//不能显示数据编辑的时候没有赋值
//没加initialValue 输入不能赋值到from 上
}
componentDidMount() {
console.log("获取到数据");
console.log(this.props);
let{id,myname,mydescription,index,item} =this.props
this.props.form.setFieldsValue({
id:id,
eduintits:item.name,
description:item.description,
});
// this.contentMdRef.current.setValue(mydescription);
this.setState({
id:id,
eduintits:item.name,
description:item.description,
index:index
})
if(myname!=undefined){
this.setState({
addonAfter:myname.length
})
}
}
setModeltrue=()=>{
this.setState({
Modalstype:true,
Modalstopval:"是否确认删除?",
ModalCancel:this.cancelmodel,
ModalSave:this.saveonOpen,
})
}
cancelmodel=()=>{
//取消
this.setState({
Modalstype:false,
Modalstopval:"是否确认删除?",
ModalCancel:"",
ModalSave:"",
})
}
saveonOpen=()=>{
//确认
// /
// 删除公告
var id=this.props.match.params.coursesId
const url =`/courses/${id}/delete_informs.json`;
axios.delete(url, { data: {
inform_id: this.props.id
}})
.then((response) => {
if(response){
if(response.data){
if(response.data.status===0){
this.setState({
Modalstype:false,
Modalstopval:"是否确认删除?",
ModalCancel:"",
ModalSave:"",
})
this.props.showNotification(`删除成功`);
this.props.getinputdata();
}else{
this.props.showNotification(`删除失败`);
}
}else{
this.props.showNotification(`删除失败`);
}
}
})
.catch(function (error) {
console.log(error);
this.props.showNotification(`删除失败`);
});
}
bianji = (bians,i)=>{
console.log("bianji");
console.log(this.props.myname);
console.log(this.props.mydescription);
this.setState({
whethertoeditysl:bians,
eduintits:this.props.myname,
description:this.props.mydescription,
index:i
});
this.props.form.setFieldsValue({
eduintits:this.props.myname,
description:this.props.mydescription,
});
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) => {
debugger
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.props.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);
}
});
}
//上移
Moveupward = (id) => {
let url = `/courses/${this.props.match.params.coursesId}/inform_up.json`;
axios.post(url, {
inform_id: id
}).then((response) => {
if (response) {
if (response.data) {
if (response.data.status === 0) {
this.props.showNotification(`上移成功`);
this.props.getinputdata();
} else {
this.props.showNotification(`上移失败`);
}
} else {
this.props.showNotification(`上移失败`);
}
} else {
this.props.showNotification(`上移失败`);
}
}).catch((error) => {
console.log(error)
});
}
//下移
Movedown = (id) => {
let url = `/courses/${this.props.match.params.coursesId}/inform_down.json`;
axios.post(url, {
inform_id: id
}).then((response) => {
if (response) {
if (response.data) {
if (response.data.status === 0) {
this.props.showNotification(`下移成功`);
this.props.getinputdata();
} else {
this.props.showNotification(`下移失败`);
}
} else {
this.props.showNotification(`下移失败`);
}
} else {
this.props.showNotification(`下移失败`);
}
}).catch((error) => {
console.log(error)
});
}
render(){
let{description,whethertoeditysl,addonAfter,eduintits,informs,isSpinysl,index} =this.state;
let{myname,mydescription,id}=this.props;
const {getFieldDecorator} = this.props.form;
// console.log("Bullsubdirectory");
// console.log(this.props.isAdmin());
// console.log(this.props);
// console.log(whethertoeditysl);
// console.log(this.state.eduintits);
// console.log(this.state.description);
return(
<React.Fragment key={this.props.index} id={this.props.id}>
<div key={this.props.index} id={this.props.id}>
{this.state.Modalstype&&this.state.Modalstype===true?<Modals
modalsType={this.state.Modalstype}
modalsTopval={this.state.Modalstopval}
modalCancel={this.state.ModalCancel}
modalSave={this.state.ModalSave}
/>:""}
<Spin size="large" spinning={isSpinysl} >
<div className="edu-back-white " id={
index
}>
{
whethertoeditysl === false?
<div id={this.props.index}>
<div className="fudonyingxiangysls">
<div className="fudonyingxiangysl">
<div style={{marginRight:"60px"}}>
<span className="ysltitbt">{myname}</span>
</div>
<div>
<span className="fr yslbianji" style={{marginRight:"17px"}}>
{
this.props.isAdmin() === true ?
(this.props.yslbool===false?
<Tooltip placement="bottom" title={<div>
编辑
</div>}>
<i className="iconfont icon-bianji1 newbianji1" onClick={()=>this.bianji(true,this.props.index)}></i>
</Tooltip>
:
""
)
:""
}
</span>
<span className="fr yslbianji" style={{marginRight:"22px"}}>
{
this.props.isAdmin() === true ?
(this.props.yslbool===false?
<Tooltip placement="bottom" title={<div>
删除
</div>}>
<i className="iconfont icon-shanchu newbianji1" style={{ color: "#4CACFF"}} onClick={()=>this.setModeltrue(true)}></i>
</Tooltip>
:
""
)
:""
}
</span>
{
this.props.length - 1 === this.props.index ? "" :
this.props.isAdmin() === true ?
(this.props.yslbool === false ?
<a className="fr yslbianji mr30"
style={{
lineHeight: "31px",
}}
onClick={() => this.Movedown(this.props.id)}
><Tooltip
title="下移"><i
style={{color: "#4CACFF"}}
className=" font-18 iconfont icon-xiangxiayi"></i></Tooltip></a>
:
""
)
: ""
}
{
this.props.index === 0 ? "" :
this.props.isAdmin() === true ?
(this.props.yslbool === false ?
<a className="fr yslbianji mr30"
style={{
lineHeight: "31px",
}}
onClick={() => this.Moveupward(this.props.id)}
><Tooltip
title="上移"><i
style={{color: "#4CACFF"}}
className=" font-18 iconfont icon-xiangshangyi"></i></Tooltip></a>
:
""
)
: ""
}
</div>
<div className="yslclear"></div>
</div>
<div id="MakedownHTML"className="markdown-body fonttext yslmtopcg yslminHeigth markdownysltext" dangerouslySetInnerHTML={{__html: markdownToHTML(mydescription).replace(/▁/g, "▁▁▁")}}/>
</div>
{parseInt(this.props&&this.props.informs.length)===parseInt(this.props&&this.props.index+1)?"":<div className="bor-bottom-greyE mr25 ml25"></div>}
</div>
:
whethertoeditysl === true?
<div className="edu-back-white " key={this.props.index} id={this.props.id}>
<Form layout='vertical' onSubmit={this.handleSubmit} key={this.props.index}>
<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 "
key={this.props.index}
>
{getFieldDecorator('eduintits', { initialValue: 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个字符" key={this.props.index} 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 " key={this.props.index}>
<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 "
key={this.props.index}
>
{getFieldDecorator('description', { initialValue: description},{
rules: [{
required: true, message: '请在此输入内容,最多5000个字符',
}, {
len: 5000, message: '最大限制为5000个字符',
}],
})(
<TPMMDEditor ref={this.messageRef}
key={this.props.index}
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,this.props.index)}>取消</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;