import React from 'react';
/*import PropTypes from 'prop-types';*/
import on from './img/on.png';
import off from './img/off.png';
import disable from './img/disable.png';
import style from './index.less';

/**
 * 单选按钮
 * handleClick:点击触发按键 会将输入的props信息作为参数传入
 * isSelect:是否选中
 * name:右侧显示文字
 */
class Radio extends React.Component {
    constructor(props){
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(id){
        this.props.handleClick(id);
    }

    getStyle(){
        if(this.props.display=='block'){
            return {
                display:'block',
                // marginBottom:'10px'
            }
        }
        return {
            display:'inline-block',
            marginLeft:'10px'
        }
    }

    render() {
        const {id,name,isSelect,disabled} = this.props;
        if(disabled){
            return (
                <div className={style['radio']}
                     style={this.getStyle()}>
                    <img src={isSelect?disable:off}/>
                    <span style={{color:'#aaa'}}>{name}</span>
                </div>
            )
        }
        return (
            <div className={style['radio']}
                 onClick={() =>this.handleClick(id)}
                 style={this.getStyle()}>
                <img src={isSelect?on:off}/>
                <span>{name}</span>
            </div>
        )
    }
}

/*Radio.propTypes = {
    handleClick:PropTypes.func,
    isSelect:PropTypes.bool,
    name:PropTypes.string
};*/

export default Radio;