import React from "react";
import styles from "./index.less";
import { Table } from "antd";
// import reqwest from "reqwest";
import request from '@/utils/request';

const columns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    render: (name: any) => `${name.first} ${name.last}`,
    width: "20%"
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" }
    ],
    width: "20%"
  },
  {
    title: "Email",
    dataIndex: "email"
  }
];

class App extends React.Component {
  state: any = {
    data: [],
    pagination: {},
    loading: false
  };

  componentDidMount() {
    this.fetch();
  }

  handleTableChange = (pagination: any, filters: any, sorter: any) => {
    const pager: any = { ...this.state.pagination };
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.fetch({
      results: pagination.pageSize,
      page: pagination.current,
      sortField: sorter.field,
      sortOrder: sorter.order,
      ...filters
    });
  };

  fetch = (params = {}) => {
    console.log("params:", params);
    this.setState({ loading: true });
    request('https://randomuser.me/api', {
      method: 'get',
      data: {
        results: 10,
        ...params,
        type: "json"
      },
    }).then((data: any) => {
      const pagination = { ...this.state.pagination };
      // Read total count from server
      // pagination.total = data.totalCount;
      console.log(data)
      pagination.total = 200;
      this.setState({
        loading: false,
        data: (data && data.results) || [],
        pagination
      });
    });
  };

  render() {
    return (
      <Table
        columns={columns}
        rowKey={(record: any) => record.login.uuid}
        dataSource={this.state.data}
        pagination={this.state.pagination}
        loading={this.state.loading}
        onChange={this.handleTableChange}
      />
    );
  }
}

export default () => (
  <div className={styles.container}>
    <div id="components-table-demo-ajax">
      <App />
    </div>
  </div>
);