/**
 * 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 onChange = function (...args) {
  console.log(...args);
};

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

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

  const onFilter = (filterParams) => {
    let ds = getDataSource();
    Object.keys(filterParams).forEach((key) => {
      const { selectedKeys } = filterParams[key];
      if (selectedKeys.length) {
        ds = ds.filter((record) => {
          return selectedKeys.some((value) => {
            return record[key].indexOf(value) > -1;
          });
        });
      }
    });
    setDataSource(ds);
  };

  return (
    <Table
      onFilter={onFilter}
      dataSource={dataSource}
      rowSelection={{
        onChange,
        mode: 'multiple',
      }}
    >
      <Table.Column title="实例ID/名称" dataIndex="id" width={200} />
      <Table.Column
        filters={[
          {
            label: '运行中',
            value: '运行中',
          },
          {
            label: '停用',
            value: '停用',
          },
        ]}
        title="状态"
        dataIndex="status"
      />
      <Table.Column title="网络类型" dataIndex="type" />
      <Table.Column title="操作" cell={render} width={200} />
    </Table>
  );
};