import React,{ Component } from "react";
import { Link } from "react-router-dom";
import axios from 'axios';
import {Checkbox,Modal,Input,Tooltip,notification,Popover} from 'antd';
import { DragDropContext,Draggable, Droppable} from 'react-beautiful-dnd';
import Modals from '../../modals/Modals';
import { on, off, trigger } from 'educoder';
import './MainLeftNav.css';
const CheckboxGroup = Checkbox.Group;
let navidtype=true;
//a little function to help us with reordering the result
const reorder = (list, startIndex, endIndex) => {
// console.log(list)
// console.log(startIndex)
// console.log(endIndex)
let newlist=list;
const result = Array.from(newlist);
const [removed] = result.splice(startIndex, 1);
result.splice(endIndex, 0, removed);
return result;
};
// const getItemStyle = (isDragging, draggableStyle) => ({
// // change background colour if dragging
// background: isDragging?'#f1f1f1': '',
// // styles we need to apply on draggables
// ...draggableStyle,
// });
class Coursesleftnav extends Component{
constructor(props){
super(props);
this.state = {
index:1,
addGroup:true,
navid:undefined,
sandiantype:undefined,
twosandiantype:undefined,
addCheckboxGroup:[],
Navmodalname:"",
Navmodalnametype:false,
Navmodaltypename:"",
setnavid:"",
NavmodalValue:"",
ModalsType:false,
Modalstopval:"",
loadtype:false,
selectnavid:false,
newselectnavid:undefined,
positiontype:undefined,
toopvisible:false,
toopvisibleindex:undefined,
sandiantypes:undefined
}
}
// updataleftNav=()=>{
// debugger
// let id=this.props.match.params.coursesId;
// let url ="/courses/"+id+"/left_banner.json"
// axios.get(url).then((response) => {
// if(response!=undefined){
// if(response.data&&response.data){
// this.setState({
// course_modules:response.data.course_modules,
// hidden_modules:response.data.hidden_modules,
// is_teacher:response.data.is_teacher,
// })
// this.locationNav(response.data.course_modules)
// }
// }
//
// })
// }
// locationNav=(list)=>{
// let filesId=this.props.match.params.Id;
// let url=this.props.location.pathname;
// var lists=list;
//
//
// lists.forEach((item,index)=>{
// if(item.second_category!=undefined&&item.second_category.length!=0){
// item.second_category.forEach((iem,key)=>{
// if( parseInt(filesId)===iem.category_id||parseInt(filesId)===item.id){
// this.setState({
// indexs:index,
// url:url
// })
// }
// })
// }
//
// if(this.props.match.url===item.category_url){
// this.props.coursesidsfun(item.id)
// }
// })
//
// }
// setcoursesidsfun=()=>{
// // let {course_modules} =this.props;
// // let lists=course_modules;
// // let url=this.props.location.pathname;
// // lists.forEach((item,index)=>{
// // if(item.second_category!=undefined&&item.second_category.length!=0){
// // item.second_category.forEach((iem,key)=>{
// // if(url===iem.second_category_url){
// // this.props.coursesidsfun(item.id,"child")
// // }
// // })
// // }
// //
// // if(url===item.category_url){
// // this.props.coursesidsfun(item.id,"node")
// // }
// // })
// // this.props.updataleftNavfun()
// }
componentWillUnmount() {
off('boardAdd', this.boardAddListener)
off('boardRename', this.boardRenameListener)
off('groupAdd', this.groupAddListener)
off('groupRename', this.groupRenameListener)
off('attachmentAddlog',this.attachmentAddlog)
off('flieseditDir',this.flieseditDir)
off('shixun_homeworkadd',this.addshixunchild)
off('editshixunname',this.editshixunchild)
off('editshixunmainname',this.editshixunmainname)
}
addshixunchild=(e, data)=>{
this.Navmodalnames(e,1,"shixun_homework",data)
}
editshixunchild=(e, data)=>{
this.Navmodalnames(e,4,"editSecondname",data.id,data.name)
}
editshixunmainname=(e, data)=>{
this.Navmodalnames(e,3,"editname",data.id,data.name)
}
boardAddListener = (e, data) => {
this.Navmodalnames(e,6,"board", data)
}
boardRenameListener = (e, data) => {
this.Navmodalnames(e,7,"editSecondname", data.category_id, data.category_name)
}
groupAddListener = (e, data) => {
this.Navmodalnames(e,2,"course_group", data)
}
groupRenameListener = (e, data) => {
this.Navmodalnames(e,5,"editSecondname", data.id, data.name)
}
attachmentAddlog=(e,data)=>{
this.Navmodalnames(e,1,"attachment",data)
}
flieseditDir=(e, data)=>{
this.Navmodalnames(e,4,"editSecondname",data.id,data.name)
}
componentDidMount() {
this.setState({
url:this.props.match.url
})
on('boardAdd', this.boardAddListener)
on('boardRename', this.boardRenameListener)
on('groupAdd', this.groupAddListener)
on('groupRename', this.groupRenameListener)
on('attachmentAddlog', this.attachmentAddlog)
on('flieseditDir', this.flieseditDir)
on('shixun_homeworkadd',this.addshixunchild)
on('editshixunname',this.editshixunchild)
on('editshixunmainname',this.editshixunmainname)
this.props.updataleftNavfun();
// this.props.getleftNavid && this.props.getleftNavid("shixun_homework");
// const position =parseInt(this.props.match.params.position);
let courstype=this.props.match.url;
courstype = courstype.split('/');
courstype=courstype[3];
// console.log(courstype)
const query =this.props.location.search;
// const type = query.split('?type=');
let category_id;
if(courstype==="board"){
category_id=parseInt(this.props.match.params.boardId);
}else{
category_id=parseInt(this.props.match.params.category_id);
}
// console.log(category_id)
if(query===""){
this.setState({
navid:0,
positiontype:courstype,
selectnavid:false,
newselectnavid:parseInt(category_id),
})
}else{
if(isNaN(category_id)){
this.setState({
positiontype:courstype,
newselectnavid:parseInt(category_id),
selectnavid:false,
})
}else{
this.setState({
positiontype:courstype,
newselectnavid:parseInt(category_id),
selectnavid:false,
})
}
}
if(navidtype===false){
navidtype=true
}
this.props.updataleftNavfun()
}
setnavid=(e,key,id,type,url)=>{
// this.props.getleftNavid && this.props.getleftNavid(key,type);
let {selectnavid,navid}=this.state;
if(navidtype===true&&selectnavid===false){
if(navid===key){
this.setState({
navid:"",
selectnavid:false,
newselectnavid:id
})
}else{
this.setState({
navid:key,
positiontype:type,
selectnavid:false,
newselectnavid:id
})
}
}else{
// console.log(navidtype)
// console.log(selectnavid)
this.setState({
navid:"",
selectnavid:false,
newselectnavid:id
})
}
this.props.updataleftNavfun();
this.props.history.replace( url );
e.stopPropagation();//阻止冒泡
}
selectnavid=(e,key,id,type,urls,index)=>{
debugger
let {url}=this.state;
if(urls!=url){
this.props.history.replace(urls);
this.props.updataleftNavfun();
}else{
if (key === this.props.indexs) {
this.props.unlocationNavfun(undefined)
} else {
this.props.unlocationNavfun(key)
}
}
this.setState({
selectnavid:true,
newselectnavid:id,
url:urls,
indexs:index
})
// this.props.history.replace(urls);
e.stopPropagation();//阻止冒泡
}
selectnavids=(e,key,id,type,urls,index)=>{
this.setState({
selectnavid:true,
newselectnavid:id,
url:urls,
indexs:index
})
this.props.history.replace(urls);
this.props.updataleftNavfun();
}
twosandianshow=(e,key,type)=>{
this.setState({
twosandiantype:key,
toopvisible:false,
toopvisibleindex:undefined,
twosandiantypes:type
})
e.stopPropagation();//阻止冒泡
}
twosandianhide=(e,index,type)=>{
// console.log(index)
this.setState({
twosandiantype:undefined,
twosandiantypenum:undefined,
toopvisible:true,
toopvisibleindex:index,
twosandiantypes:type
})
e.stopPropagation();//阻止冒泡
}
//置顶
editSetup=(e,id)=>{
e.stopPropagation();//阻止冒泡
navidtype=false
this.setState({
navid:undefined,
sandiantype:undefined,
twosandiantype:undefined,
})
let url="/course_modules/"+id+"/sticky_module.json"
axios.get(url).then((result)=>{
navidtype=true
this.props.updataleftNavfun();
}).catch((error)=>{
navidtype=true
})
}
//隐藏
edithiddens=(id)=>{
navidtype=false
this.setState({
navid:undefined,
sandiantype:undefined,
twosandiantype:undefined,
})
let url="/course_modules/"+id+"/hidden_module.json"
axios.get(url).then((result)=>{
navidtype=true
this.props.updataleftNavfun();
console.log(this.props)
let list=this.props.course_modules;
for(var i=0; i<list.length;i++){
if(list[i].id!=id){
this.props.history.push(list[i].category_url)
return
}
}
}).catch((error)=>{
navidtype=true
})
}
edithidden=(e,id)=>{
e.stopPropagation();//阻止冒泡
this.setState({
ModalsType:true,
Modalstopval:"隐藏后将不再显示此模块，",
ModalsBottomval:"后续可通过添加模块恢复显示",
ModalSave:()=>this.edithiddens(id),
})
}
Navmodalnames=(e,id,type,setnavid,name)=>{
e.stopPropagation();//阻止冒泡
navidtype=false
if(id===1||id===2||id===6){
this.setState({
Navmodalname:id===2?"新建分班":"添加目录",
Navtitles:id===2?"分班名称":"目录名称",
Navplaceholder:id===2?"示例：分班（最佳4个字符）":"示例：第一阶段（最佳4个字符）",
Navmodalnametype:true,
Navmodaltypename:id,
setnavid:setnavid,
NavmodalValue:""
})
}else if(id===3||id===4||id===5||id===7){
this.setState({
Navmodalname:id===5?"分班重命名":"目录重命名",
Navtitles:id===5?"分班名称":"目录名称",
Navplaceholder:id===5?"示例：分班（最佳4个字符）":"示例：第一阶段（最佳4个字符）",
Navmodalnametype:true,
Navmodaltypename:id,
setnavid:setnavid,
NavmodalValue:name
})
}
}
cannerNavmoda=()=>{
this.setState({
Navmodalnametype:false,
NavmodalValuetype:false,
ModalsType:false
})
navidtype=true
}
setNavmodalValue=(e)=>{
this.setState({
NavmodalValue:e.target.value
})
}
updasaveNavmoda=(message)=>{
this.props.updataleftNavfun();
// this.setState({
// ModalsType:true,
// Modalstopval:message,
// loadtype:true,
// NavmodalValue:""
// })
navidtype=true
}
saveNavmodapost=(url,value)=>{
axios.post(url,
{name:value}).then((result)=>{
if(result.data.status===0){
// window.location.reload()
this.updasaveNavmoda()
//
notification.open({
message:"提示",
description:result.data.message
});
trigger('updateNavSuccess')
}
}).catch((error)=>{
console.log(error)
})
}
saveboardpost=(url,value)=>{
axios.put(url,
{name:value}).then((result)=>{
if(result.data.status===0){
// window.location.reload()
this.updasaveNavmoda()
trigger('updateNavSuccess')
//
notification.open({
message:"提示",
description:result.data.message
});
}
}).catch((error)=>{
console.log(error)
})
}
saveNavmoda=()=>{
let {Navmodaltypename,setnavid,NavmodalValue}=this.state;
let id =setnavid;
if(NavmodalValue===""){
this.setState({
NavmodalValuetype:true,
NavmodalValues:"名称不能为空"
})
return
}else if(NavmodalValue.length>20){
this.setState({
NavmodalValuetype:true,
NavmodalValues:"名称不能超过20个字"
})
return
}
if(Navmodaltypename===1){
let url="/course_modules/"+id+"/add_second_category.json"
this.saveNavmodapost(url,NavmodalValue)
} else if(Navmodaltypename===2){
let newid=this.props.match.params.coursesId;
let url="/courses/"+newid+"/course_groups.json";
this.saveNavmodapost(url,NavmodalValue)
}else if(Navmodaltypename===3){
let url="/course_modules/"+id+"/rename_module.json"
this.saveNavmodapost(url,NavmodalValue)
}else if(Navmodaltypename===4){
let url="/course_second_categories/"+id+"/rename_category.json";
this.saveNavmodapost(url,NavmodalValue)
}else if(Navmodaltypename===5){
let url="/course_groups/"+id+"/rename_group.json";
this.saveNavmodapost(url,NavmodalValue)
}else if(Navmodaltypename===6) {
let newid=this.props.match.params.coursesId;
let url = "/courses/"+newid+"/boards.json";
this.saveNavmodapost(url,NavmodalValue)
}else if(Navmodaltypename===7) {
let url = "/boards/"+id+".json";
this.saveboardpost(url,NavmodalValue)
}
this.setState({
Navmodalnametype:false
})
}
updatadeleteSecondary=(url)=>{
this.props.updataleftNavfun();
// this.setState({
// ModalsType:true,
// Modalstopval:"删除成功",
// loadtype:true,
// })
// notification.open({
// message: "删除成功",
// });
window.location.href = url;
}
deletenavchilds=(url)=>{
axios.delete(url).then((result)=>{
if(result.data.status===0){
this.updatadeleteSecondary(result.data.right_url)
}
}).catch((error)=>{
console.log(error)
})
}
deleteSecondary=(e,type,id)=>{
e.stopPropagation();//阻止冒泡
if(type===1){
let url="/course_second_categories/"+id+".json"
this.setState({
ModalsType:true,
Modalstopval:"该目录下的内容将被移动到父目录,",
ModalsBottomval:"是否确认删除?",
ModalSave:()=>this.deletenavchilds(url),
})
}else if(type===2){
let url="/course_groups/"+id+".json"
this.setState({
ModalsType:true,
Modalstopval:"该分班的学生将被移动到“未分班”,",
ModalsBottomval:"是否确认删除?",
ModalSave:()=>this.deletenavchilds(url),
})
}else if(type===3){
let url="/boards/"+id+".json"
this.setState({
ModalsType:true,
Modalstopval:"该目录下的内容将被移动到父目录,",
ModalsBottomval:"是否确认删除?",
ModalSave:()=>this.deletenavchilds(url),
})
}
}
droppablepost=(url,list)=>{
axios.post(url,{position: list}).then((result)=>{
// this.updasaveNavmoda(result.data.message)
this.updasaveNavmoda()
//
notification.open({
message:"提示",
description:result.data.message
});
}).catch((error)=>{
console.log(error)
})
}
onDragEnd=(result)=>{
// console.log(result)
// let {course_modules}=this.props;
// let newcourse_modules=course_modules;
// let newid=this.props.match.params.coursesId;
// let list=[];
// let positionlist=[];
// for(var i=0; i<newcourse_modules.length;i++){
// if(newcourse_modules[i].type===result.source.droppableId){
// list=newcourse_modules[i].second_category
// }
// }
// const newlist = reorder(
// list,
// result.source.index,
// result.destination.index
// );
//
// for(var z=0; z<newlist.length; z++){
// positionlist.push(newlist[z].position)
// }
//
// for(var i=0; i<newcourse_modules.length;i++){
// if(newcourse_modules[i].type===result.source.droppableId){
// newcourse_modules[i].second_category=newlist
// }
// }
//
// this.setState({
// course_modules:newcourse_modules
// })
if(result.source.droppableId==="shixun_homework"||result.source.droppableId==="graduation"||result.source.droppableId==="attachment"){
let url ="/course_second_categories/"+result.draggableId+"/move_category.json"
this.droppablepost(url,result.destination.index+1)
}else if(result.source.droppableId==="board"){
let url ="/boards/"+result.draggableId+"/move_category.json"
this.droppablepost(url,result.destination.index+1)
}else if(result.source.droppableId==="course_group"){
let url ="/course_groups/"+result.draggableId+"/move_category.json"
this.droppablepost(url,result.destination.index)
}
}
hidesandian=(e,key)=>{
this.setState({
sandiantypes:undefined
})
e.stopPropagation();//阻止冒泡
}
showsandian=(e,key)=>{
this.setState({
sandiantypes:key
})
e.stopPropagation();//阻止冒泡
}
showsandians=(e,key,urls,num)=> {
debugger
let {url}=this.state;
if (key === this.props.indexs) {
this.props.unlocationNavfun(undefined)
} else {
this.props.unlocationNavfun(key)
}
if(urls!=url){
this.props.history.replace(urls);
}
}
maincontent=(item,key)=>{
return ( <div className={"sandianbox"}>
{/*作业*/}
{item.type==="shixun_homework"?<div onClick={e=>this.Navmodalnames(e,1,"shixun_homework",item.id)}>添加目录</div>:""}
{/*资源*/}
{item.type==="attachment"?<div onClick={e=>this.Navmodalnames(e,1,"attachment",item.id)}>添加目录</div>:""}
{/*毕业设计*/}
{/*{item.type==="graduation"?<div onClick={()=>this.Navmodalnames(1,"attachment",item.id)}>添加目录</div>:""}*/}
{/*讨论区*/}
{item.type==="board"?<div onClick={e=>this.Navmodalnames(e,6,"board",item.main_id)}>添加目录</div>:""}
{/*分班*/}
{item.type==="course_group"?<div onClick={e=>this.Navmodalnames(e,2,"course_group",item.id)}>添加分班</div>:""}
{/*分班*/}
{item.type==="course_group"?<div onClick={e=>this.Navmodalnames(e,5,"editname",item.id,item.name)}>重命名</div>: <div onClick={e=>this.Navmodalnames(e,3,"editname",item.id,item.name)}>重命名</div>}
<div onClick={e=>this.edithidden(e,item.id)}>隐藏</div>
<div onClick={e=>this.editSetup(e,item.id)}>置顶</div>
</div>)
}
content=(item,iem,index)=>{
let {twosandiantypes,twosandiantypenum}=this.state;
return (item.type==="graduation"?"": <div className={item.type===twosandiantypes&&twosandiantypenum===index?"sandianboxs":"sandianboxs"} >
{/*作业/资源*/}
{item.type==="shixun_homework"||item.type==="attachment"||item.type==="graduation"?<div onClick={e=>this.Navmodalnames(e,4,"editSecondname",iem.category_id,iem.category_name)}>重命名</div>:""}
{item.type==="shixun_homework"||item.type==="attachment"?<div onClick={e=>this.deleteSecondary(e,1,iem.category_id)}>删除</div>:""}
{/*分班*/}
{item.type==="course_group"?<div onClick={e=>this.Navmodalnames(e,5,"editSecondname",iem.category_id,iem.category_name)}>重命名</div>:""}
{item.type==="course_group"?<div onClick={e=>this.deleteSecondary(e,2,iem.category_id)}>删除</div>:""}
{/*讨论区*/}
{item.type==="board"?<div onClick={e=>this.Navmodalnames(e,7,"editSecondname",iem.category_id,iem.category_name)}>重命名</div>:""}
{item.type==="board"?<div onClick={e=>this.deleteSecondary(e,3,iem.category_id)}>删除</div>:""}
</div>)
}
render(){
let {
twosandiantype,
Navmodalname,
Navmodalnametype,
NavmodalValue,
ModalsType,
Modalstopval,
ModalsBottomval,
ModalSave,
loadtype,
twosandiantypes,
}=this.state;
let {course_modules,hidden_modules,is_teacher} =this.props;
// console.log(this.props.location.pathname)
// // console.log(item.category_url)
// console.log(this.props.location.pathname)
return(
<ul className="mb10 newedu-class-leftnav">
<Modals
modalsType={ModalsType}
modalsTopval={Modalstopval}
modalsBottomval={ModalsBottomval}
modalSave={ModalSave}
modalCancel={this.cannerNavmoda}
loadtype={loadtype}
>
</Modals>
{
Navmodalnametype===true?<style>
{
`
body {
overflow: hidden !important;
}
`
}
</style>:""
}
<Modal
keyboard={false}
title={Navmodalname}
visible={Navmodalnametype}
className={"Navmodal"}
closable={false}
footer={null}
destroyOnClose={true}
centered={true}
>
<div className="df">
<div className={"fl mt5"}>{this.state.Navtitles}：</div>
<Input placeholder={this.state.Navplaceholder}
className={"input-flex-35 greyInput fl"}
maxLength="60"
value={NavmodalValue}
onInput={this.setNavmodalValue}
/>
</div>
{this.state.NavmodalValuetype===true?<span className={"color-red"}>
{this.state.NavmodalValues}
</span>:""}
<div className={this.state.NavmodalValuetype===true?"clearfix mt20 edu-txt-center":"clearfix mt50 edu-txt-center"}>
<a className="task-btn mr30" onClick={this.cannerNavmoda}>取消</a>
<a className="task-btn task-btn-orange" onClick={this.saveNavmoda}>确定</a>
</div>
</Modal>
<style>
{`
// .activity-left-name{
// width: 100%;
// }
.droppableul{
max-height: 500px;
overflow-y:auto;
overflow:hidden auto;
}
.mr13{
margin-right:13px;
}
`}
</style>
{ is_teacher===true?
course_modules===undefined?"":course_modules.map((item,key)=>{
return(
<div key={key} >
<a>
<li onClick={(e)=>this.showsandians(e,key,item.category_url,1)} className={this.props.mainurl===item.category_url&&key===this.props.indexs?"liactive":"clearfix active"} onMouseLeave={(e)=>this.hidesandian(e,key)} onMouseEnter={(e)=>this.showsandian(e,key)}>
<a onClick={(e)=>this.showsandians(e,key,item.category_url,1)} className={ item.second_category===undefined?"fl ml20 pd0":item.second_category.length===0?"fl ml20 pd0":this.state.sandiantypes===key?"fl ml20 pd0 ebebeb":"fl ml20 pd0"}>
{
item.type==="shixun_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-daima mr10 fl":"iconfont icon-daima mr10 fl"}></i>:
item.type==="common_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-putongzuoye mr10 fl":"iconfont icon-putongzuoye mr10 fl"}></i>:
item.type==="group_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-fenzuzuoye mr10 fl":"iconfont icon-fenzuzuoye mr10 fl"}></i>:
item.type==="graduation"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-biyezhuanhuan mr10 fl":"iconfont icon-biyezhuanhuan mr10 fl"}></i>:
item.type==="exercise"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-shijuan mr10 fl":"iconfont icon-shijuan mr10 fl"}></i>:
item.type==="poll"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-wenjuan mr10 fl":"iconfont icon-wenjuan mr10 fl"}></i>:
item.type==="attachment"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-ziyuan mr10 fl":"iconfont icon-ziyuan mr10 fl"} ></i>:
item.type==="board"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-taolun mr10 fl":"iconfont icon-taolun mr10 fl"} ></i>:
item.type==="course_group"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-fenban mr10 fl":"iconfont icon-fenban mr10 fl"} ></i>:""
}
{/*||this.props.location.pathname===this.state.url&&key===this.state.indexs*/}
<span className={this.props.location.pathname===item.category_url?"color-blue task-hide activity-left-name":"task-hide activity-left-name"}
title={item.name.length<6?"":item.name}
onClick={(e)=>this.selectnavid(e,key,item.id,item.type,item.category_url)}
>{item.name}</span>
{/*className={sandiantype===undefined?item.task_count===0?"fr mr10 colortransparent":"fr mr10 color999 font-14":sandiantype===key?"none":item.task_count===0?"none":"fr mr10 color999 font-14"}*/}
<span className={this.state.sandiantypes===key?"none":this.props.location.pathname===item.category_url?"color-blue fr mr25 font-14":"fr mr25 color999 font-14"} >{item.task_count===0?"":item.task_count}</span>
{/*<i className={this.state.sandiantypes===key?"iconfont icon-sandian mr5 fr color999":"none"} onMouseEnter={(e)=>this.sandianshow(e,key)}></i> */}
{this.state.sandiantypes===key?<Popover placement="right" content={this.maincontent(item,key)} trigger="hover" key={key}>
<i className={"iconfont icon-sandian mr20 fr color999"}></i>
</Popover>:""}
</a>
</li>
{/*下拉列表*/}
{/* 可拖拽选择实训列表*/}
{/*className={this.props.location.pathname===item.category_url||this.props.location.pathname===this.state.url&&key===this.state.indexs?"TabsWarps":"TabsWarps"}*/}
{
<DragDropContext onDragEnd={this.onDragEnd} >
<Droppable droppableId={item.type}>
{(provided, snapshot) => (
<ul
ref={provided.innerRef}
{...provided.droppableProps}
className={"droppableul"}
style={{display: this.props.mainurl===item.category_url&&key===this.props.indexs?"":"none"}}
>
{item.second_category===undefined?"":item.second_category.map((iem,index)=>{
if(item.type==="course_group"){
if(iem.category_name==="未分班"){
if(iem.category_count===0){
return
}
}
}
return(
<Draggable
key={'id'+index}
draggableId={iem.category_id===0?index+1:iem.category_id}
index={index}
className={"TabsWarps"}
>
{(provided, snapshot) => (
<Tooltip placement="bottom" title={"拖拽二级菜单调整顺序"}
// visible={toopvisible===true&&toopvisibleindex===iem.category_id?true:false}
visible={false}
>
{/*"/courses/"+this.props.match.params.coursesId+"/"+item.type+"/"+iem.category_type+"/"+iem.category_id*/}
<a className={"Draggablelichild"}>
<li className="clearfix width93 Draggableli" key={index} onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} onMouseLeave={(e)=>this.twosandianhide(e,index,item.type)} onMouseEnter={(e)=>this.twosandianshow(e,index,item.type)}
key={index}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
<a className="fl pl46 pd0 Draggablelichild">
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth155 task-hide Draggablelichild":"fl ml38 maxwidth155 task-hide Draggablelichild"}>{iem.category_name}</span>
<span className={twosandiantype===undefined?this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue Draggablelichild font-14":"fr mr20 color999 Draggablelichild font-14":item.type===twosandiantypes&&twosandiantype===index?"none":this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue Draggablelichild font-14":"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
{item.type===twosandiantypes&&twosandiantype===index?
iem.category_type==="graduation_topics"||iem.category_type==="graduation_tasks"?
<span className={"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
:<Popover placement="right" content={this.content(item,iem,index)} trigger="hover" key={index}>
<i className={"iconfont icon-sandian fr color999 mr15 Draggablelichild"}></i>
</Popover>:""}
</a>
{provided.placeholder}
</li>
</a>
</Tooltip>
)}
</Draggable>
)})}
</ul>
)}
</Droppable>
</DragDropContext>
}
</a>
</div>
)
})
: course_modules===undefined?"":course_modules.map((item,key)=>{
return(
<div key={key}>
{/*<Tooltip placement="bottom" title={"点击空白处展开二级菜单，点击模块名字跳转到对应模块"}>*/}
<a >
<li className={this.props.mainurl===item.category_url&&key===this.props.indexs?"liactive":"clearfix active"}
onClick={(e)=>this.setnavid(e,key,item.id,item.type,item.category_url)} onMouseEnter={(e)=>this.showsandian(e,key)}
>
<a className={ item.second_category===undefined?"fl ml20 pd0":item.second_category.length===0?"fl ml20 pd0":this.state.sandiantypes===key?"fl ml20 pd0 ebebeb":"fl ml20 pd0"}>
{
item.type==="shixun_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-daima mr10 fl":"iconfont icon-daima mr10 fl"}></i>:
item.type==="common_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-putongzuoye mr10 fl":"iconfont icon-putongzuoye mr10 fl"}></i>:
item.type==="group_homework"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-fenzuzuoye mr10 fl":"iconfont icon-fenzuzuoye mr10 fl"}></i>:
item.type==="graduation"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-biyezhuanhuan mr10 fl":"iconfont icon-biyezhuanhuan mr10 fl"}></i>:
item.type==="exercise"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-shijuan mr10 fl":"iconfont icon-shijuan mr10 fl"}></i>:
item.type==="poll"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-wenjuan mr10 fl":"iconfont icon-wenjuan mr10 fl"}></i>:
item.type==="attachment"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-ziyuan mr10 fl":"iconfont icon-ziyuan mr10 fl"} ></i>:
item.type==="board"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-taolun mr10 fl":"iconfont icon-taolun mr10 fl"} ></i>:
item.type==="course_group"?<i className={this.props.location.pathname===item.category_url?"color-blue iconfont icon-fenban mr10 fl":"iconfont icon-fenban mr10 fl"} ></i>:""
}
<span className={this.props.location.pathname===item.category_url?"color-blue task-hide activity-left-name":"task-hide activity-left-name"} onClick={(e)=>this.selectnavid(e,key,item.id,item.type,item.category_url)}>{item.name}</span>
<span className={this.props.location.pathname===item.category_url?"color-blue fr mr20 font-14":"fr mr20 color999 font-14"}>{item.task_count===0?"":item.task_count}</span>
</a>
</li>
</a>
{/*</Tooltip>*/}
{/*下拉列表*/}
{/* className={this.props.location.pathname===item.category_url||this.props.location.pathname===this.state.url&&key===this.state.indexs?"":""}*/}
<ul style={{display:this.props.mainurl===item.category_url&&key===this.props.indexs?"":"none"}} class="droppableul">
{
item.second_category===undefined?"":item.second_category.map((iem,index)=>{
if(item.type==="course_group"){
if(iem.category_name==="未分班"){
if(iem.category_count===0){
return
}
}
}
return(
<a >
<li className="clearfix Draggableli" key={index} style={{ width: '244px'}}>
<a className="fl pl46 pd0 Draggablelichild" onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} >
{/*<span className="fl ml38 maxwidth155 task-hide">{iem.category_name}</span>*/}
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth155 task-hide Draggablelichild":"fl ml38 maxwidth155 task-hide Draggablelichild"}>{iem.category_name}</span>
<span className={twosandiantype===undefined?this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue font-14":"fr mr20 color999 font-14":twosandiantype===index&&item.type!="graduation"?"none":this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue font-14":"fr mr20 color999 font-14"}>{iem.category_count===0?"":iem.category_count}</span>
</a>
</li>
</a>
)
})
}
</ul>
</div>
)
})
}
</ul>
)
}
}
export default Coursesleftnav;
//
// sandianshow=(e,key)=>{
// this.setState({
// sandiantype:key
// })
// e.stopPropagation();//阻止冒泡
// }
// hidesandian=(e,key)=>{
// this.setState({
// sandiantypes:undefined
// })
// e.stopPropagation();//阻止冒泡
// }
// sandianshow=(e,key)=>{
// this.setState({
// sandiantype:key
// })
// e.stopPropagation();//阻止冒泡
// }
// sandianhide=(e)=>{
// this.setState({
// sandiantype:undefined,
//
// })
// e.stopPropagation();//阻止冒泡
// }
// twosandianshows=(e,key,type)=>{
//
// this.setState({
// twosandiantypenum:key,
// toopvisible:false,
// toopvisibleindex:undefined,
// twosandiantypes:type
// })
// e.stopPropagation();//阻止冒泡
// }
// twoMouseLeave=(e)=>{
// this.setState({
// toopvisible:false,
// })
// e.stopPropagation();//阻止冒泡
// }
{/*{ is_teacher===true?*/}
{/* <div className={hidden_modules.length===0?"none":""}>*/}
{/* <li className="clearfix addjia ebebeb">*/}
{/* <span className="addtaskmodle">*/}
{/* <i className={addGroup===true?"iconfont icon-jia mr5 ml110 fl martop1":"none"} onClick={this.addGroupmodel}></i>*/}
{/* <div className={addGroup===false?"ml100":"none"} onClick={this.addGroupmodelsave}>确定</div>*/}
{/* </span>*/}
{/* </li>*/}
{/* </div> :""}*/}
{/*{ is_teacher===true?<div className={addGroup===false?"CheckboxGroup":"none"}>*/}
{/* <CheckboxGroup style={{ width: '100%' }} value={addCheckboxGroup} onChange={this.addCheckboxGroupID}>*/}
{/* {hidden_modules.length===0?"":hidden_modules.map((list,key)=>{*/}
{/* return(*/}
{/* <li className="clearfix pl20" key={key}>*/}
{/* <Checkbox value={list.id} className="fl "></Checkbox>*/}
{/* <span className="task-hide activity-left-name ml3">{list.name}</span>*/}
{/* </li>*/}
{/* )*/}
{/* })}*/}
{/* </CheckboxGroup>*/}
{/* </div> :""}*/}