import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Redirect } from 'react-router';

import PropTypes from 'prop-types';

// import searchImg from '../../../../images/educoder/icon/search.svg'

// /images/educoder/icon/search.svg

import { getImageUrl, toPath } from 'educoder'

import axios from 'axios';

import { Modal,Checkbox ,Radio,Input,message } from 'antd';

import Addcourses from '../courses/coursesPublic/Addcourses';

import LoginDialog from '../login/LoginDialog';

import Trialapplication from '../login/Trialapplication'

import 'antd/lib/modal/style/index.css';

import 'antd/lib/checkbox/style/index.css';

import 'antd/lib/radio/style/index.css';

import 'antd/lib/input/style/index.css';

import './TPMIndex.css'

import { trigger, broadcastChannelPostMessage } from 'educoder';

const $ = window.$
// TODO 这部分脚本从公共脚本中直接调用

const RadioGroup = Radio.Group;
const Search = Input.Search;
let old_url;
function loadHeader(){
  //头部导航条的----------显示搜索框
  $("#search-open").on("click",function(e){
    $(this).hide();
    // $("#header-nav").animate({opacity:"0"},1000);
    $(".posi-search").show() // animate({opacity:"1"},1000);
    $("#header-nav").css("z-index","2");
    $(".posi-search").css("z-index","3");
    $(".HeaderSearch").show();
    $(".HeaderSearch").val("");
    $(".search-input").focus();
    $(".search-all .search-content").hide();
    e.stopPropagation();//阻止冒泡
  });
  $(".HeaderSearch").on("click",function(e){
    e.stopPropagation();//阻止冒泡
  });
  //搜索框输入内容
  $(".HeaderSearch").on("input",function(e){
    if($(".HeaderSearch").val()==""){
      $(".search-all .search-content").hide();
    }else{
      $(".search-all .search-content").show();
    }
    e.stopPropagation();//阻止冒泡
  });
  //搜索
  // $("#header_keyword_search").on("click", header_search);
  // $("input[name='search_keyword']").on("keydown", function(event){
  //   var code;
  //   if (!event) {
  //     event = window.event; //针对ie浏览器
  //     code = event.keyCode;
  //   }
  //   else {
  //     code = event.keyCode;
  //   }
  //   if(code == 13) {
  //     header_search();
  //     return false;
  //   }
  // });
  $(".search-clear").click(function(e){e.stopPropagation();});
  //切换搜索条件
  $("#searchkey li").click(function(e){
    var key=$($(this).children("a")[0]).html();
    switch (key){
      case '实训':
        $("#search_type").val('1');
        break;
      case '课堂':
        $("#search_type").val('2');
        break;
      case '用户':
        $("#search_type").val('3');
        break;
    }
    $("#searchkey").siblings(".searchkey").html(key);
    $("#searchkey").hide();
    e.stopPropagation();//阻止冒泡
  });
  //切换选择导航条
  $("#header-nav li").click(function(){
    $("#header-nav li").removeClass("active");
    $(this).addClass("active");
  });
  //点击页面其它（与搜索框无关的地方）都会将搜索框隐藏，所以与搜索框有关的地方需要阻止冒泡
  $("body").on("click",function(){
    closeSearch();
  });

  $(".search_history").on("click", function(){
    $("input[name='search_keyword']").val($(this).html());
    header_search();
  });
}

function header_search(reactHeaderComponnet){
  console.log(old_url)
  var keyword = $("input[name='search_keyword']").val(); // 搜索关键字
  if (!reactHeaderComponnet) {
    reactHeaderComponnet = window._header_componentHandler
  }
  if (!reactHeaderComponnet) {
    var index   = $("#search_type").val();      // 搜索课程/项目
    keyword = encodeURIComponent(keyword);
    // $.get('/users/search_shixuns_or_course',
    //     { search: keyword,
    //         index: index});
    window.location.href = old_url+"/users/search_shixuns_or_courses" + "?search=" + keyword + "&index=" + index;
    //e.stopPropagation();//阻止冒泡
  } else {
    window.__headSearchKeyword = keyword
    reactHeaderComponnet.props.history.push(`/shixuns`)
    trigger('searchKeywordChange', keyword)
  }
}
//头部导航条的隐藏
function closeSearch(){
  $('#posi-search').hide();
  $("#search-open").show();
  // $(".posi-search").animate({opacity:"0"},800);
  $(".HeaderSearch").hide();
  $("#header-nav").animate({opacity:"1"},1000);
  $(".posi-search").css("z-index","2");
  $("#header-nav").css("z-index","3");
}

