import React from 'react';
import { Input, Modal, Form, Select, Button } from 'antd';

const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 48px' }}
      footer={null}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
      maskClosable={false}
    >
      <Form
       preserve={false}
       layout="horizontal"
       labelCol={{
           span: 4,
       }}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="value" label="字典值" rules={[{ required: true, max: 64 }]}>
          <Input placeholder="请输入字典值" />
        </Form.Item>
        <Form.Item name="code" label="字典编码" rules={[{ required: true, max: 64 }]}>
          <Input placeholder="请输入字典编码" />
        </Form.Item>
        <Form.Item
          name="typeId"
          label="字典类型"
          rules={[{ required: true, message: '请输入字典类型' }]}
        >
          <Select>
            {props.typeNameData.map((item, index) => {
              return (
                <Select.Option index={index} value={item.typeId} key={item.typeId}>
                  {item.text}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="status"
          label="状态"
          defaultValue={props.values.status}
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <OptGroup>
              <Select.Option value="0">正常</Select.Option>
              <Select.Option value="1">停用</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        <Form.Item name="remark" label="备注" rules={[{ required: true, max: 200 }]}>
          <Input placeholder="请输入备注" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
