import React, { useState, useEffect, useCallback } from 'react';
import PageHeader from '@/components/PageHeader';
import { useDebounceEffect } from 'ahooks';
import { FormattedMessage } from 'umi';
import styles from './index.less';
import cx from 'classnames';

import { Input, Table } from 'antd';
// import ShowModal from '../components/showModal';

export default function RecordList() {
  const columns = [
    {
      title: '申请日期',
      dataIndex: 'applyDate',
      sorter: {
        compare: (a, b) => a.chinese - b.chinese,
        multiple: 3,
      },
    },
    {
      title: '申请来源',
      dataIndex: 'applyFrom',
    },
    {
      title: '申请人',
      dataIndex: 'applyPerson',
      sorter: {
        compare: (a, b) => a.math - b.math,
        multiple: 2,
      },
    },
    {
      title: '加班空间',
      dataIndex: 'overSpace',
    },
    {
      title: '加班时间',
      dataIndex: 'overtime',
      sorter: {
        compare: (a, b) => a.english - b.english,
        multiple: 1,
      },
    },
  ];
  const pagination = {
    current: 1,
    total: 200,
    pageSize: 10,
  };

  const data = [
    {
      key: '1',
      applyDate: '2012/03/04',
      applyFrom: 98,
      applyPerson: 'John Brown',
      overSpace: 60,
      overtime: 70,
    },
    {
      key: '2',
      applyDate: '2012/03/04',
      applyFrom: 98,
      applyPerson: 'John Brown',
      overSpace: 60,
      overtime: 70,
    },
    {
      key: '3',
      applyDate: '2012/03/04',
      applyFrom: 98,
      applyPerson: 'John Brown',
      overSpace: 60,
      overtime: 70,
    },
    {
      key: '4',
      applyDate: '2012/03/04',
      applyFrom: 98,
      applyPerson: 'John Brown',
      overSpace: 60,
      overtime: 70,
    },
  ];

  const onChange = (pagination, filters, sorter, extra) => {
    console.log('params', pagination, filters, sorter, extra);
  };

  return (
    <div>
      <PageHeader
        title={<FormattedMessage id="menu.environment" />}
        action={
          <Input.Search
            size="large"
            allowClear
            style={{ width: '20%' }}
            placeholder={'搜索空间'}
            onSearch={(s) => {
              setSearchText(s || undefined);
            }}
          />
        }
      />
      <div>
        <Table columns={columns} dataSource={data} onChange={onChange} pagination={pagination} />
      </div>
    </div>
  );
}
