import React, { useState } from 'react';
import { Space, Table, Input, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { PlusCircleOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'
interface DataType {
  key: string;
  movieName: string;
  regTime: number;
  movieType: string;
  address: string;
  star?: string;
  grade?: number;
}
const UserList: React.FC = () => {
  const alldata: DataType[] = [
    {
      key: '1',
      movieName: '红番区',
      regTime: Date.now(),
      movieType: '动作',
      star: '成龙',
      address: '美国',
      grade: 8.8
    },
    {
      key: '2',
      movieName: '黑侠',
      regTime: Date.now(),
      movieType: '动作',
      star: '李连杰',
      address: '美国',
      grade: 8.8
    },
    {
      key: '3',
      movieName: '开心鬼撞鬼',
      regTime: Date.now(),
      movieType: '喜剧',
      star: '黄百鸣',
      address: '大陆',
      grade: 8.8
    },
  ];
  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(() => {
        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='movieName' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'movieName',
      key: 'movieName',
      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: 'movieType',
      key: 'movieType',
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>评分</div>
            <Input type="text" name='grade' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'grade',
      key: 'grade'
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>主演</div>
            <Input type="text" name='star' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'star',
      key: 'star'
    },
    {
      title: () => {
        return (
          <>
            <div className='tac'>地区</div>
            <Input type="text" name='address' size='small' onChange={(e) => {
              test(e.target.name, e.target.value)
            }} />
          </>
        )
      },
      dataIndex: 'address',
      key: 'address',
    }
  ];
  
  const navigate = useNavigate()
  
  return (
    <>
      <div className='mb15'>
        <Button type="primary" icon={<PlusCircleOutlined />} onClick={() => {
          navigate('/movieAdd')
        }}>
          新增
        </Button>
      </div>
      <Table columns={columns} dataSource={data} bordered pagination={{pageSize: 10}} />
    </>
  )
}

export default UserList;