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

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';
import KeywordList from '../tpm/shixuns/shixun-keyword-list';
import btnUrl from '../tpm/shixuns/btn-new.png';

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
    }
  }

  //适配器
  onChangeLabel(value) {
    let rs = value === 'new' ? 'updated_at' : 'myshixuns_scount'
    let { discipline_id, sub_discipline_id } = this.state;
    this.setState({
      order: rs,
      page: 1
    })
    this.getList(rs, 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);
    })
  }

  OnSearchInput = (value, type) => {
    this.setState({
      search: value,
      page: 1
    })
    const { order, discipline_id, sub_discipline_id } = this.state
    this.getList(order, discipline_id, sub_discipline_id, 1, value)
  }

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

    let url = '/paths.json';
    axios.get(url, {
      params: {
        sort: "desc",
        limit: 16,
        order: order,
        keyword,
        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) => {
    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>
        <KeywordList btnUrl={btnUrl} onChangeLabel={this.onChangeLabel.bind(this)} OnSearchInput={this.OnSearchInput.bind(this)} onNewHandler={this.getUser.bind(this, '/paths/new')} btnStyle={{ top: '92px' }} />

        <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;