/*
    _logined_header.html.erb
    _unlogin_header.html.erb
*/
window._header_componentHandler = null;
class NewHeader extends Component {
  constructor(props) {
    super(props)
    this.state={
      Addcoursestypes:false,
      tojoinitemtype:false,
      tojoinclasstitle:undefined,
      rolearr:["",""],
      Checkboxteacherchecked:false,
      Checkboxstudentchecked:false,
      Checkboxteachingchecked:false,
      Checkboxteachertype:false,
      Checkboxteachingtype:false,
      code_notice:false,
      checked_notice:false,
      RadioGroupvalue:undefined,
      submitapplications:false,
      isRender:false,
      isRenders:false,
      showTrial:false,
      user:undefined,
    }
  }

  componentDidMount() {
    window._header_componentHandler = this;

    loadHeader();

    //下拉框的显示隐藏
    var hoverTimeout;
    var hoveredPanel;
    $(".edu-menu-panel").hover(function(){
      if (hoverTimeout) { // 一次只显示一个panel
        if (hoveredPanel && hoveredPanel != this) {
          $(hoveredPanel).find(".edu-menu-list").hide()
        }
        clearTimeout(hoverTimeout);
        hoverTimeout = null;
      }
      hoveredPanel = this;
      $(this).find(".edu-menu-list").show();
    },function(){
      var that  =this;
      // 延迟hide
      hoverTimeout = setTimeout(function() {
        $(that).find(".edu-menu-list").hide();
      }, 800)

    });



  }


  componentWillReceiveProps(newProps, oldProps) {
    this.setState({
      user:newProps.user
    })
    if(newProps.Headertop!=undefined){
      old_url=newProps.Headertop.old_url
    }

  }
  getCookie=(key)=>{
    var arr,reg = RegExp('(^| )'+key+'=([^;]+)(;|$)');
    if (arr = document.cookie.match(reg))    //["username=liuwei;", "", "liuwei", ";"]
      return decodeURIComponent(arr[2]);
    else
      return null;
  }

  delCookie=(name)=>{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=this.getCookie(name);
    if(cval!=null){
      document.cookie= name + "="+cval+";expires="+exp.toGMTString();
    }
  }
  onLogout = () => {
    const url = `/accounts/logout.json`
    this.delCookie("autologin_trustie")
    axios.get(url, {
    })
      .then((response) => {
        if(response.data.status===1){
          this.setState({
            user:undefined
          })
          // let path="/";
          // this.props.history.push(path);
          broadcastChannelPostMessage('refreshPage')
          window.location.href ="/login"
          message.success('退出成功');
        }
      });
  }

  tojoinclass=()=>{
    this.setState({
      Addcoursestypes:true,
    })
  }

  tojoinitem=()=>{
    this.setState({
      tojoinitemtype:true
    })
  }


  submitstatevalue=(sum,value,data)=>{
    this.setState({
      Addcoursestypes:false,
      tojoinitemtype:false,
      tojoinclasstitle:undefined,
      rolearr:["",""],
      Checkboxteacherchecked:false,
      Checkboxstudentchecked:false,
      Checkboxteachingchecked:false,
      Checkboxteachertype:false,
      Checkboxteachingtype:false,
      code_notice:false,
      checked_notice:false,
      submitapplicationssum:sum,
      submitapplications:true,
      submitapplicationsvalue:value,
      submitapplicationsvaluedata:data,
      RadioGroupvalue:undefined
    })
  }

