import React, { useState, useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import routes from '@/routes';

const PermissionsList = () => {
  const tableRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '路由名称',
      dataIndex: 'name',
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  return (
    <div>
      <Table
        columns={columns}
        search={false}
        // rowKey="key"
        // childrenColumnName="routes"
        rowSelection={{
          ...rowSelection,
        }}
        // toolBarActions={[
        //   {
        //     type: 'add',
        //     onConfirm: () => {},
        //   },
        // ]}
        actionRef={tableRef}
        request={async (params) => {
          const array = routes;
          array.forEach((item: any, index) => {
            if (item.name == '' || item.name == null || item.name == undefined) {
              array.splice(index, 1);
            }
            item.key = index + 1;
            if (Object.prototype.hasOwnProperty.call(item, 'routes')) {
              item.routes?.forEach((item2: any, index2: number) => {
                if (item2.name == '' || item2.name == null || item2.name == undefined) {
                  item.routes.splice(index2, 1);
                }
                item2.key = parseInt(index + 1 + '' + index2);
              });
            }
          });
          return { data: array };
        }}
      />
    </div>
  );
};

export default PermissionsList;
