import React, { useEffect, useState } from 'react';
import { Modal, Table, Checkbox, Spin, Button, Input } from 'antd';
import ProTable, { ProColumns, ActionType, TableDropdown } from '@ant-design/pro-table';

import { Page } from '../../../sys/Roles/service';

const columns = [
  {
    title: '角色名称',
    dataIndex: 'name',
    hideInSearch: true,
  },

  {
    title: '备注',
    dataIndex: 'remark',
    valueType: 'textarea',
    hideInSearch: true,
  },
];
const RoleForm = (props) => {
  const [options, setOptions] = useState();
  const [loading, setLoading] = useState(undefined);
  const [selectedRowsState, setSelectedRows] = useState();
  // // componentDidMount
  // useEffect(() => {
  //   setLoading(true);
  //   async function getRoles() {
  //     if (loading) {
  //       return;
  //     }
  //   }

  //   getRoles();
  // }, []);

  const renderContent = () => {
    return (
      <ProTable
        rowKey="id"
        toolBarRender={false}
        search={false}
        pagination={false}
        request={async (params) => {
          let UserData = [];
          var total = 0;
          params.pageSize = 100;

          //添加机构组织
          await Page(params).then((r) => {
            UserData = r.data.data;
            total = r.data.total;
          });
          return {
            data: UserData,
            success: true,
            total: total,
          };
        }}
        columns={columns}
        rowSelection={{
          onChange: (_, selectedRows) => setSelectedRows(selectedRows),
          defaultSelectedRowKeys: ['596916ab-300a-464f-b825-4bc5c624b06e'],
        }}
      />
    );
  };

  return (
    <Modal
      width={640}
      bodyStyle={{ padding: '32px 40px 48px' }}
      destroyOnClose
      title={`给 ${props.values.name} 分配角色`}
      visible={props.updateModalVisible}
      onOk={() => props.onSubmit(selectedRowsState)}
      onCancel={() => props.onCancel()}
      maskClosable={false}
    >
      {loading ? <Spin /> : renderContent()}
    </Modal>
  );
};

export default RoleForm;