  onChangeRadioGroup = (e) => {
    this.setState({
      RadioGroupvalue: e.target.value,
    });
  }

  submitsubmitapplications=()=>{
    let {
      submitapplicationssum,
      submitapplicationsvaluedata
    }=this.state;
    this.setState({
      submitapplications:false,
      RadioGroupvalue:undefined
    })
    if(submitapplicationssum===0){
      if(submitapplicationsvaluedata!=undefined){
        window.location.href = "https://www.educoder.net/courses/"+submitapplicationsvaluedata;
      }
    }else if(submitapplicationssum===1){
      if(submitapplicationsvaluedata!=undefined){
        window.location.href = "https://www.educoder.net/projects/"+submitapplicationsvaluedata;
      }
    }
  }

  hidesubmitapplications=()=>{
    this.setState({
      Addcoursestypes:false,
      tojoinitemtype:false,
      tojoinclasstitle:undefined,
      rolearr:["",""],
      Checkboxteacherchecked:false,
      Checkboxstudentchecked:false,
      Checkboxteachingchecked:false,
      Checkboxteachertype:false,
      Checkboxteachingtype:false,
      code_notice:false,
      checked_notice:false,
      submitapplications:false,
      RadioGroupvalue:undefined
    })
  }
  educoderlogin=()=>{
    //登出账号
    var url = `/accounts/logout.json`;

    axios.get((url)).then((result) => {
       if(result!==undefined){
         this.setState({
           isRender:true
         })
       }
    }).catch((error) => {
       console.log(error);
    })
  }

  onKeywordSearch = () => {
    header_search(this)
  }
  onKeywordSearchKeyDown = (e) => {
    let code = e.keyCode;
    
    if(code == 13) {
      header_search(this);
      return false;
    }
  }

  hideAddcoursestypes=()=>{

    this.setState({
      Addcoursestypes:false
    })

  }


