import React from 'react'
import { message } from 'antd'
import Page from './index'
import XTable from '../XTable'

export default React.forwardRef((props, ref) => {
  /**
   * request 与 ProTable 定义不同，这个只是普通的接口即可
   */
  const {
    attach,
    ...leftProps
  } = props
  const [loading, setLoading] = React.useState(false);
  const actionRef = React.useRef()
  const hideRef = React.useRef()

  React.useImperativeHandle(
    ref,
    () => {
      const showLoading = (msg) => (hideRef.current = message.loading(msg || '操作中, 请稍候...'))
      const hideLoading = () => hideRef.current && hideRef.current()
      const reload = () => actionRef.current?.reload && actionRef.current.reload()

      return {
        showLoading,
        hideLoading,
        reload,
        setLoading,
        actionRef: actionRef,
      }
    },
    []
  )

  return (
    <Page>
      {attach}
      <XTable
        ref={actionRef}
        loading={loading}
        {...leftProps}
      />
    </Page>
  )
})
