import React from 'react';
import List from '../../components/VList/Base';
import "./index.less";
import IconFont from '../../components/IconSpan'
import DeviceIcon from '../DeviceIcon'

export default class DeviceList extends React.Component {
  whatIcon = item => {
    const { getIconStyle } = this.props;
    if(item.pointDataType === 'place') {
      return <IconFont type='icon-S_Place_Place' style={{ fontSize: '16px', color: 'var(--icon)', marginRight: '4px' }}/>
    }
    return <DeviceIcon style={getIconStyle ? getIconStyle(item) : undefined} cType={item.cameraType} type={item.deviceType} status={item.deviceStatus} />;
  };

  deleteItem = (item, e) => {
    // Utils.stopPropagation(e);
    e.preventDefault();
    const { deleteItem } = this.props;
    deleteItem && deleteItem(item);
  };

  render() {
    const { className = "", deviceList = [], deleteItem, setDeviceType, componentsType, renderItemExt, deleteDeviceAll, selectDevicesType, showVideoSet,showData,onMouseOverItem, ...props } = this.props;
    return (
       <List
        {...props}
        className={`lm-c-device-and-place-list-wrapper ${className}`}
        list={deviceList}
        itemNameKey="itemName"
        itemKey='itemKey'
        rowHeight={30}
        whatIcon={this.whatIcon}
        onMouseOverItem={onMouseOverItem}
        renderItemExt={item =>
          renderItemExt
            ? renderItemExt(item)
            : deleteItem && (
                <span className="clear-item" onClick={e => this.deleteItem(item, e)}>
                  <IconFont type="icon-S_Edit_LineClose" title="删除" />
                </span>
              )
        }
      />
    );
  }
}
