import React from 'react';
import { ProTable } from '@ant-design/pro-components'
import { Button, Popconfirm, message } from 'antd'
import { UploadOutlined, PlusOutlined } from '@ant-design/icons'
import { queryTable } from '@/utils/request'
import renderActions from './components/Actions'

function XTable(props, ref) {
  /**
   * request 与 ProTable 定义不同，这个只是普通的接口即可
   */
  const {
    request,
    rowKey,
    columns,
    onAdd,
    onDelete,
    onEdit,
    onDetail,
    onExport,
    toolBarRender,
    columnOptionRender,
    option = true,
    ...leftProps
  } = props;
  const actionRef = React.useRef();
  const paramsRef = React.useRef({});
  const api = React.useMemo(() => request ? queryTable(request, { paramsCallback: x => paramsRef.current = x }) : undefined, [request]);

  // 统一实现操作列
  const newColumns = React.useMemo(
    () => [
      ...columns,
      option ? {
        title: '操作',
        key: 'option',
        fixed: 'right',
        search: false,
        width: 120,
        render: (_, record) => renderActions([
            onDetail && (
              <Button
                style={{ padding: 0 }}
                type="link"
                key="detail"
                onClick={() => onDetail(record)}
              >
                详情
              </Button>
            ),
            onEdit && (
              <Button
                style={{ padding: 0 }}
                type="link"
                key="edit"
                onClick={() => onEdit(record)}
              >
                编辑
              </Button>
            ),
            onDelete && (
              <Popconfirm
                key="delete"
                title="您是否确认删除 ?"
                onConfirm={() => onDelete(record, () => actionRef.current?.reload())}
                okText="确定"
                cancelText="取消"
              >
                <Button style={{ padding: 0 }} type="link" danger>
                  删除
                </Button>
              </Popconfirm>
            ),
            ...(columnOptionRender ? columnOptionRender(_, record) : []),
          ].filter(Boolean)),
      } : false,
    ].filter(Boolean),
    [columns, option, onEdit, onDelete]
  );

  React.useImperativeHandle(ref, () => actionRef.current);

  return (
    <ProTable
      rowKey={rowKey}
      columns={newColumns}
      request={api}
      cardBordered
      actionRef={actionRef}
      form={{
        // syncToUrl: true,
        // syncToInitialValues: false,
      }}
      scroll={{ x: 'max-content' }}
      toolBarRender={() =>
        [
          onAdd && (
            <Button
              key="add"
              type="primary"
              icon={<PlusOutlined />}
              onClick={onAdd}
            >
              新增
            </Button>
          ),
          onExport && (
            <Button
              ghost
              key="export"
              type="primary"
              onClick={() => onExport(paramsRef.current)}
              icon={<UploadOutlined />}
            >
              导出
            </Button>
          ),
          ...(toolBarRender ? toolBarRender() : []),
        ].filter(Boolean)
      }
      {...leftProps}
    />
  );
}

export default React.forwardRef(XTable);
