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

const data = [
  {
    id: 1,
    name: '实例名称',
    status: '成功',
    type: '专有网络',
    children: [
      {
        id: 11,
        name: '实例名称',
        status: '成功',
        type: '专有网络',
      },
      {
        id: 12,
        name: '实例名称',
        status: '成功',
        type: '专有网络',
        children: [
          {
            id: 121,
            name: '实例名称',
            status: '失败',
            type: '专有网络',
          },
        ],
      },
      {
        id: 13,
        name: '实例名称',
        status: '失败',
        type: '专有网络',
        children: [
          {
            id: 131,
            name: '实例名称',
            status: '失败',
            type: '专有网络',
            children: [
              {
                id: 1311,
                name: '实例名称',
                status: '失败',
                type: '专有网络',
              },
              {
                id: 1312,
                name: '实例名称',
                status: '失败',
                type: '专有网络',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    id: 2,
    name: '实例名称',
    status: '失败',
    type: '专有网络',
  },
];

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

export default () => {
  return (
    <Table dataSource={data} primaryKey="id" isTree>
      <Table.Column title="实例ID/名称" dataIndex="name" width={200} />
      <Table.Column title="状态" dataIndex="status" />
      <Table.Column title="网络类型" dataIndex="type" />
      <Table.Column title="操作" cell={render} width={200} />
    </Table>
  );
};