import React, { Component } from 'react';
import axios from 'axios';
import {Dropdown,Menu} from 'antd';
import {getImageUrl} from 'educoder';
import PathCard from "./ShixunPathCard";
import UpgradeModals from '../modals/UpgradeModals';
import Pagination from '@icedesign/base/lib/pagination';
import '@icedesign/base/lib/pagination/style.js';
import './ShixunPaths.css';

class ShixunPathSearch extends Component{
  constructor(props) {
      super(props)
      this.state = {
        order:"updated_at",
        select:undefined,
        search:"",
        page:1,
        pathList:null,
        sortList:'',
        total_count:0,
        sort:"desc",
        limit:16,
        discipline_id:undefined,
        sub_discipline_id:undefined
      }
  }


  //切换列表状态
  changeStatus=(value)=>{

    let {discipline_id,sub_discipline_id }=this.state;
    this.setState({
      order:value,
      page:1
    })
    this.getList(value,discipline_id,sub_discipline_id,1);
  }


  //选择页数
  onChange=(pageNumber)=> {

    let { order,discipline_id,sub_discipline_id }=this.state;
    this.setState({
      page:pageNumber
    })
    this.getList(order,discipline_id,sub_discipline_id,pageNumber);
  }

  //顶部分类
  changeSelect=(e,tag_id,sum)=>{

    this.setState({
      order:"updated_at",
      discipline_id:tag_id,
      page:1,
      sub_discipline_id:undefined
    })
    let { order }=this.state;
    this.getList(order,tag_id,undefined,1 );
    e.stopPropagation();
  }


  componentDidMount(){
		document.title="实践课程";
		const upsystem=`/users/system_update.json`;
		axios.get(upsystem).then((response)=>{
			let updata=response.data;
			this.setState({
				updata:updata
			})
		}).catch((error)=>{
			console.log(error);
		})
    this.getdisciplines()
		let { order,discipline_id,sub_discipline_id,page }=this.state;
    this.getList(order,discipline_id,sub_discipline_id,page );

  }