  hidetojoinclass=()=>{
    this.setState({
      tojoinclasstype:false,
      tojoinitemtype:false,
      tojoinclasstitle:undefined,
      rolearr:["",""],
      Checkboxteacherchecked:false,
      Checkboxstudentchecked:false,
      Checkboxteachingchecked:false,
      Checkboxteachertype:false,
      Checkboxteachingtype:false,
      code_notice:false,
      checked_notice:false,
      RadioGroupvalue:undefined
    })
  }

submittojoinclass=(value)=>{
  let {tojoinclasstitle,rolearr,RadioGroupvalue}=this.state;

  if(tojoinclasstitle===undefined){
    this.setState({
      code_notice:true
    })
    return
  }
  let newrolearr=rolearr;
  if(value===1){
    if(tojoinclasstitle.length<6){
      this.setState({
        code_notice:true
      })
      return
    }
  }else if(value===0){
    if(tojoinclasstitle.length<5){
      this.setState({
        code_notice:true
      })
      return
    }
  }
  if(tojoinclasstitle===""||tojoinclasstitle===undefined){
    this.setState({
      code_notice:true
    })
    return
  }else{
    this.setState({
      code_notice:false
    })
  }

  let pamst=[];
  let num=0;
  for(var i = 0 ; i<newrolearr.length;i++){
    if(newrolearr[i]!=""){
      pamst.push(newrolearr[i])
    }else{
      num=num+1
    }
  }

  if(num===2&&value===0){
    this.setState({
      checked_notice:true
    })
    return
  }

  if(value===1&&RadioGroupvalue===undefined){
    this.setState({
      checked_notice:true
    })
    return
  }

  if(value===0){
    let url="https://www.educoder.net/courses/join_course_multi_role.json"
    const form = new FormData();
    form.append('invite_code', tojoinclasstitle);
    form.append('role', pamst);
    form.append('type', 1);
    axios.post(url,form,[true]
    ).then((response) => {
      if( response.data.state===0){
        this.submitstatevalue(0,"加入成功",response.data.course_id)
      }else if( response.data.state===1){
      }else if( response.data.state===2){
        this.submitstatevalue( 0,"课堂已过期!  请联系课堂管理员重启课堂。(在配置课堂处)")
      }else if( response.data.state===3){
        this.submitstatevalue( 0,"您已是课堂成员)",response.data.course_id)
      }else if( response.data.state===4){
        this.submitstatevalue( 0,"您输入的邀请码错误)")
      }else if( response.data.state===5){
        this.submitstatevalue( 0,"您还未登录")
      }else if( response.data.state===6){
        this.submitstatevalue( 0,"申请已提交，请等待审核")
      }else if( response.data.state===7){
        this.submitstatevalue( 0," 您已经发送过申请了，请耐心等待")
      }else if( response.data.state===8){
        this.submitstatevalue( 0,"您已经是该课堂的教师了",response.data.course_id)
      }else if( response.data.state==9){
        this.submitstatevalue( 0,"您已经是该课堂的教辅了",response.data.course_id)
      }else if( response.data.state==10){
        this.submitstatevalue(0,"您已经是该课堂的管理员了",response.data.course_id)
      }else if( response.data.state==11){
        this.submitstatevalue(0," 该课堂已归档，请联系老师")
      }else if( response.data.state==12){
        this.submitstatevalue(0,"您已经发送过申请了，请耐心等待师")
      }else if( response.data.state==13){
        this.submitstatevalue(0,"您申请已提交，请等待审核")
      }else if( response.data.state==14){
        this.submitstatevalue("此邀请码已停用，请与老师联系")
      }else if( response.data.state==15){
        this.submitstatevalue(0,"您已是课堂成员! 加入分班请在课堂具体分班页面进行")
      }else {
        this.submitstatevalue(0," 未知错误，请稍后再试")
      }
    })

  }

  if(value===1){
    let url="https://www.educoder.net/applied_project/applied_project_info.json"
    const form = new FormData();
    form.append('invite_code', tojoinclasstitle);
    form.append('member', RadioGroupvalue);
    form.append('type', 1);
    axios.post(url,form,[true]
    ).then((response) => {
      if( response.data.status===1){
        this.submitstatevalue(1,"您输入的邀请码错误")
      }else if( response.data.status===2){
        this.submitstatevalue( 1,"您已经是该项目成员",response.data.project)
      }else if( response.data.status===3){
        this.submitstatevalue( 1,"请选择一个角色")
      }else if( response.data.status===4){
        this.submitstatevalue( 1,"您的申请已提交，请等待项目管理员审批")
      }else if( response.data.status===5){
        this.submitstatevalue( 1,"您已经申请加入该项目了，请耐心等待")
      }else if( response.data.status===6){
        this.submitstatevalue( 1,"您已成功加入项目",response.data.project)
      }
    })
  }
}

  // trialapplications =()=>{
  //   console.log("点击了")
  //   this.setState({
  //     isRenders: true,
  //     showTrial:true,
  //   })
  // }

  // 关闭
  cancelModulationModels = () => {
    this.setState({isRenders: false})
  }

