import React, { useState, useEffect,useRef } from 'react';
import { Modal, Row, Col, Checkbox, Select,message,Switch} from 'antd';
import ProTable from '@ant-design/pro-table';
import {
  GetDeviceList,
  GetBatchingPage,
} from '../services';
const PushFrom = (props) => {
  const [deviceData, setdeviceData] = useState([]);
  const [selectedRowsState, setSelectedRows] = useState([]);
  const [dataSource,setdataSource]= useState([]);
  const [DeviceIds, setDeviceIds] = useState();
  const [DeviceInfo, setDeviceInfo] = useState([]);
  const actionRef = useRef();
  useEffect(() => {
    console.log(props.values)
    GetDeviceList().then((r)=>{
      setDeviceInfo(r.data)
        var data=r.data.map(x=>{
            return {value:x.id,label:x.name}
        })
        setdeviceData(data)
    })
      var params={current:1,pageSize:10}
      GetGoodsData(params)
  },[props.values])
  const GetGoodsData=(params)=>{
    GetBatchingPage(params).then((r) => {
        setdataSource(r.data.data);
        //console.log(goodsData)
        //total = r.data.total;
      });
  }
 const handleChange=(value)=>{
    setDeviceIds(value)
    var params={current:1,pageSize:10,deviceId:value}
    GetGoodsData(params)
 }
 
 const columns=[
    {
        title: '编码',
        dataIndex: 'code',
        valueType: 'textarea',
        with:50
      },
      {
        title: '名称',
        dataIndex: 'name',
        valueType: 'textarea',
      },
      
 ]
  return (
    <Modal
      title={'下发数据'}
      width={1040}
      visible={props.createModalVisible}
      bodyStyle={{ padding: '32px 40px 1px 48px' }}
      okText="确定"
      cancelText="取消"
      onOk={() => {
        if(!DeviceIds){
          message.error('请选择设备');
        }else{
          var de=DeviceInfo.find(x=>x.id==DeviceIds);
          var parm={deviceId:de.id,deviceName:de.name,deviceAutoKey:de.autoKey,type:2,data:selectedRowsState}
          props.HandleOk(parm)
          console.log(de)
        }
      }}
      onCancel={() => {
        props.onCancel();
      }}
      destroyOnClose
    >
      <Row gutter={26} style={{marginBottom:20}}>
    <Col lg={24} md={24} sm={24}>
        选择设备：
        <Select
        
        allowClear
        style={{width: '60%'}}
        placeholder="请选择要下发设备"
        onChange={handleChange}
        options={deviceData}
        />
    </Col>
   
</Row>
<Row gutter={26}>
    <Col span={24}>
        选择数据：
        <ProTable
          headerTitle=""
          actionRef={actionRef}
          rowKey="id"
          pagination={{ defaultPageSize: 10 }}
          search={{
            labelWidth: 120,
          }}
          dataSource={dataSource}
          columns={columns}
          rowSelection={{
            onChange: (_, selectedRows) => {
              setSelectedRows(selectedRows);
            },
          }}
        >
          </ProTable>
    </Col>
</Row>
    </Modal>
  );
};

export default PushFrom;
