import React, { useState } from 'react';
import { Modal, Form, Input, Button, Select } from 'antd';
// import {
//   GetDeviceVesion
// } from '../services';
const CreateForm = (props) => {
  const { Option, OptGroup } = Select;
  const [DeviceVesionData, setDeviceVesionData] = useState([]);
  const handleChange=(value)=>{
    GetDeviceVesion(value).then((res)=>{
      setDeviceVesionData(res.data)
    })
  }
  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
        layout="vertical"
        preserve={false}
        initialValues={props?.values}
        onFinish={props?.onFinish}
      >
        <Form.Item name="id" hidden={true}>
          <Input />
        </Form.Item>
        <Form.Item name="name" label="工艺名称" rules={[{ required: true, max: 64, whitespace: true }]}>
          <Input placeholder="请输入工艺名称" />
        </Form.Item>
        
        <Form.Item label={"设备类型"} name="deviceType"  rules={[{ required: true,max:50}]} >
        <Select onChange={handleChange}>
            {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 label={'设备版本'} name="deviceVersionKey" rules={[{ required: true }]}>
          <Select>
            {DeviceVesionData.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.vesion}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item
          name="status"
          label="状态"
          defaultValue={props?.values?.status}
          rules={[{ required: true, message: '请选择状态' }]}
        >
          <Select placeholder="请选择状态">
            <Option value="0">正常</Option>
            <Option value="1">停用</Option>
          </Select>
        </Form.Item>
        <Form.Item name="foreignKeyRe" label="关联外键" rules={[{ required: false }]}>
          <Input placeholder="请输入关联外键" />
        </Form.Item>
        <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;
