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

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

const options = [
  { label: '选项一', value: '1' },
  { label: '选项二', value: '2' },
  { label: '选项三', value: '3' },
  { label: '选项四', value: '4' },
  { label: '选项五', value: '5' },
  { label: '选项六', value: '6' },
];

const columns: ColumnsType<DataType> = [
  {
    title: '标题1',
    dataIndex: 'title1',
  },
  {
    title: '标题2',
    dataIndex: 'title2',
    render: () => <Input placeholder="请选择"></Input>,
  },
  {
    title: '标题3',
    dataIndex: 'title4',
    render: value => (
      <Space size="XXXS">
        <div>{value}</div>
        <Select options={options} placeholder="请选择"></Select>
      </Space>
    ),
  },
  {
    title: '操作',
    dataIndex: 'action',
    actions: () => [<a>编辑</a>, <a>删除</a>],
  },
];

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

export default () => {
  return (
    <Row autoMode={true}>
      <Col span={24}>
        <Table columns={columns} dataSource={data} />
      </Col>
    </Row>
  );
};