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 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:"publish_time",
        select:0,
        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(){
    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).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);
    })
  }

  render() {
    let { order,sortList,search,page,total_count,select }=this.state;
      return (
        <div>

          <div className="path-head pr">
            <div className="edu-txt-center pathNavLine">
              <div className="inline path-nav">
                  <li className={select > 0 ? "" : "active"}><a href="/paths">全部</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>
            <a href="javascript:void(0)" className={ order == "updated_at" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("updated_at")}>最新</a>
            <a href="javascript:void(0)" className={ order == "myshixun_count" ? "fl mr20 font-16 bestChoose active" : "fl mr20 font-16 bestChoose"} onClick={ () => this.changeStatus("myshixun_count")}>最热</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>
          {
            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} />