import { DownOutlined, ExportOutlined } from '@ant-design/icons';
import type { MenuProps, TableProps, TabPaneProps, TabsProps } from 'antd';
import { Button, ConfigProvider, Dropdown, Menu, Table, Tabs } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
import React, { useMemo } from 'react';
import useSettings from '../vm-hooks/useSettings';
import './style';

interface VMTableProps extends TableProps<any> {
    isIndex?: boolean;
    height?: number;
}

const VMTable: React.FC<VMTableProps> = (props) => {
    const {
        rowKey = 'id',
        isIndex = true,
        columns,
        pagination = false,
        height = 120,
        dataSource = [],
        ...ext
    } = props;
    const newColumns = useMemo(() => {
        const result = isIndex
            ? columns
                ? [
                      {
                          title: '序号',
                          render: (_: any, __: any, index: number) => {
                              if (
                                  pagination &&
                                  typeof pagination?.current === 'number' &&
                                  typeof pagination?.pageSize === 'number'
                              ) {
                                  return (
                                      (pagination?.current - 1) * pagination?.pageSize + index + 1
                                  );
                              } else {
                                  return index + 1;
                              }
                          },
                          width: 50,
                      },
                      ...columns,
                  ]
                : undefined
            : columns;
        if (result) {
            for (const col of result) {
                if (!col.width) col.width = 70;
            }
        }
        return result;
    }, [columns, pagination]);
    const { theme } = useSettings();
    return (
        <ConfigProvider locale={zhCN}>
            <Table
                className={`vm-table ${theme}`}
                rowKey={rowKey}
                size="small"
                scroll={{ y: height, scrollToFirstRowOnChange: true }}
                columns={newColumns}
                pagination={
                    pagination
                        ? {
                              // showQuickJumper: true,
                              size: 'default',
                              showSizeChanger:false,
                            //   hideOnSinglePage: true,
                              showTotal: (total) => `共${total}条`,
                              ...pagination,
                          }
                        : false
                }
                dataSource={dataSource}
                {...ext}
            />
        </ConfigProvider>
    );
};

/**
 * 表格导出按钮
 * @param props
 * @returns
 */

interface ExportBtnProps {
    onClick?: (key: string) => void;
    items?: MenuProps['items'];
}
export const ExportBtn: React.FC<ExportBtnProps> = (props) => {
    const { onClick, items } = props;
    const { theme } = useSettings();
    const menu = (
        <Menu
            onClick={(menuItem) => onClick&&onClick(menuItem.key)}
            items={
                items || [
                    {
                        label: '导出选中行',
                        key: 'select-rows',
                    },
                    {
                        label: '导出当前页',
                        key: 'current-page',
                    },
                    {
                        label: '导出全部',
                        key: 'all',
                    },
                ]
            }
        />
    );
    return (
        <Dropdown
            overlay={menu}
            trigger={['click']}
            className={`vtx-export-btn ${theme}`}
            overlayClassName={`vtx-export-dropdown ${theme}`}
        >
            <Button type="primary" style={{ padding: '0 10px' }}>
                <ExportOutlined />
                导出
                <DownOutlined />
            </Button>
        </Dropdown>
    );
};

export const renderColumnParam = (cols: Array<{ title: string; dataIndex: string }>) => {
    let colsParam: Array<{ title: string; field: string }> = [];
    cols.forEach((item) => {
        colsParam.push({
            title: item.title,
            field: item.dataIndex,
        });
    });
    return JSON.stringify(colsParam);
};

const { TabPane } = Tabs;

export const TableTabs = (props: TabsProps) => {
    const { theme } = useSettings();
    return (
        <Tabs {...props} className={`vtx-table-tabs ${theme}`}>
            {props.children}
        </Tabs>
    );
};

export const TableTabsPane = (props: TabPaneProps) => {
    return <TabPane {...props} style={{ display: 'none' }} />;
};

export default VMTable;
//# sourceMappingURL=index.jsx.map
