import React,{ Component } from "react";
import { Modal,Radio,Input,Tooltip, Menu, Dropdown, Icon,Breadcrumb } from "antd";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SendPanel from "./sendPanel.js";
import { getImageUrl } from 'educoder';
import axios from 'axios';
import Modals from '../../modals/Modals';
import OpenCourse from './OpenCourse';
import Jointheclass from '../../modals/Jointheclass'
import './DetailTop.css';

const Search = Input.Search;
const RadioGroup = Radio.Group;
class DetailTop extends Component{
  constructor(props){
    super(props)
    this.state={
      cardsModalcancel:this.cardsModalcancel,
      cardsModalsave:this.cardsModalsave,
      Modalstype:false,
      Modalstopval:"",
      Modalsbottomval:'',
      loadtype:false,
      deletepathtype:false,
      cardsModalsavetype:false,
			MenuItemskey:1,
			courseslist:[],
			Pathcourseid:undefined,
			OpenCourseTypes:false
    }
  }
	componentDidMount(){
		let courseslist=[]

		if(this.props.courses!=undefined&&this.props.courses.length!=0){
			this.props.courses.map((item,key)=>{
				if(this.props.pathtopskey===key+1){
					return(
						courseslist.push(item)
					)
				}
			})
		}
		this.setState({
			courseslist:courseslist
		})
	}

	componentDidUpdate=(prevProps)=> {
			if(prevProps.courses!=this.props.courses){
				let courseslist=[]

				if(this.props.courses!=undefined&&this.props.courses.length!=0){
					this.props.courses.map((item,key)=>{
						if(this.props.pathtopskey===key+1){
							return(
								courseslist.push(item)
							)
						}
					})
				}
				this.setState({
					courseslist:courseslist
				})
			}

	}

  allow_deletepath=()=>{
    this.setState({
      Modalstype:true,
      Modalstopval:"是否删除路径?",
      deletepathtype:true
    })
  }

  applyissuePath=()=>{
    this.setState({
      Modalstype:true,
      Modalstopval:"发布申请已提交，请等待管理员的审核",
      Modalsbottomval:"• 我们将在1-2个工作日内完成审核",
      loadtype:true
    })
  }

