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

// const columns = [
//   {
//     title: 'Name',
//     dataIndex: 'name',
//     key: 'name',
//   },
//   {
//     title: 'Age',
//     dataIndex: 'age',
//     key: 'age',
//     width: '12%',
//   },
//   {
//     title: 'Address',
//     dataIndex: 'address',
//     width: '30%',
//     key: 'address',
//   },
// ];
// const data = [
//   {
//     key: 1,
//     name: 'John Brown sr.',
//     age: 60,
//     address: 'New York No. 1 Lake Park',
//     children: [
//       {
//         key: 11,
//         name: 'John Brown',
//         age: 42,
//         address: 'New York No. 2 Lake Park',
//       },
//       {
//         key: 12,
//         name: 'John Brown jr.',
//         age: 30,
//         address: 'New York No. 3 Lake Park',
//         children: [
//           {
//             key: 121,
//             name: 'Jimmy Brown',
//             age: 16,
//             address: 'New York No. 3 Lake Park',
//           },
//         ],
//       },
//       {
//         key: 13,
//         name: 'Jim Green sr.',
//         age: 72,
//         address: 'London No. 1 Lake Park',
//         children: [
//           {
//             key: 131,
//             name: 'Jim Green',
//             age: 42,
//             address: 'London No. 2 Lake Park',
//             children: [
//               {
//                 key: 1311,
//                 name: 'Jim Green jr.',
//                 age: 25,
//                 address: 'London No. 3 Lake Park',
//               },
//               {
//                 key: 1312,
//                 name: 'Jimmy Green sr.',
//                 age: 18,
//                 address: 'London No. 4 Lake Park',
//               },
//             ],
//           },
//         ],
//       },
//     ],
//   },
//   {
//     key: 2,
//     name: 'Joe Black',
//     age: 32,
//     address: 'Sidney No. 1 Lake Park',
//   },
// ]; // rowSelection objects indicates the need for row selection

interface DataType {
  key: Key;
  title1: string;
  title2: string;
  title3: string;
  title4: string;
  children?: Array<DataType>;
}
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',
  },
  {
    key: 2,
    title1: '内容1',
    title2: '内容2',
    title3: '内容3',
    title4: '内容4',
    children: [
      {
        key: 11,
        title1: '内容1',
        title2: '内容2',
        title3: '内容3',
        title4: '内容4',
        children: [
          {
            key: 11,
            title1: '内容1',
            title2: '内容2',
            title3: '内容3',
            title4: '内容4',
          },
        ],
      },
    ],
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(
      `selectedRowKeys: ${selectedRowKeys}`,
      'selectedRows: ',
      selectedRows,
    );
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

const App = () => {
  const [checkStrictly, setCheckStrictly] = useState(false);
  return (
    <>
      <Row>
        <Col span={24}>
          <Table columns={columns} dataSource={data} />
        </Col>
      </Row>
    </>
  );
};

export default App;