  getdisciplines=()=>{
    let url='/disciplines.json';
    axios.get(url,{params:{
        source:"subject"
      }}).then((result)=>{
      if(result.status==200){
          // console.log(result.data.disciplines)
        this.setState({
          sortList:result.data.disciplines
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  getList=(order,discipline_id,sub_discipline_id,page )=>{

    let url='/paths.json';
    axios.get(url,{params:{
        sort:"desc",
        limit:16,
        order:order,
				page:page,
        discipline_id:discipline_id,
        sub_discipline_id:sub_discipline_id
			}}).then((result)=>{
      if(result.status==200){
        this.setState({
          pathList:result.data.subjects,
          total_count:result.data.total_count
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  //头部获取是否已经登录了
  getUser=(url,type)=>{
    if(this.props.checkIfLogin()===false){
      this.props.showLoginDialog()
      return
    }
    if(this.props.checkIfProfileCompleted()===false){
      this.props.showProfileCompleteDialog()
      return
    }

    if(url !== undefined || url!==""){
      this.props.history.push(url);
    }


  }

  getshixunchildValues=(e,id,item)=>{

    this.setState({
      discipline_id:item.id,
      sub_discipline_id:id,
    })
    let { order,page }=this.state;
    this.getList(order,item.id,id,page );
    e.stopPropagation();
  }

  getmenu=(list,item)=>{
    return(
      <Menu>
        <Menu.Item>
          <div className="mt5 subshaicontent-part">
            <div className="sub-Item clearfix">
              {
                list.map((tag,e)=>{
                  return(
                    <a className={parseInt(this.state.sub_discipline_id)===tag.id?"shixun_repertoire mr20 color-blue":"shixun_repertoire mr20"}
                       key={e} id={tag.id} name={tag.id} rel="subshaicontent" onClick={(e)=>this.getshixunchildValues(e,tag.id,item)}>{tag.name}</a>
                  )
                })
              }
            </div>
          </div>
        </Menu.Item>
      </Menu>
      )
  }
	render() {
    let { order,sortList,search,page,total_count,discipline_id }=this.state;
    let pathstype=false;
    if(this.props&&this.props.mygetHelmetapi!=null){
      let paths="/paths";
      this.props.mygetHelmetapi.navbar.map((item,key)=>{
        var reg = RegExp(item.link);
        if(paths.match(reg)){
          if(item.hidden===true){
            pathstype=true
          }
        }

      })
    }

    return (
        <div>
					{this.state.updata===undefined?"":<UpgradeModals
							{...this.state}
						/>}

					<style>
						{
							`
					     ::-webkit-scrollbar {
                      width: 0px !important;
               }
							.pathImg{
									width: 100%;
									height: 300px;
									background-image: url(${getImageUrl(this.props.mygetHelmetapi&&this.props.mygetHelmetapi.subject_banner_url===null?`images/path/path.png`:this.props.mygetHelmetapi&&this.props.mygetHelmetapi.subject_banner_url)});
									background-color: #000a4f;
									/* background-size: cover; */
									background-position: center;
									background-repeat: no-repeat;
								}
								.ant-dropdown-menu{
								 max-width:1000px;
								}
								.ant-dropdown-menu-item, .ant-dropdown-menu-submenu-title{
								    white-space: normal !important;
								     line-height: 28px !important;
								}
								.ant-dropdown-menu-item:hover, .ant-dropdown-menu-submenu-title:hover{
								    background-color: #fff !important;
								}
								a{text-decoration:none !important;}
							`
						}
					</style>
          <div className="pr">
            <div className="pathImg"></div>
            <div className="edu-back-white padding20 pathIndexNav">
              <ul className="educontent clearfix">
                  <li className={discipline_id > 0 ? "" : "active"}><a onClick={(e)=>this.changeSelect(e,undefined)}>全部</a></li>
                  {
                    sortList && sortList.map((item,key)=>{
                      return(
                        <li className={discipline_id == `${item.id}` ? "active" : ""}  onClick={(e)=>this.changeSelect(e,`${item.id}`,item.sub_disciplines.length)} key={key}>
                          <Dropdown disabled={item.sub_disciplines.length===0} overlay={()=>this.getmenu(item.sub_disciplines,item)} placement="bottomCenter">
                            <a value={item.id}>{item.name}</a>
                          </Dropdown>
                        </li>
                      )
                    })
                  }
              </ul>
            </div>
          </div>
          <div className="mt20 educontent mb20 clearfix mainPageArray">
            {/*<a href="javascript:void(0)" className={ order == "publish_time" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("publish_time")}>全部</a>*/}
            {/*<a href="javascript:void(0)" className={ order == "mine" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("mine")}>我的</a>*/}
            <span className={ order == "updated_at" ? "active" : ""} onClick={ () => this.changeStatus("updated_at")}>最新</span>
            <span className={ order == "myshixuns_count" ? "active" : ""} onClick={ () => this.changeStatus("myshixuns_count")}>最热</span>
            {this.props.user&&this.props.user.main_site===false?"":this.props.Headertop===undefined?"":<a className={  "fr font-16 bestChoose color-blue"  }  onClick={(url)=>this.getUser("/paths/new")}>+新建实践课程</a>}
            {this.props.user&&this.props.user.main_site===true?"":this.props.Headertop===undefined?"":
              pathstype===true?"":this.props.user&&this.props.user.admin===true||this.props.user&&this.props.user.is_teacher===true||this.props.user&&this.props.user.business===true?<a className={  "fr font-16 bestChoose color-blue"  }  onClick={(url)=>this.getUser("/paths/new")}>+新建实践课程</a>:""
            }
            {/*<div className="fr mr5 search-new">*/}
              {/*/!* <Search*/}
              {/*placeholder="请输入路径名称进行搜索"*/}
              {/*id="subject_search_input"*/}
              {/*value={search}*/}
              {/*onInput={this.inputSearchValue}*/}
              {/*onSearch={this.searchValue}*/}
              {/*autoComplete="off"*/}
              {/*></Search> *!/*/}
            {/*</div>*/}
          </div>
          <PathCard {...this.props} {...this.state}></PathCard>
          {
						this.state.pathList===null?"":total_count > 16 &&
            <div className="educontent mb80 edu-txt-center mt10">
							<Pagination  current={page} total={ total_count || 1299 } type="mini" pageSize={16}  onChange={this.onChange} />
            </div>
          }

        </div>
      )
  }
}
export default ShixunPathSearch;