import React, { Key, useState } from 'react';
import { Row, Col, Table, Radio, Space } from '@btri-ui/base';
import { ColumnsType } from '@btri-ui/base/lib/Table';

interface DataType {
  key: Key;
  title1: string;
  title2: string;
  title3: string;
  title4: string;
}

const columns: ColumnsType<DataType> = [
  {
    title: '标题1',
    dataIndex: 'title1',
  },
  {
    title: '标题2',
    dataIndex: 'title2',
  },
  {
    title: '标题3',
    dataIndex: 'title4',
  },
  {
    title: '标题4',
    dataIndex: 'title4',
  },
];

const data: DataType[] = [
  {
    key: 1,
    title1: '内容1',
    title2: '内容2',
    title3: '内容3',
    title4: '内容4',
  },
];

export default () => {
  const [size, setSize] = useState('default');
  return (
    <Space size="S" direction="vertical" style={{ width: '100%' }}>
      <Row autoMode={true}>
        <Col span={6}>
          <Radio.Group
            defaultValue="default"
            onChange={(e) => {
              setSize(e.target.value);
            }}
          >
            <Radio.Button value="small">小尺寸</Radio.Button>
            <Radio.Button value="middle">中尺寸</Radio.Button>
            <Radio.Button value="default">大尺寸</Radio.Button>
          </Radio.Group>
        </Col>
      </Row>
      <Row autoMode={true}>
        <Col span={24}>
          <Table columns={columns} dataSource={data} size={size} />
        </Col>
      </Row>
    </Space>
  );
};