require('normalize.css/normalize.css');
require('styles/App.scss');
require('bootstrap-loader');
import React from 'react';
import { Link } from 'react-router';
import Api from './Api';
import Jsonp from './Jsonp';
import json from 'crawler/result.json';


let hexunlogo = require('../images/logo.jpg');
var hr =  require("../images/bn.jpg");
var hc = require('../images/aa.png');
const Menuleftarea = React.createClass({
  getInitialState: function(){
    return{
       username:'',
       userimage:'',
       login: false,
       message:0
    }
  },
  componentDidMount: function(){
    if (this.isMounted()) {
      Jsonp.jsonp(Api.user, '',function (data) {
        if (data.islogin == 'True') {
          this.setState({username: data.nickname});
          this.setState({userimage: data.photo});
          this.setState({login: true});

          // 系统消息是以10s请求一次 但是必须登录才能拿到数据
          setInterval(this.message,10000);
        }
      }.bind(this))

    }

  },
  logout: function(){
    this.setState({login: false});
  },

  message:function(){
    Jsonp.jsonp(Api.message, function (data){
       if(!this.state.login) return; // 如果用户没有登录当前的信息都是0
       if(data.status ==1){
         this.setState({message: data.result.num});
       }
    }.bind(this))
  },
  handeClick: function(){
     if(!this.state.login){
         popup()
     }else{
       alert('已结登录')
     }
  },
  render(){
     return(
           <header>
             <nav className="navbar navbar-fixed-top navbar-inverse">
               <div className="container-fluid">
                 <div className="navbar-header">
                   <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                     <span className="sr-only">Toggle navigation</span>
                     <span className="icon-bar"></span>
                     <span className="icon-bar"></span>
                     <span className="icon-bar"></span>
                   </button>
                   <a className="navbar-brand" href="#"> 小网站</a>
                 </div>

                 <div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                   <ul className="nav navbar-nav">
                     <li className="active"><a href="#">首页 <span className="sr-only">(current)</span></a></li>

                   </ul>

                   <ul className="nav navbar-nav navbar-right">
                     <li><a href="https://reg.hexun.com/login.aspx" className={this.state.login?"hidden":''} target="_blank">登录</a></li>
                     <li><img src={this.state.userimage} className={this.state.login?"userImage":'hidden'} /></li>
                     <li><a href="javascript:void(0)" className={this.state.login?"":'hidden'} >{this.state.username}</a></li>
                     <li className="dropdown">
                       <a  className="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">用户信息 <span className="caret"></span></a>
                       <ul className="dropdown-menu">
                         <li><a href="http://message.hexun.com/" target="_blank">未读信息<span className="badge">{this.state.message}</span></a></li>
                         <li role="separator" className="divider"></li>
                         <li  ><a className={this.state.login?"hidden":''} href="https://reg.hexun.com/regname.aspx?gourl=http://zhibo.hexun.com/" target="_blank">注册</a></li>
                         <li role="separator" className="divider"></li>
                         <li><a href="http://utility.tool.hexun.com/Quit.aspx?gourl=http://zhibo.hexun.com/" target="_blank" onClick={this.logout}>退出</a></li>
                       </ul>
                     </li>
                   </ul>
                 </div>
               </div>
             </nav>
             <div className="liderBarLeft" id="leftMenu">
               <div>
                 <div id="meanue"></div>
               </div>
               </div>
           </header>
     )
  }

});


const Maincontent = React.createClass({

   render(){
      return(
        <section>
          <div className="content">
            <div className="contentHeader">
              <div className="userImage">
                <p>
                  <a href="#" className="admin hide">登录</a>
                  <a href="http://utility.tool.hexun.com/Quit.aspx?gourl=http://zhibo.hexun.com/" className="adminout hide">退出</a>
                  <a href="https://reg.hexun.com/regname.aspx?gourl=http://zhibo.hexun.com/" target="_blank" className="hide regesiter">注册</a>
                  <a>欢迎您：<span>Anikinly</span></a>
                  <img src="images/user.jpg" alt="用户头像"  className="userimage" />
                </p>
              </div>
            </div>
          </div>
        </section>
      )
   }

});




//router

