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

interface DataType {
  key: React.Key;
  title1: string;
  title2: string;
  title3: string;
  title4: string;
  description?: string;
}

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

export default () => {
  const columns: ColumnsType<DataType> = [
    {
      title: '标题1',
      dataIndex: 'title1',
    },
    {
      title: '标题2',
      dataIndex: 'title2',
    },
    {
      title: '标题3',
      dataIndex: 'title4',
    },
    {
      title: '标题4',
      dataIndex: 'title4',
    },
    {
      title: 'Action',
      dataIndex: '',
      key: 'x',
      actions: () => [<a>编辑</a>, <a>删除</a>],
      width: 150,
    },
  ];
  return (
    <Row autoMode={true}>
      <Col span={24}>
        <Table
          columns={columns}
          dataSource={data}
          expandable={{
            expandedRowRender: record => (
              <p style={{ margin: 0 }}>{record.description}</p>
            ),
            rowExpandable: record => record.name !== 'Not Expandable',
          }}
        />
      </Col>
    </Row>
  );
};