import React, { useState } from 'react';
import { Space, Table, Input } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface DataType {
  key: string;
  userName: string;
  regTime: number;
  loginStatus: string;
  level: string;
  phone?: number;
  emails?: string;
}
const UserList: React.FC = () => {
  const alldata: DataType[] = [
    {
      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: Function, time: number = 500) => {
    let timer: any = null
    return function(this: any, ...reset: any){
      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: DataType) => {
      return JSON.stringify(item[name]).includes(val)
    })
    setData(newData)
  }, 1000)
  const columns: ColumnsType<DataType> = [
    {
      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;