const App = React.createClass({

   render(){
     return (
       <div className="clearfix">
         <div className="col-md-12 wrap_inn">
         <ul role="nav" className="col-md-2 list-unstyled menue">
           <li className="nav1 alert alert-success " id="infoMeanue">旋转</li>
           <li className="li"><Link to="/Seach">电影热搜</Link></li>
           <li className="li"><Link to="/Data">TOP250</Link></li>
           <li className="li"><Link to="/Zhibo">在线看片</Link></li>
           <li className="li"><Link to="/About">关于本站</Link></li>
         </ul>
         <div className="innerContent col-md-10 clearfix">
           <div className="searchWrap">{this.props.children}</div>
         </div>
         </div>
       </div>
     )
   }
});

const Seach = React.createClass({
  getInitialState: function(){
     return{
        value: '请输入检索信息',
        count: 0,
        total:0,
        title:[],
        alt:[],
        mimg:[],
        recom:[],
        direct:[],
        loading:'0%'
     }
  },
  inputChange: function(event){
     if(event.target.value == ''){
       this.setState({value:'请输入检索信息'});
       this.setState({title:[]});
       this.setState({total:0});
       this.setState({loading:'0%'});
     }else{
       this.setState({value:event.target.value});
     }

  },
  search: function(event){
    var keycode = event.which;
    if ( keycode == 13 ){
        if($.trim(event.target.value) == ''){
           alert('请输入信息在搜索哦')
        }else{
          if (this.isMounted()){
            let x = 0;
            let timer = setInterval(function(){
              let b = this.state.loading;
              if(b =='100%'){
                clearInterval(timer);
              }else{
                x +=10;
                this.setState({loading:x+'%'});
              }
            }.bind(this),100);
            Jsonp.ajaxs(Api.movies+'?q='+event.target.value,'',function(data,status){
               console.log(data);
               if(status == 'success'){
                 this.setState({loading:'100%'});
                 this.setState({count:data.count});
                 this.setState({total:data.total});

                 var res = data.subjects;
                 var t = [];
                 var i = [];

                 res.map(function(ele,ind){

                   t.push({title:ele['title'],alt:ele['alt'],images:ele['images'].small});

                   i.push({alt:ele['alt'],src:ele['images'].medium,text:ele['title'],yeas:ele['year'], type: ele['genres'],directors:ele['directors']});


                 });


                 this.setState({title:t});
                 this.setState({recom:i});
               }

            }.bind(this))
           }
        }


    }
  },
  componentDidMount: function(){

  },
  render(){
    return(
     <div  className="clearfix">
      <div className="row col-md-7">
        <div className="searchInputW">
          <div className="input-group">
            <input type="text" className="searchInput" ref="searchInput" onKeyDown={this.search} onChange={this.inputChange} placeholder="请输入你搜索的电影、演员活着导演"/>
          </div>
          <p className="tools_tip">
            <a href="http://mis.hexun.com/" className="active" target="_blank">签到管理系统</a>
            <a href="http://bugzilla.idc.hexun.com/bugzilla/" target="_blank">bug管理系统</a>
            <a href="http://cms.hexun.com/login.jsp" target="_blank">CMD内容管理系统</a>
            <a href="http://hr.hexun.com/eHR/" target="_blank">人力资源管理系统</a>
            <a href="http://pagecheck.idc.hexun.com/?10.0.250.235&http://yw.idc.hexun.com:8001/push/?URL=" target="_blank">和讯缓存清理</a>
            <a href="http://wiki.zq.hexun.com/login.action?os_destination=%2Fdashboard.action&permissionViolation=true" target="_blank">证券事业部WIKI</a>

          </p>
          <div className="noticeInfo">
            <p>和讯&豆瓣联合出品电影</p>
            <p className="inputNow">当前查询影视相关信息是[精准推送20条为您选择]：<span className="red_text">{this.state.value}，总共有{this.state.total}条数据与您相关</span></p>
          </div>
          <div className="progress">
            <div className="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style={{width: this.state.loading }}>
              <span className="sr-only">{this.state.loading}% Complete</span>
            </div>
          </div>
        </div>


        <div className= {this.state.total==0?'hide':'show'} >
          <div className="list-group">
            <a href="#" className="list-group-item active">
              专业为你推送：
            </a>
            <Chilesearch  name = {this.state.title} total={this.state.total}></Chilesearch>
          </div>
        </div>
      </div>
       <h4 className="tui" >为您推荐：</h4>
       <dl className="right_tuijian col-md-3">
         <img src={hr}  className={(this.state.recom.length == 0)?'show':'hide'}/>
         <Childrecommend  recom = { this.state.recom }></Childrecommend>
       </dl>

     </div>
        )
  }
});

