import React, { Component } from "react";
import { Input, Spin, Pagination } from "antd";
import { Link } from 'react-router-dom';
import axios from "axios";
import Nodata from "../Nodata";
import UserList from "../UsersList/user_list";
const Search = Input.Search;
class CommonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      page: 1,
      limit: 30,
      users: undefined,
      search: undefined,
      total: undefined,
    };
  }

  componentDidMount = () => {
    this.get_watchers();
  };

  get_watchers = () => {
    const { userType, match: { params: { username } } } = this.props;
    const url = `/users/${username}/${userType}.json`;
    const { page, limit, search } = this.state;
    this.setState({
      isSpin: true,
    });
    axios.get(url, {
      params: {
        page,
        limit,
        search,
      },
    }).then((result) => {
      if (result && result.data) {
        this.setState({
          users: result.data.users,
          total: result.data.count,
          isSpin: false
        });
      }
    }).catch((error) => {
      this.setState({
        isSpin: false,
      });
    });
  };

  //切换页数
  changePage = (page) => {
    this.state.page = page;
    this.get_watchers();
  };

  changeSearchValue = (e) => {
    this.setState({
      search: e.target.value,
    });
  };

  successFunc=()=>{
    const { fetchUser } = this.props;
    this.get_watchers();
    fetchUser && fetchUser();
  }

  render() {
    const { users, isSpin, total, search, limit, page } = this.state;
    const { userType, login, current_user } = this.props;
    const title_type =( current_user && login === current_user.login) ? "我" : "TA"

    const pagination =
      total && total > limit ? (
        <div className="edu-txt-center pt30 mb30">
          <Pagination
            simple
            defaultCurrent={page}
            total={total}
            pageSize={limit}
            onChange={this.changePage}
          ></Pagination>
        </div>
      ) : (
        ""
      );

    return (
      <Spin spinning={isSpin}>
        <div className="minH-670">
          <div className="grid-item pb20 bbt">
            <h3 style={{marginBottom:"0px"}}>
              <Link to={`/${login}`} ><i className="iconfont icon-zuojiantou color-grey-9 font-16 mr8"></i></Link>
              {userType === "watch_users" ? `${title_type}关注的` : `关注${title_type}的`}
            </h3>
            <div className="text-right">
              <Search
                placeholder="输入名称进行搜索"
                enterButton="搜索"
                size="large"
                onSearch={this.get_watchers}
                className="list-r-Search"
                value={search}
                onChange={this.changeSearchValue}
              />
            </div>
          </div>

          {users && users.length > 0 ? (
            <div className="w-100 inline-block">
              <UserList 
                users={users} 
                userClass={"w-33"} 
                type_title={'关注列表'} 
                current_user={current_user} 
                successFunc={this.successFunc} 
                notReset={(userType === "watch_users" && title_type === "我") ? false : true}
                title_type={title_type}
              />
            </div>
          ) : (
            <Nodata _html={`暂时没有数据～`} />
          )}
          <div className="w-100">{pagination}</div>
        </div>
      </Spin>
    );
  }
}
export default CommonList;
