/**
 * title: "可展开表格"
 * description: ""
 */
import React, { useState } from 'react';
import { Table } from '@alicloud/console-components';
import Actions, { LinkButton } from '@alicloud/console-components-actions';

const getDataSource = () => {
  const result: any[] = [];
  for (let i = 0; i < 5; i++) {
    result.push({
      id: 100306660940 + i,
      status: i % 2 === 0 ? '运行中' : '停用',
      type: '专用网络',
      title: '可以通过 expandedRowRender 额外渲染行',
    });
  }
  return result;
};

const render = () => {
  return (
    <Actions>
      <LinkButton onClick={() => {}}>
        操作项
      </LinkButton>
      <LinkButton onClick={() => {}}>
        操作项
      </LinkButton>
      <LinkButton onClick={() => {}}>
        操作项
      </LinkButton>
      <LinkButton onClick={() => {}}>
        操作项
      </LinkButton>
    </Actions>
  );
};

const expandedStyle = {
  borderWidth: 0,
  borderStyle: 'solid',
  borderColor: '#e5e5e5',
  padding: '16px',
  background: '#ffffff',
};

const centerStyle = {
  height: '128px',
  borderRadius: '4px',
  lineHeight: '128px',
  background: '#f6f6f6',
  textAlign: 'center',
} as const;

export default () => {
  const [dataSource] = useState(getDataSource());

  return (
    <Table
      dataSource={dataSource}
      expandedRowRender={() => (
        <div style={expandedStyle}>
          <div style={centerStyle}>Content Placeholder</div>
        </div>
      )}
    >
      <Table.Column title="实例ID/名称" dataIndex="id" width={200} />
      <Table.Column title="状态" dataIndex="status" />
      <Table.Column title="网络类型" dataIndex="type" />
      <Table.Column title="操作" cell={render} width={200} />
    </Table>
  );
};