const Chilesearch = React.createClass({

  render(){
    return(
      <div>
        {
          this.props.name.map(function(ele,key){
            return <a key={key} href={ele.alt} target="_blank" className="list-group-item">{ele.title}<img src={ele.images} className="searchImage" /></a>
          })
        }
      </div>
    )
  }
});

const Childrecommend = React.createClass({

 render(){
   return(

     <tr>
         {
           this.props.recom.map(function(ele,key) {
             return <dd><p className="imgp"><a href={ele.alt} target="_blank"><img src={ele.src} /></a></p><p className="textp"><a href={ele.alt} target="_blank">{ele.text}</a></p>
               <p>
                 {
                   ele.type.map(function(n,d){
                     return  <a href={ele.alt} target="_blank"><span className="tag">{n}</span></a>

                   })
                 }
               </p>
               <i>{ele.yeas}</i>
             </dd>
           })
         }
     </tr>
   )
 }
});

const Home = React.createClass({
  render(){
    return (
     <div id="home">
      <div className="color-overlay">

        <div className="navigation-header">
          <div className="navbar navbar-inverse bs-docs-nav navbar-fixed-top sticky-navigation" style={{opacity: 0, top: '-75px'}}>
            <div className="container">
              <div className="navbar-header">
                <button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#landx-navigation">
                  <span className="sr-only">Toggle navigation</span>
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                  <span className="icon-bar"></span>
                </button>
                <a className="navbar-brand" href="#"><img src={hexunlogo} alt="" /></a>
              </div>
            </div>
          </div>
          <div className="navbar non-sticky">
            <div className="container">
              <div className="navbar-header">
                <h1>和瓣电影小站</h1>
              </div>

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

        <div className="container">
          <div className="row">

            <div className="col-md-10 col-md-offset-1 intro-section">

              <h1 className="intro">
                Work hard, <span className="strong colored-text">experience</span> more.
              </h1>
            </div>
          </div>
        </div>
      </div>
     </div>
   )
  }
});

const Data = React.createClass({

  getDefaultProps: function(){
     return {
       data: json
     }
  },
  componentDidMount: function(){


  },
  render(){
    return (
      <div>
         <div className="ontheway">

             {
               this.props.data.map(function(ele,key){

                  let start = ele.recom,
                      alink = ele.alink,
                      title = ele.title,
                      pic = ele.pic,
                      info = ele.info;
                  return   <dl key={key}><dd>
                    <a href={alink} target="_blank"><img src={pic} alt={title} /></a>
                    <p className="name"><a href={alink}>{title}</a></p>
                    <p className="info">{info}</p>
                    <p>打分：<span className="star">{start}</span></p>
                  </dd></dl>
               })
             }

         </div>
      </div>
    )
  }
});

const Zhibo = React.createClass({
  render(){
    return <div className="video">
      <div className="mainvideo  ">
        <video id="sampleMovie" width="800" height="520" preload controls>
          <source src="../video/HTML5Sample_H264.mov" />
        </video>
        <div className="righttag">
          <a href="javascript:"><img src={hc} /></a>
        </div>
      </div>

      </div>
  }
});



const About = React.createClass({
  render(){
    return (
      <div className="about">
        <p><img src={require('../images/google.gif')} /></p>
        <p className="help-block">@by 数据均来源网络都有备注，豆瓣和讯等,登录本来想在当前页面完成，但是和讯网本身接口支持跨域跳转。</p>
        <p className="thiss">我就是我，不一样的烟火！</p>


      </div>
    )
  }
});

const Adright = React.createClass({
   render(){
     return(
       <div className="rightAd">
         <i>X</i>
         <span>本站广告</span>
         <iframe src="http://g.163.com/r?site=netease&affiliate=homepage&cat=homepage&type=logo300x250&location=3" width="100%"  height="100%"  marginWidth="0" marginHeight="0" scrolling="No" frameBorder="No" id="cdIfr"></iframe>
       </div>
     )
   }
});

export {Menuleftarea,Maincontent,App,Home,Seach,Data,Zhibo,About,Adright};

