import React, { useState, useEffect,useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Form, Input, Button, Select,Radio,Divider,Space,message } from 'antd';
import {
  GetDeviceVesion,
  AddDeviceType
} from '../services';
const CreateForm = (props) => {
  const [DeviceVesionData, setDeviceVesionData] = useState([]);
  const [value, setValue] = useState(0);
  const [deviceTypename,setdeviceTypename]=useState("");
  const inputRef = useRef(null);
  useEffect(() => {
    console.log(props.values)
    if(Object.keys(props.values).length>0){
      GetDeviceVesion(props.values.productId).then((res)=>{
        setDeviceVesionData(res.data)
      })
    }
  },[props.values])
  const handleChange=(value)=>{
    GetDeviceVesion(value).then((res)=>{
      setDeviceVesionData(res.data)
    })
  }
  const onNameChange=(event)=>{
    setdeviceTypename(event.target.value);
  }
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };
  const addItem=(e)=>{
    e.preventDefault();
   if(deviceTypename.length==0){
    message.error("请输入名称");
   }else{
      var parm={name:deviceTypename}
      AddDeviceType(parm).then((r)=>{
        if(r.succeeded){
          message.success('添加成功');
          props.initDeviceType()
          setdeviceTypename('');
        }else{
          message.error(r.errors);
        }
      })
    } 
  }
  return (
    <Modal
      title={props.values.id ? '编辑' : '新建'}
      width={640}
      visible={props.createModalVisible}
      maskClosable={false}
      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="productId" rules={[{ required: true }]}>
          <Select onChange={handleChange}>
            {props.dicData.map((item, index) => {
              return (
                <Select.Option index={index} value={item.id} key={item.id}>
                  {item.label}
                </Select.Option>
              );
            })}
          </Select>
        </Form.Item>
        <Form.Item label={'产品版本'} name="productVersionId" 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 label={'设备名称'} name="deviceName" rules={[{ required: true, max: 50 }]}>
          <Input />
        </Form.Item>
        <Form.Item label={'设备标签'} name="deviceTypeId" rules={[{ required: false }]}>
            <Select
              style={{width: '100%'}}
              placeholder="请选设备标签"
              options={props.storeType}
              dropdownRender={(menu) => (
                <>
                {menu}
                <Divider style={{margin: '8px 0'}}/>
                <Space style={{padding: '0 8px 4px'}}>
                  <Input
                    placeholder="请输入设备标签"
                    ref={inputRef}
                    value={deviceTypename}
                    onChange={onNameChange}
                    onKeyDown={(e) => e.stopPropagation()}
                  />
                  <Button type="text" icon={<PlusOutlined />} onClick={addItem}>
                    新增
                  </Button>
                </Space>
                </>
              )}
            />
        </Form.Item>
        {/* <Form.Item label={'支持功能'} name="technologyOrBom" rules={[{ required: true }]}>
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={0}>工艺</Radio>
            <Radio value={1}>配方</Radio>
          </Radio.Group>
        </Form.Item> */}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateForm;
