import React, { useState } from 'react';
import { Row, Col, Modal, Form, Input, Button, InputNumber, TreeSelect,Select } from 'antd';
import ProForm, { ProFormRadio } from '@ant-design/pro-form';

const CreateForm = (props) => {
  const [RadioKey, setRadioKey] = useState();
  return (
    <Modal
      title={props.values.id ? '编辑菜单' : '新建菜单'}
      width={1000}
      visible={props.modalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      footer={null}
      maskClosable={false}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Form
        preserve={false}
        layout="horizontal"
        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 }]}>
              <Input placeholder="请输入菜单编码" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="name" label="菜单名称" rules={[{ required: true}]}>
              <Input placeholder="请输入菜单名称" />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="router" label="菜单路径" rules={[{ required: true}]}>
              <Input placeholder="请输入菜单名称" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item name="pid" label="上级菜单">
              <TreeSelect
                allowClear={true}
                style={{ width: '100%' }}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={props.treeDatas}
                placeholder="请选择上级菜单"
                treeDefaultExpandAll
              />
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item name="component" label="菜单组件">
              <Input placeholder="请输入菜单组件" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Row>
              <Col span={12}>
                <Form.Item
                  name="sort"
                  label="排序"
                  style={{ marginLeft: '2.5em', overflow: 'auto' }}
                >
                  <InputNumber min={1} style={{ marginLeft: '0.8em' }} />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item name="icon" label="图标">
                  <Input placeholder="请输入菜单图标" />
                </Form.Item>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Form.Item
              defaultValue={props.values.isAdmin}
              name="isAdmin"
              label="超管菜单"
              rules={[{ required: true }]}
            >
              <ProFormRadio.Group
                initialValue={0}
                onChange={(e) => {
                  setRadioKey(e.target.value);
                }}
                options={[
                  {
                    label: '否',
                    value: 0,
                  },
                  {
                    label: '是',
                    value: 1,
                  },
                ]}
              />
            </Form.Item>
          </Col>
          {/* <Col span={12}>
           
              <Form.Item name="type" label="所属平台">
               <Select placeholder='请选择所属平台'  mode="multiple" allowClear  options={[
                {
                  value: '0',
                  label: '团餐',
                },
                {
                  value: '1',
                  label: '门店',
                },
                {
                  value: '2',
                  label: '后厨',
                },
                {
                  value: '3',
                  label: '公共',
                },
              ]}/>
              </Form.Item>
            
          </Col> */}
        </Row>
        <Form.Item>
        <Button  htmlType="button" style={{float:'right',left:10}} onClick={props.onCancel} >
                        取消
                    </Button>
        <Button type="primary" htmlType="submit" style={{float:'right'}} >
                        保存
                    </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
