import React, { useState } from 'react';
import { Row, Col, Modal, Form, Input, Button, InputNumber, Select } from 'antd';

const CreateForm = (props) => {
  return (
    <Modal
      title={props.values.id ? '编辑角色' : '新建角色'}
      width={1000}
      visible={props.modalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        layout="horizontal"
        preserve={false}
        labelCol={{
          span: 4,
        }}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Row>
          <Col span={12}>
            <Form.Item name="code" label="角色编码" rules={[{ required: true, max: 20 }]}>
              <Input disabled={props.values.id ? true : false} placeholder="请输入角色编码" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="name" label="角色名称" rules={[{ required: true, max: 64 }]}>
              <Input placeholder="请输入角色名称" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="remark" label="备注" rules={[{ max: 500 }]}>
              <Input.TextArea placeholder="请输入备注" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="sort" label="排序">
              <InputNumber min={1} decimalSeparator="0"/>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ float: 'right' }}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
