import { useState } from 'react'
import { Button, Flex, Modal } from 'antd'
import { useDataQuery } from '@/hooks/useQuery'
import DataRender from './DataRender'

export default function ViewDataButtonModal() {
  const [open, setOpen] = useState(false)

  const { data, isPending } = useDataQuery()

  const columns: any = data.title.map((item: any) => {
    return {
      title: item.name,
      dataIndex: item.english_name,
      align: 'center',
      minWidth: 120,
    }
  })

  return (
    <>
      <Button onClick={() => setOpen(true)}>查看我的数据集</Button>
      <Modal title="查看我的数据集" width={'80%'} open={open} footer={null} onCancel={() => setOpen(false)}>
        <Flex justify="space-between" style={{ marginBottom: 20 }}>
          <div>数据集名称:{data.info?.name}</div>
          <div>共计:{data.total}条数据</div>
        </Flex>
        <DataRender rowKey={'pk_id'} loading={isPending} dataSource={data.list} columns={columns} />
      </Modal>
    </>
  )
}
