import React, { useState } from 'react';
import { Space, Table, Input } from 'antd';

const UserList = () => {
  const alldata = [
    {
      key: '1',
      userName: 'xg',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '2',
      userName: 'John Brown',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '3',
      userName: 'darlin',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '4',
      userName: 'zulier',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '1',
      userName: 'xg',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '2',
      userName: 'John Brown',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '3',
      userName: 'darlin',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '4',
      userName: 'zulier',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '1',
      userName: 'xg',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '2',
      userName: 'John Brown',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '3',
      userName: 'darlin',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '4',
      userName: 'zulier',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '1',
      userName: 'xg',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '2',
      userName: 'John Brown',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '3',
      userName: 'darlin',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
    {
      key: '4',
      userName: 'zulier',
      regTime: Date.now(),
      loginStatus: '离线',
      level: '普通用户'
    },
  ];
  alldata.forEach((item, index) => {
    item.key = index + 1 + ''
  })
  let [data, setData] = useState(alldata)
  const double = (fn, time = 500) => {
    let timer = null
    return function(){
      if(timer != null) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        console.log(5555)
        fn.apply(this, arguments)
        timer = null
      }, time)
    }
  }
  const test = double(function() {
    console.log(arguments)
    let name = arguments[0]
    let val = arguments[1]
    let newData = alldata.filter((item) => {
      return JSON.stringify(item[name]).includes(val)
    })
    setData(newData)
  }, 1000)
  const columns = [
    {
      title: () => {
        return (
          <>
            <div className='tac'>用户名</div>
            <Input type="text" name='userName' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'userName',
      key: 'userName',
      render: (text) => <a>{text}</a>
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>注册时间</div>
            <Input type="text" name='regTime' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'regTime',
      key: 'regTime',
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>在线状态</div>
          </>
        )
      },
      dataIndex: 'loginStatus',
      key: 'loginStatus',
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>绑定手机号</div>
            <Input type="text" name='phone' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'phone',
      key: 'phone',
      render: (text) => {
        return (
          <span>135****8427</span>
        )
      }
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>邮箱</div>
            <Input type="text" name='emails' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'emails',
      key: 'emails',
      render: (text) => {
        return (
          <span>847****@qq.com</span>
        )
      }
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>用户等级</div>
            <Input type="text" name='level' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'level',
      key: 'level',
    }
  ];
  
  
  
  return (
    <Table columns={columns} dataSource={data} bordered pagination={{pageSize: 10}} />
  )
}

export default UserList;