import React, { Component } from 'react';

import { Select, Input,Menu, Dropdown } from 'antd';

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

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

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

import './shixunCss/ShixunSearchBar.css';

import axios from 'axios';

const $ = window.$;

const Option = Select.Option;

const Search = Input.Search;


class ShixunSearchBar extends Component {

 constructor(props) {
      super(props)
      this.state = {
            status: undefined,
            diff: 0,
            InputValue: undefined,
            shixunhoverData: [],
            shixunchildValues:'',
          shixunsearchAllvalue:"a",
          openStatus:false,
          openLevel:false
      }
}

      //状态筛选
    status_search = (value) => {
        let newvalue = value;
        if (newvalue === "0") {
            newvalue = " "
        } else if (newvalue === "1") {
            newvalue = 2
        } else if (newvalue === "2") {
            newvalue = 1
        } else if (newvalue === "3") {
            newvalue = 3
        }

      this.setState({
          status: newvalue,
          openStatus:false
      })
        let list = [{'type': 1}, {'value': newvalue}];
      this.props.StatusEnquiry(list);
}

      //难度筛选
diff_search = (value) => {
      this.setState({
        diff: value,
        openLevel:false
      })
      let list=[{'type':2},{'value':value}];
      this.props.StatusEnquiry(list);
}

      //输入框搜索
Input_search = (value) => {
      this.setState({
          InputValue: value
      })
      this.props.OnSearchInput(value);
}
      //查询
shixunsearchAll = (e) => {
     let{shixunsearchAllvalue}=this.state;
    let id = e.target.value;

    if(shixunsearchAllvalue===id){
        return
    }
    if(id===0){
        id=" "
        this.setState({
            InputValue: " "
        })
        this.props.OnSearchInput("");
    }
    let list=[{'tag_level':1},{'tag_id':id}];
    if(id!=undefined){
        this.setState({
            shixunsearchAllvalue:id,
            shixunchildValues:""
        })
        this.props.Updatasearchlist(list);
    }

}

    shixunsearchall=(e)=>{
        let{shixunsearchAllvalue}=this.state;
        let id = "a";

        if(shixunsearchAllvalue===id){
            return
        }
        this.setState({
            shixunsearchAllvalue:"a",
            shixunchildValues:""
        })
        this.props.allUpdatashixunlist();
    }

					//选择Tab页详情
		getshixunchildValue = (e) => {
					 let id = e.target.name;
					 let newid=e.target.id;
					 let list=[{'tag_level':2},{'tag_id':id}];
					 if(id!=undefined||newid!=undefined){
						this.setState({
								shixunsearchAllvalue:newid
						})
						this.props.Updatasearchlist(list);
				}
		}

getshixunchildValues = (e) => {
    let id = e.target.id;
    let newid=e.target.name;
    let list=[{'tag_level':3},{'tag_id':id}];
    if(id!=undefined||newid!=undefined){
        this.setState({
            shixunchildValues:id,
            shixunsearchAllvalue:newid
        })
        this.props.Updatasearchlist(list);
    }

}

componentDidMount() {
      let hoverUrlArr = [];
      let hoverUrl = `/shixuns/menus.json`;
      axios.get(hoverUrl
      ).then((response) => {
            hoverUrlArr = response.data;
            // hoverUrlArr.reverse();
            this.setState({
                  shixunhoverData: hoverUrlArr
            })
      }).catch((error) => {
            console.log(error)
      })
}

render() {
    let {shixunhoverData, shixunchildValues, shixunsearchAllvalue, InputValue,openStatus,openLevel} = this.state;
    let {typepvisible} = this.props;
     // //实训首页筛选的移入和点击事件
     // $(".shaiItem").hover(function(){
     //      var hei=parseInt($(".shaiAllItem").height())-2;
     //     $(this).find(".subshaicontent").css("top", '34px');
     //      $(this).find(".subshaicontent").show();
     //  },function(){
     //      $(this).find(".subshaicontent").hide();
     //  });
		 //
     //  $(".shaiItem").live("click",function(){
     //      $(".shaiItem").removeClass("active");
     //      $(this).addClass("active");
     //      $(".subshaicontent").hide();
     //  });
		 //
     //  $(".subshaicontent").live("click", function(event){
     //      $(".subshaicontent").hide();
     //      event.stopPropagation();
     //  });

		 let overlaymenu=(item,id)=>(
				 <Menu>
					{
						item.map((list,k)=>{
							return(
								<Menu.Item>
								<div className="mt5 subshaicontent-part" key={k}>
									<a style={{ height: '20px' }} className={ "mb15 shixun_repertoire color-dark"}  name={list.id} id={id} onClick={this.getshixunchildValue}>{list.name}</a>
									<div className="sub-Item clearfix">
										{
											list.tags.map((tag,e)=>{
												return(
													<a className={parseInt(shixunchildValues)===tag.id?"shixun_repertoire active":"shixun_repertoire"} key={e} id={tag.id} name={id} rel="subshaicontent" onClick={this.getshixunchildValues}>{tag.name}</a>
												)
											})
										}
									</div>
								</div>
								</Menu.Item>
							)
						})
					}
				 </Menu>
		)

    return (
        <div className="edu-back-white" >
            <div className="educontent">
                <div className="pt40 pb40">
                    <div className="clearfix mb30 shaiContent">
                        <span className="shaiTitle fl mt3">方向：</span>
                        <div className="fl pr shaiAllItem">
                        <li className={shixunsearchAllvalue==="a"?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value= "a"    onClick={this.shixunsearchall}>全部</li>
													<style>
														{
															`
															.ant-dropdown{
														     width: 800px;
															}
															.shixun_repertoire{
																	cursor: pointer;
																	float: left;
																	margin-right: 20px;
																	color: #999;
																	cursor: pointer;
																	margin-bottom: 10px;
															}
															.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{
    															padding: 0px 12px;
															}
															.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
													      background:transparent !important;
															}
															`
														}
													</style>
													{
														shixunhoverData.map((item,key)=>{
															return(
																	<Dropdown overlay={overlaymenu(item.sub_repertoires,item.id)} key={key} placement=	{item.id<4?"bottomRight":item.id>=8?"bottomLeft":"bottomCenter"}>
																		<li  key={key} className={parseInt(shixunsearchAllvalue)===item.id?"shaiItem shixun_repertoire active":"shaiItem shixun_repertoire"} value={item.id}  onClick={this.shixunsearchAll}>
																			{item.name}
																		</li>
																	</Dropdown>
															)
														})
													}


                        </div>
                        </div>
                        <div className="clearfix">
                        <span className="shaiTitle fl mt6">筛选：</span>
													{
														<style>
															{`
															  .shaiItems{
																		padding: 3px 15px;
																		float: left;
																		border-radius: 4px;
																		color: #4C4C4C;
																		cursor: pointer;
																		margin-right: 15px;
																		display: block;
																		float:left;
																	}
																	.shaiItems.active {
																			background-color: #4CACFF!important;
																			color: #fff!important;
																	}
															`}
														</style>
													}
													<div className="fl pr shaiAllItem mt1">
														<li className={this.state.diff===0?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(0)}>全部难度</li>
														<li className={this.state.diff===1?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(1)}>初级</li>
														<li className={this.state.diff===2?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(2)}>中级</li>
														<li className={this.state.diff===3?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(3)}>中高级</li>
														<li className={this.state.diff===4?"shaiItems shixun_repertoire active":"shaiItems shixun_repertoire"}  onClick={()=>this.diff_search(4)}>高级</li>
													</div>

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

export default ShixunSearchBar;