// 蓝色系列表格样式
import type { TableProps } from 'antd';
import { ConfigProvider, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import styles from './index.less';
export interface BlueTableProps extends TableProps<any> {
  serial?: boolean; //是否开启序列
  serialName?: string; //序列名
}
export type TableColumnsType = ColumnsType<Record<string, any>>;

const BlueTable = (props: BlueTableProps) => {
  const { serial, columns, pagination = false, serialName } = props;
  const serialOpt = {
    title: serialName ?? '名次',
    dataIndex: 'serialNumber',
    render: (text: number) => <span>{text}</span>,
    width: 80,
    align: 'center',
  };
  const resetColuns: any = serial ? [serialOpt, ...columns!] : columns;

  return (
    <ConfigProvider
      theme={{
        components: {
          Table: {
            headerBg: 'transparent', //表头背景
            colorBgContainer: 'transparent',
            headerColor: '#6A738E',
            rowHoverBg: 'rgba(57, 122, 183, 0.2)', //移入背景
            borderColor: 'rgba(57, 122, 183, 0.2)', //边框颜色
            headerSplitColor: 'rgba(57, 122, 183, 0.2)', //分割线颜色
            cellFontSize: 16,
            cellFontSizeSM: 16,
            headerBorderRadius: 20,
          },
        },
      }}
    >
      <Table
        className={styles.tablewrap}
        bordered={false}
        rowClassName={styles.tablerow}
        {...props}
        pagination={pagination}
        columns={resetColuns}
      />
    </ConfigProvider>
  );
};

export default BlueTable;
