import React, { useRef } from 'react';
import Table, { ProColumns, ActionType } from '@/components/Table';
import { getRoleList, deleteRole } from '@/services/system/role';
import { fetchTableData } from '@/utils/table';
import DeleteButton from '@/components/Table/DeleteButton';

const RoleList = () => {
  const handleEdit = (row: any) => {};
  const handleAuth = (row: any) => {};
  const handleDelete = async (role: any) => {
    await deleteRole({ role: role });
  };
  const tableRef = useRef<ActionType>();
  const columns: ProColumns<any>[] = [
    {
      title: '角色名称',
      dataIndex: 'role_name',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '用户类型',
      dataIndex: 'role',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '操作',
      valueType: 'option',
      width: 180,
      render: (_, row) => [
        <a
          key="edit"
          onClick={() => {
            handleEdit(row);
          }}
        >
          编辑
        </a>,
        <a
          key="auth"
          onClick={() => {
            handleAuth(row);
          }}
        >
          授权
        </a>,
        <DeleteButton
          key="delete"
          onDelete={() => {
            handleDelete(row.role);
          }}
        />,
      ],
    },
  ];
  return (
    <div>
      <Table
        columns={columns}
        rowKey="id"
        toolBarActions={[
          {
            type: 'add',
            onConfirm: () => {},
          },
        ]}
        actionRef={tableRef}
        request={async (params) => {
          const res = await fetchTableData(getRoleList, params);
          return res;
        }}
      />
    </div>
  );
};

export default RoleList;
