import classNames from 'classnames';
import styles from './index.less';
/**
 * 单/多选列表的一行
 * selected:是否被选中
 * noHover:是否有hover状态
 * noDot:无最大宽度缩略...样式
 * disabled:灰色样式,与selected,noHover互斥
 * handleClick:点击事件
 * title,style：原生属性
 * type: border边框选中样式,check蓝色对勾选中样式（默认）,noneCheck黑色对勾选中样式
 *
 * **/
function LiItem(props){
  const {children,handleClick,title,style,noHover,selected,disabled,noDot} = props;
  const type = props.type||'check';     //选中样式默认多选选中样式
  const dot = noDot?styles['no-dot']:'';
  if(disabled){
    return <li onClick={handleClick} className={classNames(styles["disabled"],dot,styles["li-item"])} title={title} style={style}>{children}</li>;
  }
  const typeMap = {
    border:'border-selected',
    check:'check-selected',
    noneCheck:'black-selected',
  };
  const hover = noHover?'':styles['hoverable'];
  const select = selected?styles[typeMap[type]]:'';
  return <li onClick={handleClick} className={classNames(hover,select,dot,styles["li-item"])} title={title} style={style}>{children}</li>;
};

export default LiItem;