import React,{Component} from 'react';
import PropTypes from 'prop-types';
import style from './index.less';

/**
多列单选组件
datas:父组件传来的数组，必须...
parentId：每一列的id
id:标签的id
isSelect:是否选中
disabled:禁用标识（互斥）
*/

class RadioB extends React.Component{
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handlePreventClick(e){
    e.stopPropagation();
  }

  handleClick(id){
    const {handleClick,parentId} = this.props;
    const items = {
      id,
      parentId
    }
    handleClick && handleClick(items);   
  }

  getLabs(){
    const {disabled,datas} = this.props;
    if(disabled==2){
      return <div className={style['radio']} contentEditable='false' onClick={this.handlePreventClick}>
          {datas.map((item,i)=>{
            return <p className={`${style['tab']} ${style['disabled']}`} contentEditable='false'>{item.name.length>8?item.name.slice(0,7)+'...':item.name}</p>
          })}
      </div>
    }
    let list = datas.map((item,i)=>{
            return <div className={item.isSelect?`${style['radio']} ${style['selected']}`:style['radio']} contentEditable='false' onClick={this.handlePreventClick}>
              <p onClick={()=>this.handleClick(item.id)} className={style['tab']} contentEditable='false'>{item.name.length>8?item.name.slice(0,7)+'...':item.name}</p>
            </div>
          })
    return list;
  }

  render(){
    return <div className={style['radio-box']}>
      {this.getLabs()}
    </div>
  }
}

RadioB.propTypes = {
  handleClick:PropTypes.func,
  isSelect:PropTypes.bool,
  datas:PropTypes.array
};

export default RadioB;