import React, { Component } from "react";
import axios from "axios";
import { Spin, Pagination } from "antd";
import "./list.css";
import NoneData from "../Nodata";
import UserList from "./user_list"
class CommonUsers extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user_type: this.props.user_type,
      type_title: this.props.type_title,
      project_id: this.props.project_id,
      owner:this.props.owner,
      users: null,
      count: 0,
      limit: 20,
      page: 1,
      isSpin: false,
    };
  }

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

  getUsersList = (page, limit) => {
    this.setState({
      isSpin: true,
    });
    const { user_type, project_id ,owner } = this.state;
    const url = `/${owner}/${project_id}/${user_type}.json`;
    axios.get(url, {
      params: {
        page,
        limit,
      },
    }).then((result) => {
      if (result) {
        this.setState({
          count: result.data.count,
          users: result.data.users,
          isSpin: false,
        });
      }
    })
    .catch((error) => {
      console.log(error);
    });
  };

  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true,
    });
    const { limit } = this.state;
    this.getUsersList(page, limit);
  };
  
  Paginations =() => {
    const { count, page, limit } = this.state;
    return(
      <React.Fragment>
        {count > limit ? (
          <div className="mt50 mb30 edu-txt-center">
            <Pagination
              simple
              defaultCurrent={page}
              total={count}
              pageSize={limit}
              onChange={this.ChangePage}
            ></Pagination>
          </div>
        ) : (
          ""
        )}
      </React.Fragment>
    )
  };

  render() {
    const { users, count , isSpin, type_title } = this.state;
    
    return (
      <div className="pbt15">
        <div className="main background-f minH-670" style={{padding:"0px"}}>
          <div className="user-list-items">
            <div className="font-18 padding10-20 border-b-line">{type_title}</div>
            <Spin spinning={isSpin}>
              <div className="w-100 inline-block">
                {count === 0 ? (
                  <NoneData _html="暂时还没有相关数据!" />
                ) : (
                  <UserList 
                    users={users} 
                    userClass={'w-25'} 
                    successFunc={this.getUsersList} 
                    notReset={true}
                    {...this.props}
                  ></UserList>
                )}
              </div>
            </Spin>
            {this.Paginations()}
          </div>
        </div>
      </div>
    );
  }
}

export default CommonUsers;
