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

class Multiple extends React.Component{
  constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      ban:false,
      wu:false,
      noBanWu:false//不点伴无
    }
  }

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

  handleChange(item,e){
    e.stopPropagation();
    const {handleClick} = this.props;
   // handleClick && handleClick(item.name); 
   // console.log(2222,item);

  }

  getSelectedStyle(it){
    // const {isSelect,first,then} = this.props;
    const isSelect = it.isSelect;
    const {ban,wu} = this.state;
    if(ban && isSelect){//伴、初为
      return style.selectBtn;
    }
    else if(wu && isSelect){//无、后为
      return `${style.selectBtn} ${style.thenSel}`;
    }
    else if(isSelect){
      return style.selectBtn;
    }
    else{
       return style.btn
    }

  }

  getTabs(){
    const {datas} =this.props;
    let pushData = datas && datas.filter(function(item){
      return item.name
    });
    // 没有标签的暂时过滤
    let list = pushData && pushData.map((it,i)=>{
        return <p onClick={this.handleChange.bind(this,it)} contentEditable='false' className={this.getSelectedStyle(it)}>{it.name}</p>
      })
      return list;
  }

  render(){
    const selectStyle = this.props.style;
    const {name} = this.props;
    return <div className={style['multiple']} onClick={this.handleClick.bind(this)} style={selectStyle}>
      {this.props.children}
      <div className={style['multiple-con']}>
        {/*<p onClick={this.handleChange.bind(this,name)} contentEditable='false' className={this.getSelectedStyle()}>{name}</p>*/}
        {this.getTabs()}
      </div>
    </div>
  }
}

Multiple.propTypes = {
    handleClick:PropTypes.func,
    isSelect:PropTypes.bool,
    name:PropTypes.string
};

export default Multiple;