import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, InputNumber, Checkbox, TreeSelect } from 'antd';
import { GetAllMenus } from './service';

const UpdateForm = (props) => {
  const [option, setOption] = useState([]);
  useEffect(() => {
    GetAllMenus().then((r) => {
      setOption(r.data);
    });
  }, []);

  return (
    <Modal
      destroyOnClose
      title="编辑角色"
      width={600}
      visible={props.AlterVisible}
      onCancel={() => props.onCancel()}
      footer={null}
    >
      <Form
        layout="Horizontal"
        onFinish={props.onFinish}
        initialValues={{
          id: props.values.id,
          name: props.values.name,
          menus: props.values.menus.map((item) => item.id),
          handle: props.values.handle,
        }}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="name" label="角色名称" rules={[{ required: true, max: 200 }]}>
          <Input placeholder="请输入角色名称" />
        </Form.Item>
        <Form.Item name="menus" label="菜单选择" rules={[{ required: true }]}>
          <TreeSelect
            placeholder="请选在菜单属性"
            treeData={option}
            treeCheckable={true}
            showCheckedStrategy="SHOW_ALL"
            allowClear={true}
            treeDefaultExpandAll
          ></TreeSelect>
        </Form.Item>
        <Form.Item name="handle" label="操作权限" rules={[{ required: true }]}>
          <Checkbox.Group
            options={[
              { label: '新增', value: 'Insert' },
              { label: '编辑', value: 'Update' },
              { label: '删除', value: 'Delete' },
              { label: '审计', value: 'Audit' },
            ]}
          />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            更新
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default UpdateForm;
