educoder/public/react/src/modules/paths/ShixunPathSearch.js

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


const Search = Input.Search;

class ShixunPathSearch extends Component{
  constructor(props) {
      super(props)
      this.state = {
        order:"updated_at",
        select:undefined,
        search:"",
        page:1,
        pathList:'',
        sortList:'',
        total_count:0
      }
  }
  //切换列表状态
  changeStatus=(value)=>{
    let {select,search}=this.state;
    this.setState({
      order:value,
      page:1
    })
    this.getList(value,select,search,1);
  }
  //搜索输入
  inputSearchValue=(e)=>{
    this.setState({
      search:e.target.value,
      page:1
    })
  }
  //搜索
  searchValue=(e)=>{
    let {order,select,search}=this.state;
    this.setState({
      page:1
    })
    this.getList(order,select,search,1 );
  }
  //选择页数
  onChange=(pageNumber)=> {
    let {order,select,search}=this.state;
    this.setState({
      page:pageNumber
    })
    this.getList(order,select,search,pageNumber);
  }

  //顶部分类
  changeSelect=(tag_id)=>{
    let { order,search }=this.state;
    this.setState({
      select:tag_id
    })
    this.getList( order,tag_id,search,1 );
  }


  componentDidMount(){
		const upsystem=`/users/system_update.json`;
		axios.get(upsystem).then((response)=>{
			let updata=response.data;
			this.setState({
				updata:updata
			})
		}).catch((error)=>{
			console.log(error);
		})

		let { order,select,search,page }=this.state;
    this.getList(order,select,search,page );
  }


  getList=(order,select,search,page )=>{
    
    let url='/paths.json';
			// '?order='+order+'&page='+page;
    // if(select!=""){
    //   url+='&select='+select;
    // }
    // if(search!=""){
    //   url+='&search='+search;
    // }
    axios.get(url,{params:{
				order:order,
				page:page,
				select:select,
				// search:search
			}}).then((result)=>{
      if(result.status==200){
        this.setState({
          sortList:result.data.tags,
          pathList:result.data.subjects,
          total_count:result.data.total_count
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }


	setHistoryFun=(url)=>{
		this.props.history.push(url)
	}

	render() {
    let { order,sortList,search,page,total_count,select }=this.state;
      return (
        <div>
					{this.state.updata===undefined?"":<UpgradeModals
							{...this.state}
						/>}
          <div className="path-head pr">
            <div className="edu-txt-center pathNavLine">
              <div className="inline path-nav">
                  <li className={select > 0 ? "" : "active"}><a onClick={()=>this.changeSelect(null)}>全部</a></li>
                  {
                    sortList && sortList.map((item,key)=>{
                      return(
                        <li className={select == `${item.tag_id}` ? "active" : ""}><a value={item.tag_id} onClick={()=>this.changeSelect(`${item.tag_id}`)}>{item.tag_name}</a></li>
                      )
                    })
                  }
              </div>
            </div>
          </div>
          <div className="mt20 educontent mb20 clearfix">
            {/*<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" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("updated_at")}>最新</span>
            <span className={ order == "myshixun_count" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("myshixun_count")}>最热</span>
            {/*<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>
          {
            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;


//         <Pagination showQuickJumper defaultCurrent={page} current={page} pageSize={16} total={total_count} onChange={this.onChange} />