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 './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:[]
    }
  }
	componentDidMount(){
		let courseslist=[]
		this.props.courses.map((item,key)=>{
			if(1===key+1){
				return(
					courseslist.push(item)
				)
			}
		})
		this.setState({
			courseslist:courseslist
		})
		console.log(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)
				)
			}
		})

		console.log(courseslist)

   this.setState({
		 MenuItemskey:keys,
		 courseslist:courseslist
	 })
	}
  render(){
    let{detailInfoList}=this.props;
    let{Modalstype,Modalstopval,cardsModalcancel,cardsModalsave,Modalsbottomval,cardsModalsavetype,loadtype}=this.state;
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };


		//      <div className={this.props.courses===undefined||this.props.courses.length===0?"subhead":"subhead mb70"}>

		let menu = (
			<Menu>
				{this.props.courses&&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?"subhead":"subhead mb70"}>
        <Modals
          modalsType={Modalstype}
          modalsTopval={Modalstopval}
          modalsBottomval={Modalsbottomval}
          modalCancel={cardsModalcancel}
          modalSave={cardsModalsavetype===true?this.reovkissuePaths:this.cardsModalsave}
          loadtype={loadtype}
        >
        </Modals>
				{/*<div  className={this.props.courses===undefined||this.props.courses.length===0?"subhead_content":"subhead_content pt100"}>*/}
        {
          detailInfoList &&
					<div  className={this.props.courses===undefined?"subhead_content":"subhead_content pt100"}>
            <div className="font-28 color-white clearfix">
              <span className="fl lineh-40">
                {detailInfoList.name}
              </span>
							<style>
								{
									`
									.tag-orange .tag-name{
									    display: block;
											width: auto;
											background-color: #FF6800;
											background-size: 100% 100%;
											padding: 0px 4px;
											color: #fff;
											float: left;
											height: 28px;
											line-height: 28px;
											font-size: 14px;
											border-radius: 4px;
									}
									`
								}
							</style>
							{this.props.courses===undefined?"":
							<span className="tag-orange">
								<span className="tag-name mt6 ml10">开放课程</span>
							</span>}
              {detailInfoList===undefined?"":detailInfoList.allow_statistics===true?
								<Tooltip placement="bottom" title={"编辑"}>
										<Link to={"/paths/"+this.props.match.params.pathId+"/edit"} className="ml10 ring-green fl mt10" >
											<img src={getImageUrl("images/educoder/icon/edit.svg")} className="fl mt3 ml2" />
										</Link>
								</Tooltip>
									:""
              }

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

              { detailInfoList.allow_send === true?this.props.courses===undefined?
                <SendPanel {...this.props} {...this.state}></SendPanel>:"":""
              }
              
            </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>
              }
							{this.props.courses===undefined?<div className="fr pr">
                {detailInfoList===undefined?"":detailInfoList.allow_delete===true?<a
                    className={detailInfoList.publish_status===-1?"fl font-18 color-white mt5 mr20":"fl font-18 color-white mt5"}
                    style={{opacity: '0.6'}} onClick={this.allow_deletepath}
                >删除路径</a>:""}

                {
                 detailInfoList.publish_status===0&&detailInfoList.allow_add_member===true?
                  <a className="user_default_btn user_bluebg_btn font-18 fl ml40 userbluebgfont" onClick={this.applyissuePath}>申请发布</a>:""
                }


                {
                  detailInfoList.publish_status===1 && detailInfoList.allow_statistics===true?
                  <a className="user_default_btn user_grey_btn font-18 fl pointer ml40" onClick={this.cancelissuePath}>撤销申请</a>:""
                }

                {
                  detailInfoList.publish_status===2 && detailInfoList.allow_statistics===true?
                  <a className="user_default_btn user_grey_btn font-18 fl pointer ml40" onClick={this.reovkissuePath}>撤销发布</a>:""
                }
              </div>:""}


							{this.props.courses===undefined?"":detailInfoList.is_creator===true?<div className="fr pr">
								<a className={"fl font-18 color-white mt5 kaike mr20"}>开课</a>
								<Link to={"/paths/"+this.props.match.params.pathId+"/statistics"}  className="fl font-18 color-white mt5 kaike">
									学习统计
								</Link>
							</div>:""}

            </div>

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

							<li className={"fl"}>
								<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>
								<Dropdown
								  overlay={menu}
									onVisibleChange={this.onVisibleChanges}
								>
									<a className={"alist"}>
										<i className="iconfont icon-bianji1 newbianji1"></i>第<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)=>{
								  	//	course_id: 1309
										// course_identity: 5
										// course_status: {status: 1, time: "进行至第5周，共1642周"}
										// first_category_url: "/courses/1309/informs"
									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"}>
									<style>
										{
											`
											.user-colorgrey-9b{color:#9B9B9B}
											.user-colorgrey-green{color:#7ED321}
											.background191{
												background: rgba(191,191,191,1) !important;
    										color: #fff;
											}
											`
										}
									</style>
											{this.state.courseslist.map((item,key)=>{

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


														{item.course_status.status===0?
															detailInfoList.is_creator===true?<a className="fr user_default_btn task-btn-orange font-18 mt25" href={item.first_category_url} target="_blank">
																进入课堂
															</a>:item.course_identity<6?<div className="fr user_default_btn background191 font-18 mt25">报名成功</div>
																:<a className="fr user_default_btn task-btn-orange font-18 mt25" >立即报名</a>:""}


														{item.course_status.status===1?
															detailInfoList.is_creator===true?<a className="fr user_default_btn task-btn-orange font-18 mt25" href={item.first_category_url} target="_blank">
																进入课堂
															</a>:item.course_identity<6?<a className="fr user_default_btn task-btn-orange font-18 mt25" href={item.first_category_url} target="_blank">
																	立即学习
																</a>:<a className="fr user_default_btn task-btn-orange font-18 mt25" >立即加入</a>:""}

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

													</div>
												)})}


								</li>
						</div>}

          </div>
        }



        
      </div>
    )
  }
}
export default DetailTop;