import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, DatePicker, Alert } from 'antd';
import { RoleList } from './service';
const RoleAlterForm = (props) => {
  const [options, setOptions] = useState();
  //初始化数据
  useEffect(() => {
    const InitRole = async (value) => {
      var data = await RoleList();
      var se = data.map((item) => (
        <Select.Option key={item.id} value={item.id}>
          {item.name}
        </Select.Option>
      ));
      setOptions(se);
    };
    InitRole();
  }, []);

  const formItemLayout = {
    labelCol: {
      sm: { span: 4 },
    },
    wrapperCol: {},
  };
  const tailFormItemLayout = {
    wrapperCol: {
      sm: {
        span: 500,
        offset: 1,
      },
    },
  };

  return (
    <Modal
      title="角色变更"
      width={700}
      visible={props.AlterRoleModalVisible}
      footer={null} //底部内容
      initialValues={props.values}
      //取消
      onCancel={() => {
        props.onCancel();
      }}
      //关闭时销毁 Modal 里的子元素
      destroyOnClose
    >
      <Form {...formItemLayout} layout="Horizontal" preserve={false} onFinish={props.onFinish}>
        <Form.Item name="roleId" label="角色" rules={[{ required: true, max: 200 }]}>
          <Select
            mode="multiple"
            style={{ width: '100%' }}
           placeholder="请选择角色">{options}</Select>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            更新
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default RoleAlterForm;