  cancelissuePath=()=>{
    let pathId=this.props.match.params.pathId;
    let url ="/paths/"+pathId+"/cancel_publish.json";
    axios.get(url).then((result)=>{
      if(result.status===200){
        if(result.data.status===0){

        }else if(result.data.status===1){
          window.location.href = "/paths/" + result.data.subject_id
        }
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  reovkissuePath=()=>{

    this.setState({
      Modalstype:true,
      Modalstopval:"是否确认撤销发布",
      Modalsbottomval:"确认后，回退到编辑状态",
      cardsModalsavetype:true,
    })

  }
  reovkissuePaths=()=>{
    let pathId=this.props.match.params.pathId;
    let url ="/paths/"+pathId+"/cancel_has_publish.json";
    axios.get(url).then((result)=>{
      if(result.status===200){
        if(result.data.status===0){

        }else if(result.data.status===1){
          this.setState({
            cardsModalsavetype:false,
            loadtype:false,
            deletepathtype:false
          })
          window.location.href = "/paths/" + result.data.subject_id
        }
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  cardsModalcancel=()=>{
     this.setState({
       Modalstype:false,
       Modalsbottomval:'',
       loadtype:false,
       deletepathtype:false
     })
  }

  cardsModalsave=()=>{
    let {loadtype,deletepathtype}=this.state;

    //删除路径
    if(deletepathtype===true){
      let pathid=this.props.match.params.pathId;
      const deleteUrl = `/paths/`+pathid+`.json`;
      axios.delete(deleteUrl).then((response) => {
        const status = response.data.status
        if (status === 1) {
          window.location.href = "/paths";
        }
      }).catch((error) => {
        console.log(error)
      })
    }

    //申请发布
    if(loadtype===true){

      let pathid=this.props.match.params.pathId;
      let url ="/paths/"+pathid+"/publish.json";
      axios.get(url).then((result)=>{
        if(result.status===200){
          if(result.data.status===0){
            this.setState({
              Modalstype:true,
              Modalstopval: result.data.message,
            })
          }else if(result.data.status===1){
            window.location.reload();
          }
        }
      }).catch((error)=>{
        console.log(error);
      })

    }
    this.setState({
      Modalstype:false,
      Modalsbottomval:''
    })
  }

	onVisibleChanges=(type)=>{
		this.setState({
			onVisibleChangestype:type
		})
	}

	MenuItems=(keys)=>{
	 let courseslist=[]
		this.props.courses.map((item,key)=>{
			if(keys===key+1){
				return(
					courseslist.push(item)
				)
			}
		})
   this.setState({
		 MenuItemskey:keys,
		 courseslist:courseslist,
		 onVisibleChangestype:!this.state.onVisibleChangestype
	 })
	}

	JoinnowCourse=(id,typeid)=>{

		if(this.props.checkIfLogin()===false){
			this.props.showLoginDialog()
			return
		}

		if(this.props.current_user&&this.props.current_user.profile_completed===false){
			this.props.showProfileCompleteDialog()
			return
		}


		this.setState({
			yslJointhe:true,
			Pathcourseid:id,
			pathcousestypeid:typeid
		})
	}
	ysljoinmodalCancel=()=>{
		this.setState({
			yslJointhe:false
		})
	};
	ysljoinmodalCanceltwo=(key)=>{
		this.setState({
			yslJointhe:false
		})
	 this.props.getdatasindex(key)
	};

	OpenCoursefun=()=>{
		this.setState({
			OpenCourseTypes:true
		})
	}
	OpenCourseCancel=()=>{
		this.setState({
			OpenCourseTypes:false
		})
	}
	render(){
    let{detailInfoList}=this.props;
    let{Modalstype,Modalstopval,cardsModalcancel,OpenCourseTypes,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };

		let menu = (
			<Menu>
				{this.props.courses===undefined||this.props.courses.length===0?"":this.props.courses.map((item,key)=>{
					return(
						<Menu.Item>
							<a rel="noopener noreferrer" onClick={()=>this.MenuItems(key+1)}>
								第{key+1}次开课
							</a>
						</Menu.Item>
						)
				})}
			</Menu>
		);



		return(

			<div className={this.props.courses===undefined||this.props.courses.length===0?"subhead":"subhead mb70"}>
        <Modals
          modalsType={Modalstype}
          modalsTopval={Modalstopval}
          modalsBottomval={Modalsbottomval}
          modalCancel={cardsModalcancel}
          modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
          loadtype={loadtype}
        >
        </Modals>
			{this.state.yslJointhe===true?<Jointheclass   {...this.props} {...this.state} ysljoinmodalCancel={()=>this.ysljoinmodalCancel()} ysljoinmodalCanceltwo={()=>this.ysljoinmodalCanceltwo(this.state.MenuItemskey)}></Jointheclass>:""}
			{this.state.OpenCourseTypes===true?<OpenCourse  {...this.props} {...this.state} OpenCourseCancel={()=>this.OpenCourseCancel()}/>:""}

        {
          detailInfoList &&
					<div  className={this.props.courses===undefined||this.props.courses.length===0?"subhead_content":"subhead_content pt100"}>
            <div className="font-28 color-white clearfix">
							{/*<Tooltip placement="bottom" title={detailInfoList.name.length>27?detailInfoList.name:""}>*/}

							{/*</Tooltip>*/}

							<style>
								{
									`
									.pathoranges{
    				  	     display: inline-block;
											width: 64px;
											background-color: #FF6800;
											background-size: 100% 100%;
											padding: 0px 4px;
											color: #fff;
											height: 28px;
											font-size: 14px;
											border-radius: 4px;
											position: relative;
											top: 5px;
											left: 15px;
									}
									.pathoranges div{
									    position: absolute;
    									top: -6px;
									}
									.xxtjbtn{

									    width: 103px;
											height: 38px;
											background: rgba(255,255,255,1);
											border-radius: 4px;
											border: 1px solid rgba(255,255,255,1);
											color: #970084 !important;
											font-size: 15px !important;
									    line-height: 36px !important;
									}
									.kkbths{
									width:103px;
									height:38px;
									border-radius:4px;
								  line-height: 36px !important;
									border:1px solid rgba(255,255,255,1);
									}
									.maxwinth600{
									  width:600px;
									}
									`
								}
							</style>

							<span className="fl lineh-40">
                 {detailInfoList.name}
                 {detailInfoList===undefined?"":detailInfoList.excellent === false ? "" :
									 <span className="pathoranges">
										 <div>开放课程</div>
									 </span>
                 }
               </span>

            </div>
            <div className="clearfix mt20">
              {
                detailInfoList && 
                <ul className="fl color-grey-eb pathInfo">
                  { detailInfoList.stages_count!=0 ? <li><span>章节</span><span className="ml5">{detailInfoList.stages_count}</span></li> : ""}
                  { detailInfoList.shixuns_count!=0 ? <li><span>实训</span><span className="ml5">{ detailInfoList.shixuns_count}</span></li> : ""}
                  { detailInfoList.challenge_choose_count!=0 ? <li><span>选择题任务</span><span>{detailInfoList.challenge_choose_count}</span></li> : ""}
                  { detailInfoList.challenges_count!=0 ? <li><span>实践任务</span><span>{detailInfoList.challenges_count}</span></li> : ""}
                  { detailInfoList.subject_score!=0 ? <li><span>经验值</span><span>{detailInfoList.subject_score}</span></li> : ""}
                  { detailInfoList.member_count!=0 ? <li><span>学习人数</span><span>{detailInfoList.member_count}</span></li> : ""}
                </ul>
              }
				    	<div className="fr pr maxwinth600">

								{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
									<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"}  className="user_default_btn fr font-18 xxtjbtn">
									学习统计
									</Link>:""
									}

								{ detailInfoList.allow_send === true?this.props.courses===undefined?
									<SendPanel {...this.props} {...this.state}></SendPanel>:"":""
								}

								{this.props.courses===undefined?"":detailInfoList.is_creator===true?<a className={"fr font-18 color-white kaike mr20 kkbths"} onClick={()=>this.OpenCoursefun()}>开课</a>:""}

								{
									detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
										<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.reovkissuePath}>撤销发布</a>:""
								}

								{
									detailInfoList.publish_status===1 && detailInfoList.allow_statistics===true?
										<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.cancelissuePath}>撤销申请</a>:""
								}

								{
									detailInfoList.publish_status===0&&detailInfoList.allow_add_member===true?
										<a className="fr font-18 color-white kaike mr20 kkbths" onClick={this.applyissuePath}>申请发布</a>:""
								}

								{detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
									className={"fr font-18 color-white kaike mr20 kkbths"}
									onClick={this.allow_deletepath}
								>删除</a>:""}

								{detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
									<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="fr font-18 color-white kaike mr20 kkbths" >
										编辑
									</Link>
									:""
								}
							</div>


            </div>

							{this.props.courses===undefined||this.props.courses.length===0?"":<div className="userNavs mt20">

							<li className={"fl pd4020"}>
								<style>
									{
										`
										.anticon-down{
											font-size:14px !important;
											transform:none !important;
										}
										.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover {
											background-color: rgba(240,240,240,1);
										}
										.alist{
											color:#000;
										}
									  .alist:hover{
											color:#000;
										}
										.aIcons{
										  color:#CDCDCD;
										}
										`
									}
								</style>


								{this.props.courses===undefined?"":this.state.courseslist.map((item,key)=>{
									if(item.course_identity<4){
										return(
											<Tooltip placement="bottom" title={"编辑课堂"} key={key}>
												<a href={`/courses/${item.course_id}/newgolds/settings`} target={"_blank"}>
													<i className="iconfont icon-bianji1 newbianji1"></i>
												</a>
											</Tooltip>
										)}})
								}


								<Dropdown
								  overlay={menu}
									onVisibleChange={this.onVisibleChanges}
								>
									<a className={"alist"}>
									  第<span className={"color-orange"}>  {this.state.MenuItemskey}  </span>次开课 <Icon className="aIcons" type={!this.state.onVisibleChangestype?"down":"up"} />
									</a>
								</Dropdown>
							</li>
								<style>
									{
										`
										.pdt28{
										    padding-top: 28px;
										}
										.ml23{
										  margin-left:23px;
										}
										.pathtime{
										    color: #9B9B9B;
    										font-size: 12px;
										}
										.pathtimes{
											color: #05101A;
											font-size: 14px;
										}
										`
									}
								</style>
							<li className={"ml20"}>
									{this.state.courseslist.map((item,key)=>{
									return(
										<div className={"ant-breadcrumb pdt28"} key={key}>
															<span>
											 <div className="ant-breadcrumb-link fl mr23">
												 <div className={"pathtime"}>
													 开课时间：
												 </div>
											   <div className={"pathtimes"}>
											      {item.start_date}
												 </div>
											 </div>
											 <div className="fl solidright"></div>
										</span>

											<span>
												 <div className="ant-breadcrumb-link fl mr23 ml23">
													 <div className={"pathtime"}>
														 结课时间：
													 </div>
													 <div className={"pathtimes"}>
														 {item.end_date}
													 </div>
												 </div>
												 <div className="fl solidright"></div>
											</span>

											<span>
												 <div className="ant-breadcrumb-link fl mr23 ml23">
													 <div className={"pathtime"}>
														 报名人数：
													 </div>
													 <div className={"pathtimes"}>
													  {item.student_count}   人
													 </div>
												 </div>
											</span>
										</div>
									)
									})
									}

							</li>

								<li className={"fr mr25"}>
									<style>
										{
											`
											.user-colorgrey-9b{color:#9B9B9B}
											.user-colorgrey-green{color:#7ED321}
											.background191{
												background: rgba(191,191,191,1) !important;
    										color: #fff;
											}
											.mr51{
											    margin-right: 51px;
											}
											.pathbtens{
											  width: 150px !important;
												height: 44px !important;
												line-height: 44px !important;
											}
											.pathdefault{
											    cursor: default !important;
											}
											.courseslistsa{
											  color:#fff !important;
											}
											`
										}
									</style>
											{this.state.courseslist.map((item,key)=>{

												return(
													<div key={key}>
														{item.course_status.status===0?<div className="mr51 shixun_detail pointer fl user-colorgrey-green pathdefault">即将开课</div>:""}
														{item.course_status.status===1?<div className="mr51 shixun_detail pointer fl color-orange pathdefault">{item.course_status.time}</div>:""}
														{item.course_status.status===2&&item.course_identity<6?<div className="mr51 shixun_detail pointer fl user-colorgrey-9b pathdefault">已结束</div>:""}

														{item.course_status.status===0?
															item.course_identity<5?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens courseslistsa" href={item.first_category_url} target="_blank">
																进入课堂
															</a>:item.course_identity<6?<div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault">报名成功</div>
																:<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens"  onClick={()=>this.JoinnowCourse(item.course_id)}>立即报名</a>:""}

														{item.course_status.status===1?
															item.course_identity<5?<a className="courseslistsa fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
																进入课堂
															</a>:item.course_identity<6?<a className="courseslistsa fr user_default_btn task-btn-orange font-18 mt28 pathbtens" href={item.first_category_url} target="_blank">
																	立即学习
																</a>:<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens"  onClick={()=>this.JoinnowCourse(item.course_id,item.course_status.status)}>立即加入</a>:""}

														{item.course_status.status===2?
													     item.course_identity<6?<a className="fr user_default_btn task-btn-orange font-18 mt28 pathbtens courseslistsa" href={item.first_category_url} target="_blank">
																进入课堂
															</a>:<div className="fr user_default_btn background191 font-18 mt28 pathbtens pathdefault">已结束</div>:""}

													</div>
												)})}


								</li>
						</div>}

          </div>
        }



        
      </div>
    )
  }
}
export default DetailTop;