  render() {
    const isLogin = true;   // 这里不会出现未登录的情况，服务端在服务端路由时发现如果是未登录，则跳转到登录页了。
    const {match ,} = this.props;

    let {Addcoursestypes,
      tojoinitemtype,
      tojoinclasstitle,
      Checkboxteacherchecked,
      Checkboxstudentchecked,
      Checkboxteachingchecked,
      Checkboxteachertype,
      Checkboxteachingtype,
      code_notice,
      checked_notice,
      RadioGroupvalue,
      submitapplications,
      submitapplicationsvalue,
      user,
      isRender,
      isRenders,
    }=this.state;
    /*
        用户名称  用户头像url
    */
    let activeIndex = false;
    let activeForums = false;
    let activeShixuns = false;
    let activePaths = false;
    let coursestype=false;

    if (match.path === '/forums') {
      activeForums = true;
    } else if (match.path.startsWith('/shixuns')) {
      activeShixuns = true;
    }else if (match.path.startsWith('/paths')) {
      activePaths = true;
    } else if (match.path.startsWith('/courses')) {
      coursestype = true;
    }else {
      activeIndex = true;
    }

    // join_course_url: "https://www.educoder.net/courses/join_course_multi_role"
    // join_project_url: "https://www.educoder.net/applied_project/applied_project_info"
    //    rolearr:["",""],
    // console.log()
    return (

      <div className="newHeader" id="nHeader">
        {/*{*/}
        {/*  isRender&& isRender === true?*/}
              <LoginDialog
                  {...this.state}
              />
        {/*      :""*/}
        {/*}*/}
        <Trialapplication></Trialapplication>

        {/*{*/}
        {/*  isRenders&&isRenders===true?*/}
        {/*      <Trialapplication*/}
        {/*          {...this.state}*/}
        {/*          Cancel={() => this.cancelModulationModels()}*/}
        {/*      />*/}
        {/*      :""*/}
        {/*}*/}

        <div className="educontent clearfix">
          {/*<%= link_to image_tag("/images/educoder/logo.png", alt:"高校智能化教学与实训平台", className:"logoimg"), home_path %>*/}
          <a href="/">
            <img alt="高校智能化教学与实训平台" className="logoimg" src={getImageUrl("images/educoder/headNavLogo.png?1526520218")}></img>
          </a>
          <div className="head-nav pr" style={{width:'716px'}}>

            <ul id="header-nav">
              {/*<li className={`${activeIndex === true ? 'active' : ''}`}><a href="/">首页</a></li>*/}

              {/*<li><a href={this.props.Headertop===undefined?"":this.props.Headertop.shixun_paths_url}>实训路径</a></li>*/}
              <li className={`${activePaths === true ? 'pr active' : 'pr'}`}>
                <a href={this.props.Headertop===undefined?"":'/paths'}>实训课程</a></li>

              {/*<li><a href={this.props.Headertop===undefined?"":'/courses'}>课堂</a></li>*/}
              <li className={`${coursestype === true ? 'pr active' : 'pr'}`}>
                {/*<a href={this.props.Headertop===undefined?"":this.props.Headertop.course_url}>课堂</a>*/}
                <a href={this.props.Headertop===undefined?"":'/courses'}>翻转课堂</a>
              </li>

              <li className={`${activeShixuns === true ? 'pr active' : 'pr'}`}>
                <a href="/shixuns">开发社区</a>
                <img src={getImageUrl("images/educoder/hot-h.png")} className="nav-img">
                </img>
              </li>

              <li className="fl edu-menu-panel  careershover "
                  style={{display: this.props.Headertop === undefined ?'none'  : this.props.Headertop.career_url.length > 0 ? 'block' : 'none'}}>
                <a>职业路径</a>
                <div
                  style={{display: this.props.Headertop === undefined ?'none'  : this.props.Headertop.career_url.length > 0 ? 'block' : 'none'}}>
                  <ul className="edu-menu-list edu-menu-listnew " style={{top:'60px'}}>
                    {this.props.Headertop === undefined ? "" : this.props.Headertop.career_url.map((item, key) => {
                      return(
                        <li key={key}><i className="iconfont icon-java left careersiconfont"
                                         style={{color: '#000 important'}}
                        ></i><a style={{width: '83%'}}
                                href={item.url}>{item.name}</a></li>
                      )
                    })
                    }
                  </ul>
                </div>
              </li>


              <li className=""><a href={this.props.Headertop===undefined?"":this.props.Headertop.competitions_url}>竞赛</a></li>

              <li className={`${activeForums === true ? 'active' : ''}`}><a href={this.props.Headertop===undefined?"":this.props.Headertop.topic_url}>问答</a></li>
              <li
                style={{display: this.props.Headertop === undefined ? 'none'  : this.props.Headertop.auth===null? 'none' : 'block'}}
              ><a href={this.props.Headertop===undefined?"":this.props.Headertop.auth}>认证</a></li>
            </ul>


         <div className="posi-search" id="posi-search">
              <div className="search-all clearfix">
                {/*<!--<a href="javascript:void(0)" className="search-clear fl" onclick="closeSearch();">×</a>-->*/}
                  <div className="fl pr search-clear edu-menu-panel" style={{display: 'none'}}>
                    <input type="hidden" id="search_type" value="1"></input>
                    <span className="searchkey">实训</span>
                    <i className="fa fa-angle-down ml5 font-16"></i>
                    <ul id="searchkey" className="edu-menu-list edu-txt-center" style={{minWidth: '80px',right: '-10px',top: '50px'}}>
                      <li><a>实训</a></li>
                      <li><a>课堂</a></li>
                      <li><a>用户</a></li>
                    </ul>
                  </div>
                {/*<input type="text" className="search-input fl" id="search-input" */}
                  {/*onKeyDown={this.onKeywordSearchKeyDown} name="search_keyword" placeholder="搜索实训项目"/>*/}

                <div
                  className={"HeaderSearch"}
                  style={{display: 'none'}}
                >
                  <Search
                    placeholder="搜索"
                    // onSearch={value => console.log(value)}
                    onPressEnter={this.onKeywordSearchKeyDown}
                    style={{ width: 258 }}
                  />
                </div>

                {/*<a className="search-icon fl" id="header_keyword_search" onClick={this.onKeywordSearch}>*/}
                  {/*/!*<i className="fa fa-search font-16 mt23 color-grey-6"></i>*!/*/}
                  {/*<i className="iconfont icon-sousuo color-blue"></i>*/}

                {/*</a>*/}
                {/* TODO 需要服务端接口提供最近搜索
                            <div className="search-content none" style="width: 86%;left:  0px;">
                              <div className="search-title">最近搜索</div>
                                  <div><a href="javascript:void(0)" className="search_history">绿盟</a></div>
                                  <div><a href="javascript:void(0)" className="search_history">qwe</a></div>
                            </div>*/}
              </div>
            </div>

          </div>

          {/*<span className="font-15 fr mt17">
			      	<%= link_to '登录', signin_path, :className => "mr5" %>
			      	<em className="vertical-line"></em>
			      	<%= link_to '注册', user_join_path, :className => "ml5" %>
			    </span>*/}
          { user===undefined?
            <span className="font-15 fr mt17">
                <a onClick={()=>this.educoderlogin()}  className="mr5 color-white">登录</a>
                <em className="vertical-line"></em>
                <a href={"/register"} className="mr5 color-white">注册</a>
            </span> :user.login===""?<span className="font-15 fr mt17">
                <a onClick={()=>this.educoderlogin()}  className="mr5 color-white">登录</a>
                <em className="vertical-line"></em>
                <a href={"/register"} className="mr5 color-white">注册</a>
            </span>:
            <div className="fr edu-menu-panel" style={{height:'60px'}}>
              <a href={this.props.Headertop===undefined?"":this.props.Headertop.avatar_url} className="fl ml15">
                <img alt="头像" className="radius mt13" height="34" id="nh_user_logo" name="avatar_image"
                     src={getImageUrl(`images/`+user.image_url)} width="34">
                </img>
              </a>
              <ul className="edu-menu-list" style={{top:'60px'}}>
                <span className="bor-bottom-greyE currentName task-hide">{user.username}</span>
                <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.my_course_url}>我的课堂</a></li>
                {/* p 老师  l 学生 */}
                <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.my_shixun_url}>我的实训</a></li>
                <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.my_shixun_paths_url}>我的实训课程</a></li>
                <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.my_project_url}>我的项目</a></li>
                <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.account_manager_url}>账号管理</a></li>
                {/*<li><a onClick={()=>this.educoderlogin()} >登入测试接口</a></li>*/}
                {/*<li><a onClick={()=>this.trialapplications()} >试用申请</a> </li>*/}
                <li className="bor-top-greyE">
                  {/*<a href={this.props.Headertop===undefined?"":this.props.Headertop.logout_url}>退出</a>*/}
                  {/*<a  onClick={()=>this.educoderlogin()}>退出</a>*/}
                  <a  onClick={()=>this.educoderlogin()}>退出</a>

                </li>
              </ul>
            </div>
         }
          {/*href="https://www.educoder.net/login"*/}
          { user===undefined?"":user.login===""?"":<div className="fr head-right">
            { loadHeader()}
            <a id="search-open" className="fl mr30 headIcon">
              {/*"/images/educoder/icon/search.svg"
                             <img src={getImageUrl(`images/educoder/icon/search.svg`)} /> */}

              <i className="iconfont icon-sousuo color-white"></i>
            </a>

            {/*</div>*/}
            <div className="fl mr30 edu-menu-panel headIcon">


              <i className="iconfont icon-tianjiafangda color-white"></i>

              <div className="edu-menu-list"  style={{top: '60px',width:"240px"}}>
                <div className="overPart"></div>
                <ul className="fl with50 edu-txt-center pr ul-leftline">
                  <li><Link to={"/courses/new"}>新建课堂</Link></li>
                  <li><a href="/shixuns/new">新建实训</a></li>
                  <li><a href={this.props.Headertop===undefined?"":"/paths/new"}>新建实训课程</a></li>
                  <li><a href={this.props.Headertop===undefined?"":this.props.Headertop.new_project_url}>新建项目</a></li>
                </ul>
                <ul className="fl with50 edu-txt-center">

                  <li>
                    <a onClick={this.tojoinclass}>加入课堂</a>
                  </li>

                  {Addcoursestypes===true?<Addcourses
                   Addcoursestype={Addcoursestypes}
                   hideAddcoursestype={this.hideAddcoursestypes}
                 />:""}

                  {/*  /courses/join_course_multi_role */}
                  <li>
                    <a onClick={this.tojoinitem}>加入项目</a>
                  </li>
                  <Modal
                    keyboard={false}
                    title="加入项目"
                    visible={tojoinitemtype}
                    closable={false}
                    footer={null}
                  >
                    <div className="task_popup_con  ml30">
                      <div className="mr15">
                        <ul>
                          <li className="clearfix mb10">
                            <label className="panel-form-label fl">项目邀请码：</label>
                            <Input type="text" className="input-60-40 fl" name="invite_code"
                                   placeholder="请输入六位课堂邀请码" value={tojoinclasstitle} onInput={this.inputjoinclassvalue}/>
                          </li>

                          <p id="none_invite_code_notice"
                             className="color-orange none f12"
                             style={{marginLeft: '90px',display:code_notice===true?'block':"none"}}>请输入六位课堂邀请码</p>

                          <li className="clearfix ">

                            <label className="panel-form-label fl">身份：</label>
                            <RadioGroup className="mt10" onChange={this.onChangeRadioGroup}>
                              <Radio value={1}>管理人员</Radio>
                              <Radio value={2}>开发人员</Radio>
                              <Radio value={3}>报告人员</Radio>
                            </RadioGroup>

                          </li>

                          <p id="none_checked_notice" className="color-orange none f12"
                             style={{marginLeft: '90px',display:checked_notice===true?'block':"none"}}>请至少选择一个身份</p>

                          <li className="clearfix mt10 edu-txt-center">
                            <a className="task-btn mr10"
                               onClick={()=>this.hidetojoinclass(1)}>取消</a>
                            <a
                              className="task-btn task-btn-orange ml20"
                              onClick={()=>this.submittojoinclass(1)}>确定</a>
                          </li>

                        </ul>
                      </div>
                    </div>
                  </Modal>
                </ul>
              </div>
            </div>

            <div className="fl mr30 edu-menu-panel headIcon">
              { user===undefined?"":user.login===""?"": <a
                href={this.props.Headertop===undefined?"":this.props.Headertop.message_url}
                style={{position:'relative'}}
              >
                <i className="iconfont icon-xiaoxilingdang color-white"></i>
                <span className="newslight" style={{display:this.props.Headertop===undefined?"none":this.props.Headertop.new_message===true?"block":"none"}}>
                              {/*{this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count > 99 ? '99+'*/}
                  {/*: this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count}*/}
                </span>
              </a>
              }

            </div>

            <Modal
              keyboard={false}
              title="提示"
              visible={submitapplications}
              closable={false}
              footer={null}
            >
              <div className="task_popup_con  ml30">
                <div className="mr15">
                  <ul>
                    <div className="task-popup-content">
                      <p className="task-popup-text-center font-16">
                        {submitapplicationsvalue}
                      </p>
                    </div>
                    <li className="clearfix mt10 edu-txt-center">
                      <a className="task-btn mr10"
                         onClick={this.hidesubmitapplications}>取消</a>
                      <a
                        className="task-btn task-btn-orange ml20"
                        onClick={this.submitsubmitapplications}>确定</a>
                    </li>

                  </ul>
                </div>
              </div>
            </Modal>

          </div>}
        </div>
      </div>

    );
  }
}

