import React, { useState, useEffect,useRef } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Modal, Form,message,Row,Col,Select,Checkbox} from 'antd';
import ProTable from '@ant-design/pro-table';
import {
    GetDeviceList,
} from '../services';
const PushDevice = (props) => {
  const [form] = Form.useForm();
  const [deviceData, setdeviceData] = useState([]);
  const options = [
    {
      label: '商品',
      value: '1',
    },
    {
      label: '物料',
      value: '2',
    },
    {
      label: '工艺',
      value: '3',
    },
    {
        label: '配方',
        value: '4',
      },
  ];
  useEffect(() => {
    console.log(props.values)
    GetDeviceList().then((r)=>{
        var data=r.data.map(x=>{
            return {value:x.id,label:x.name}
        })
        setdeviceData(data)
    })
  },[props.values])
 const handleChange=()=>{

 }
 const onChangedata=()=>{

 }
  return (
    <Modal
      title={'下发数据'}
      width={840}
      visible={props.pushdeviceModalVisible}
      bodyStyle={{ padding: '14px 20px 18px' }}
      okText="保存"
      cancelText="取消"
      onOk={() => {
        }}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
<Row gutter={26}>
    <Col lg={24} md={24} sm={24}>
        选择设备：
        <Select
        mode="multiple"
        allowClear
        style={{width: '60%'}}
        placeholder="请选择要下发设备"
        onChange={handleChange}
        options={deviceData}
        />
    </Col>
   
</Row>
<Row gutter={26}>
    <Col span={24}>
        选择数据：
        <Checkbox.Group defaultValue={['1','2']} onChange={onChangedata} >
            <Checkbox value="1">商品</Checkbox><a style={{marginLeft:2,marginRight:30}}>【选择商品】</a>
            <Checkbox value="2">物料 </Checkbox><a style={{marginLeft:2,marginRight:30}}>【选择物料】</a>
            <Checkbox value="3">工艺</Checkbox><a style={{marginLeft:2,marginRight:30}}>【选择工艺】</a>
            <Checkbox value="4">配方</Checkbox><a style={{marginLeft:2,marginRight:30}}>【选择配方】</a>
        </Checkbox.Group>
    </Col>
</Row>
    </Modal>
  );
};

export default PushDevice;
