import { useState } from 'react'
import { Button, Modal } from 'antd'
import { useDataFieldQuery } from '@/hooks/useQuery'
import AppList, { AppListProps } from '@/components/AppList'

export default function ViewDataFiledButtonModal({ children }: { children?: string }) {
  const [open, setOpen] = useState(false)

  const { data } = useDataFieldQuery()
  const listOptions: AppListProps = {
    queryKey: ['dataField'],
    columns: [
      {
        title: '序号',
        key: 'index',
        render(_value, _record, index) {
          return index + 1
        },
        width: 62,
        align: 'center',
      },
      { title: '字段名称', dataIndex: 'english_name', align: 'center' },
      { title: '字段类型', dataIndex: 'type_name', align: 'center' },
      { title: '长度', dataIndex: 'length', align: 'center' },
      { title: '小数点', dataIndex: 'point', align: 'center' },
      { title: '是否允许为空', dataIndex: 'null', align: 'center' },
      { title: '默认值', dataIndex: 'default', align: 'center' },
      { title: '备注', dataIndex: 'name', align: 'center' },
    ],
    dataSource: data || [],
  }
  return (
    <>
      <Button onClick={() => setOpen(true)}>{children ? children : '查看字段详细信息'}</Button>
      <Modal title="查看字段详细信息" width={1000} open={open} footer={null} onCancel={() => setOpen(false)}>
        <AppList rowKey="english_name" pagination={false} {...listOptions}></AppList>
      </Modal>
    </>
  )
}
