import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, TreeSelect } 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
    >
      <Form
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish} >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item label="门店" name="shopId" rules={[{ required: true, message: '请选择门店！', },]}>
          <Select allowClear placeholder="请选择门店" style={{ width: '100%' }}>
            {
              props?.storeList?.map(item => {
                return <Option value={item.id} key={item.id}>{item.text}</Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item label={"名称"} name="name" rules={[{ required: true }]} >
          <Input />
        </Form.Item>
        <Form.Item label={"电话"} name="phone" rules={[{ required: true }]} >
          <Input />
        </Form.Item>
        <Form.Item label={"工号"} name="number" rules={[{ required: true }]} >
          <Input />
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.mode !== currentValues.mode
          }  >
          {({ getFieldValue }) =>
            (props.values.id) ? (
              <Form.Item name="status" label="状态"
              rules={[{ required: true, message: '请选择状态' }]}  >
              <Select placeholder="请选择状态">
                <OptGroup>
                  <Select.Option value={0}>正常</Select.Option>
                  <Select.Option value={1}>停用</Select.Option>
                </OptGroup>
              </Select>
            </Form.Item>
            ) : null
          }
        </Form.Item>


        {/* <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item> */}
         <Button type="primary" htmlType="submit" style={{ float: 'right', left: 10 }}  >
            确认
          </Button>
          <Button htmlType="button" style={{ float: 'right' }} onClick={props.onCancel} >
            取消
          </Button>
      </Form>
    </Modal>
  );
};

export default CreateForm;
