import React from 'react';
import { Menu, List, Icon } from 'semantic-ui-react';


class DevList extends React.Component {


    render() {
        let {list, sel,selectDevice, openModal, delData} = this.props;
        return (
            <Menu vertical>
                <Menu.Item>
                    <Menu.Header className="clearfix">
                        裝置列表
                        <Icon name="plus" 
                            style={{float: 'right',cursor:'pointer'}}
                            onClick={()=>openModal('device')} />
                    </Menu.Header>
                    <Menu.Menu>
                        {
                            list.map((t,idx)=>(
                                <Menu.Item key={idx} active={sel == t.devuid}>
                                    <span style={{cursor:'pointer'}} onClick={()=>selectDevice(t.devuid)}>{t.name}</span>
                                    <Icon name="trash"
                                        style={{cursor:'pointer'}}
                                        onClick={()=>delData('device', t.devuid)} />
                                    <Icon name="edit"
                                        style={{cursor:'pointer'}}
                                        onClick={()=>openModal('device', 1, t)} />
                                </Menu.Item>
                            ))
                        }
                    </Menu.Menu>
                </Menu.Item>
            </Menu>
        )
    }
}

export default DevList;