import React, { memo, useCallback, useMemo, useState } from 'react';
import { Button, Table, Modal, Descriptions } from 'antd';
import SelectDevice from './selectDevice';

const Device = (props) => {

  const [visible, setVisible] = useState(false);

  const { device, onChange } = props;

  // const handleChange = (e) => {
  //   // eslint-disable-next-line prefer-destructuring
  //   const value = e.currentTarget.value;
  //   const values = value.split(',').filter(item => item.trim().length > 0).map(item => item.trim());
  //   props.onChange(values || []);
  // }

  const handleChange = useCallback((data) => {
    onChange(data);
  }, []);

  const handleClose = useCallback(() => {
    setVisible(false);
  }, []);

  console.log('props.device----', device)

  const columns = [
    { title: '属性名', dataIndex: 'name' },
    { title: '消息名', dataIndex: 'id' },
  ]

  const selectedMeter = useMemo(() => {
    let mDevice = {};
    for(let item in device) {
      console.log('12345 ==== ', item);
      mDevice = device[item];
    }
    console.log(12345);
    return mDevice;
  }, [device])

  
  return (
    <>
    {
      // props.value.name
    }
      <Button size='small' onClick={ () => setVisible(true) }>选择...</Button>

      <Table rowKey={res => res.id} size='small' title={() => selectedMeter?.meter?.device?.name || ''} dataSource={selectedMeter?.attr || []} columns={columns} pagination={false} />

      <SelectDevice visible={ visible } onChange={ handleChange } onClose={ handleClose } />
      
    </>
  )
} 

export default memo(Device);