import React from 'react';
import Tag from '../tag';
import { ApolloTable } from '.';
// import Table from '../table';

// export default {
//   title: 'ApolloTable',
//   component: ApolloTable,
// };

export const 表格 = () => {
  const renderTable = (props?: any) => (
    <ApolloTable
      {...props}
      id="test"
      // bordered
      rowKey="id"
      // pagination={false}
      columns={[
        {
          title: 'title',
          dataIndex: 'title',
          filterType: 'input',
          search: {
            shortcut: true,
            tagRender: ({ label, ...rest }) => <Tag {...rest}>{label}</Tag>,
          },
        },
        {
          title: 'id',
          dataIndex: 'id',
          filterType: 'input',
          // filterType: 'select',
          // valueEnum: [{ label: '1', value: '1' }],
          search: {
            shortcut: true,
          },
        },
      ]}
      tableAlertRender={() => ({
        promotedBulkActions: [
          { content: '导出', onClick: () => [] },
          { content: '导入', onClick: () => [] },
        ],
      })}
      rowSelection={{}}
      //   title={() => '123'}
      dataSource={
        [
          // { id: 1, title: '123' },
          // { id: 2, title: '333' },
        ]
      }
      loading
      //   showHeader={false}
      options={false}
      // summary={() => (
      //   <Table.Summary.Row>
      //     <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>
      //     <Table.Summary.Cell index={1}>1234</Table.Summary.Cell>
      //   </Table.Summary.Row>
      // )}
      // footer={() => <div>123</div>}
    />
  );

  return (
    <div style={{ padding: 20 }}>
      {renderTable()}

      {/* {renderTable({ bordered: false })} */}
    </div>
  );
};