import React, { useMemo } from 'react';
import { DownOutlined, ExportOutlined } from '@ant-design/icons';
import PropTypes from 'prop-types';
import { Button, Dropdown, Menu, Table, Tabs, ConfigProvider } from 'antd';
import useSettings from '../vm-hooks/useSettings';
import zhCN from 'antd/es/locale/zh_CN';

import './style';
const VMTable = props => {
    const { columns, pagination, ...ext } = props;
    const newColumns = useMemo(() => {
        const result = columns
            ? [
                  {
                      title: '序号',
                      render: (_, __, index) =>
                          (pagination.current - 1) * pagination.pageSize + index + 1,
                      width: 50,
                  },
                  ...columns,
              ]
            : undefined;
        for (const col of result) {
            if (!col.width) col.width = 60;
        }
        return result;
    }, [columns, pagination]);
    const { theme } = useSettings();
    return (
        <ConfigProvider locale={zhCN}>
            <Table
                className={`vtx-modal-table ${theme}`}
                rowKey="id"
                size="small"
                scroll={{ x: 1500, y: 400 }}
                columns={newColumns}
                pagination={{ showQuickJumper: true, size: 'default', ...pagination }}
                {...ext}
            />
        </ConfigProvider>
    );
};

VMTable.propTypes = {
    columns: PropTypes.array,
    pagination: PropTypes.object,
};

/**
 * 表格导出按钮
 * @param props
 * @returns
 */
export const ExportBtn = props => {
    const { onClick, items } = props;
    const { theme } = useSettings();
    const menu = (
        <Menu
            onClick={menuItem => 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>
    );
};

ExportBtn.propTypes = {
    onClick: PropTypes.func,
    items: PropTypes.array,
};
export const renderColumnParam = cols => {
    let colsParam = [];
    cols.map(item => {
        colsParam.push({
            title: item.title,
            field: item.dataIndex,
        });
    });
    return JSON.stringify(colsParam);
};

const { TabPane } = Tabs;

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

TableTabs.propTypes = {
    children: PropTypes.element,
};
export const TableTabsPane = props => {
    return <TabPane {...props}>{props.children}</TabPane>;
};

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