export default NewHeader;



// <ul id="header-nav">
//                       <li className="active">1{/*<%= link_to "首页", home_path %>*/}</li>
//                       <li>2{/*<%= link_to "精选实训", shixuns_path %>*/}</li>
//                       <li>3{/*<%= link_to "实训路径", subjects_path %>*/}</li>
//                       <li>4{/*<%= link_to "在线课堂", courses_path %>*/}</li>
//                       <li>5{/*<%= link_to "讨论组", forums_path %>*/}</li>
//                    </ul>



{/*{*/}
{/*<a href={this.props.Headertop===undefined?"":this.props.Headertop.message_url}*/}
{/*style={{display:this.props.Headertop===undefined?"none":this.props.Headertop.new_message===true?"block":"none",position:'relative'}}*/}
{/*>*/}
{/*<span className="newslight" style={{display:user!=undefined&&user.login!=""?"block":"none"}}>*/}
{/*/!*{this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count > 99 ? '99+'*!/*/}
{/*/!*: this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count}*!/*/}
{/*</span>*/}
{/*</a>*/}
{/*}*/}
{/*{ this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count>0 &&*/}
{/*<a href={this.props.Headertop===undefined?"":this.props.Headertop.message_url}>*/}
{/*<span className="newslight" style={{display:user!=undefined&&user.login!=""?"block":"none"}}>*/}
{/*/!*{this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count > 99 ? '99+'*!/*/}
{/*/!*: this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count}*!/*/}
{/*</span>*/}
{/*</a>}*/}
{/*{ this.props.Headertop===undefined?"":user && this.props.Headertop.unread_message_count>0 &&*/}
{/*<span  style={{display:user!=undefined&&user.login!=""?"block":"none"}}>*/}
{/*<div className="edu-menu-list edu-txt-center" style={{width: '220px', top: '60px'}}>*/}
{/*<a className="font-14 padding10" style={{lineHeight: '35px'}} href={this.props.Headertop===undefined?"":this.props.Headertop.message_url} >您有*/}
{/*<span className="color-orange">{this.props.Headertop===undefined?"":this.props.Headertop.unread_message_count}</span>*/}
{/*条新消息，点击查看</a>*/}
{/*</div>*/}
{/*</span>*/}
{/*}*/}



{/*
                        需求：消息数量
                    <div className="fl mr30 edu-menu-panel headIcon">
                        <a href={`/users/${user.login}/user_tidings`}><img src={getImageUrl(`images/educoder/icon/bell.svg`}></a>

                        <em className="newslight"></em>
                        <div className="edu-menu-list edu-txt-center" style="width:220px;top:60px">
                            <a className="font-14 padding10" style="line-height: 35px;" href={`/users/${user.login}/user_tidings`}>
                                您有<span className="color-orange">30</span>条新消息，点击查看
                            </a>
                        </div>
                    </div>
                    */}