<template>
  <a-table
    :columns="columns"
    :row-key="data.id"
    :data-source="data"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template slot="name" slot-scope="name">
      {{ name.first }} {{ name.last }}
    </template>
  </a-table>
</template>

<script>
import request from "@/utils/request";
const columns = [
  {
    title: "Name",
    dataIndex: "name",
    sorter: true,
    width: "20%",
    scopedSlots: { custonRender: "name" }
  },
  {
    title: "Gender",
    dataIndex: "gender",
    filters: [
      { text: "Male", value: "male" },
      { text: "Female", value: "female" }
    ]
  },
  {
    title: "Email",
    dataIndex: "email"
  }
];
export default {
  data() {
    return {
      data: [],
      pagination: {},
      loading: false,
      columns
    };
  },
  mounted() {
    this.fetch();
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      this.pagination = pager;
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      });
    },
    fetch(params = {}) {
      this.loading = true;
      request({
        url: "/users",
        params: params,
        method: "get"
      }).then(res => {
        const pagination = { ...this.pagination };
        pagination.total = res.total;
        this.loading = false;
        this.data = res.items;
        this.pagination = pagination;
      });
    }
  }
};
</script>