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

/*
多选组件
datas:父组件传来的数据（数组）
name:标签名;
isSelect：是否选中;
noSpecialFlag：无殊标识， 2选中其他 1选中无殊 0默认无选中;
*/

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

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

  handleChange(name,e){
    e.stopPropagation();
    const {handleClick,parentId,checkBoxId,flag} = this.props;
    const items = {
      name,
      parentId,
      checkBoxId,
      flag
    }
   handleClick && handleClick(items);     
  }

  getTab(){
    const {noSpecialFlag,datas} = this.props;
    if(noSpecialFlag==2){//无殊
      let list = datas.map((it,i)=>{
        return <p contentEditable='false' className={`${style['btn']} ${style['nospecialDis']}`}>{it.name}</p>
      })
      return list;
    }else{
      let list = datas.map((it,i)=>{
        return <p onClick={this.handleChange.bind(this,it.name)} contentEditable='false' className={!it.isSelect ? style['btn']:style['selectBtn']}>{it.name}</p>
      })
      return list;
    }
  }

  render(){
    return <div className={style['select']} onClick={this.handleClick.bind(this)}>
      {this.props.children}
      {this.getTab()}
    </div>
  }
}

Select.propTypes = {
    handleClick:PropTypes.func,
    handleChange:PropTypes.func,
    datas:PropTypes.array
};

export default Select;