import {
  Button,
  Pagination,
  PaginationProps,
  Popconfirm,
  PopconfirmProps,
  Space,
  Table,
} from "antd";
import { useState } from "react";
const BTable = (props: any) => {
  const {
    store,
    dataSource,
    selectCallback,
    scroll,
    editCallback,
    deleteCallback,
    actionCloumn,
  } = props;
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
    selectCallback(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  const onShowSizeChange = (current, pageSize) => {
    store.setPages({
      Offset: current,
      Size: pageSize,
    });
  };
  const onChange: PaginationProps["onChange"] = (page) => {
    store.setPages({
      Offset: page,
      Size: 20,
    });
  };
  const cancel: PopconfirmProps["onCancel"] = (e) => {};

  const actionDefultColumn = {
    title: "操作",
    fixed: "right",
    with: 200,
    render: (any, record) => (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            editCallback(record);
          }}
        >
          编辑
        </Button>
        {actionCloumn ? actionCloumn(record) : null}
        <Popconfirm
          title="删除确认"
          description="您是否需要删除该数据?"
          onConfirm={() => {
            deleteCallback(record.identity);
          }}
          onCancel={cancel}
          okText="Yes"
          cancelText="No"
        >
          <Button type="dashed" danger size="small">
            删除
          </Button>
        </Popconfirm>
      </Space>
    ),
  };
  return (
    <>
      <Table
        style={{ height: "100%", overflow: "auto" }}
        pagination={false}
        scroll={scroll}
        loading={store.listStatus}
        rowSelection={rowSelection}
        columns={[...props.columns, actionDefultColumn]}
        dataSource={dataSource}
      />
      <div style={{ textAlign: "right", padding: "10px" }}>
        <Pagination
          size="small"
          defaultCurrent={1}
          pageSize={20}
          showSizeChanger={true}
          total={store.total}
          onShowSizeChange={onShowSizeChange}
          onChange={onChange}
        />
      </div>
    </>
  );
};

export default BTable;