import React,{Component} from 'react';
import classNames from 'classnames';
import ReactDom from "react-dom";

import style from "./index.less";
/****
 * 单选下拉内容框（不含输入本身）
 * author:zn@2018-11.13
 * 接收参数：
 * data: json数组
 * show:true/false
 * onSelect: 选中事件
 *
 * ***/

class DropList extends Component{
  constructor(props){
    super(props);
    this.handleSelect = this.handleSelect.bind(this);
    this.handleClear = this.handleClear.bind(this);
  }
  getClass(){
    let name = style['text-list'];
    let isHide = this.props.show?'':style['hide'];
    return classNames(style['list'],name,isHide);
  }
  
  getStyle(){
    const {left,top} = this.props;
    return {
      left:left?left+'px':'',
      top:top?top+'px':''
    }
  }
  handleSelect(e,item){
    e.stopPropagation();
    const {onSelect} = this.props;
    onSelect&&onSelect(item);
  }
  handleClear(e){
    e.stopPropagation();
    const {onSelect} = this.props;
    onSelect&&onSelect(undefined);
  }
  render(){
    const {data,hideTag,boxMark} = this.props;
    const domNode = document.getElementById('root');
    return ReactDom.createPortal(
      <div className={this.getClass()} style={this.getStyle()} contentEditable='false'>
        <ul>
          {data&&data.map((it)=>{
            /*return <li onClick={(e)=>this.handleSelect(e,it)} className={it.selected||(it.selected!==false&&+it.defaultSelect===1)?style['selected']:''}>{it.labelPrefix}{it.questionDetailList&&it.questionDetailList.length>0?it.questionDetailList[0].name:it.name}{it.labelSuffix}</li>*/
            return <li onClick={(e)=>this.handleSelect(e,it)} className={it.selected||(boxMark!=1&&!hideTag&&it.selected!==false&&+it.defaultSelect===1)?style['selected']:''}>{it.labelPrefix}{it.name}{it.labelSuffix}</li>
          })}
          <li onClick={(e)=>this.handleClear(e)} className='red'>清空选项</li>
        </ul>
      </div>
    ,domNode)
  }
}

export default DropList;