import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, Select, TreeSelect,InputNumber } 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
        layout="Horizontal"
        labelCol={{ span: 4 }}
        preserve={false}
        initialValues={props.values}
        onFinish={props.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>

        <Form.Item label={'设备名称'} name="deviceName" rules={[{ required: true, max: 50 }]}>
          <Input />
        </Form.Item>

        <Form.Item label={'设备类型'} name="deviceTypeKey" rules={[{ required: true }]}>
          <Select>
            {props.dicData.map((item, index) => {
              return (
                <Select.Option index={index} value={item.code} key={item.code}>
                  {item.value}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>

        <Form.Item name="orgId" label="归属门店" rules={[{ required: true }]}>
          <TreeSelect
            style={{ width: '100%' }}
            dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
            treeData={props.OrgData}
            placeholder="归属门店"
            treeDefaultExpandAll
          />
        </Form.Item>
        <Form.Item label={'设备分类'} name="deviceTypeId" rules={[{ required: true }]}>
          <Select>
            {props.storeType.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.text}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) => prevValues.deviceTypeKey !== currentValues.deviceTypeKey}
        >
          {({ getFieldValue }) =>
            getFieldValue('deviceTypeKey') === 'TMC' ? (
              <Form.Item name="deviceVersion" label="设备版本" initialValue="WorryFreeEdition">
                <Select>
                  {props.deviceVersions?.map((item, index) => {
                    return (
                      <Select.Option index={index} value={item.code} key={item.code}>
                        {item.name}
                      </Select.Option>
                    );
                  })}
                </Select>
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item label={'设备坐标'} name="deviceLoc">
          <Input placeholder="104.070734,30.575041" />
        </Form.Item>
        <Form.Item label={'状态'} name="status" rules={[{ required: true }]}>
          <Select placeholder="请选择状态">
            <OptGroup>
              <Select.Option value={0}>正常</Select.Option>
              <Select.Option value={1}>停用</Select.Option>
            </OptGroup>
          </Select>
        </Form.Item>
        <Form.Item label={'设备通道数量'} name="materialQuantity">
          <InputNumber />
        </Form.Item>
        <Form.Item label={'设备详细地址'} name="deviceAddr">
          <Input placeholder="成都市武侯区桂溪街道环球中心N5-9111C" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
