import React, {Component} from 'react';
import style from './index.less'
import showImg from "@common/images/show.png";
import hideImg from "@common/images/close.png";
import infoShow from '@common/images/info-show.png';
import infoMove from '@common/images/info-move.png';


class RecommendInspect extends Component {
    constructor(props) {
        super(props)
        this.state = {
          showAll: false,
          hasEnterItem: -1,
          hasEnterImg: false
        }
       
        this.renderItem = this.renderItem.bind(this)
    }
    changeShowFlag() {
      this.setState({
        showAll: !this.state.showAll
      })
    }
    getTips(item) {
      const { getInfomation, type } = this.props
      const name = type === 12 ? item.uniqueName :item.name
      getInfomation && getInfomation({ name: name || '', type: type, position: 1 })
    }
    
    renderItem(item, index) {
      const { changeFlag,getInfomation } = this.props
      const { hasEnterItem,hasEnterImg  } = this.state
      return <span className={style['itemLabelBox']} title={item.name}>
          <input
            id={item.id + item.name}
            onChange={() =>changeFlag(item)}
            type="checkbox"
            checked={item.checked}
          />
          <span className={style['itemLabelNameBox']}
              onMouseEnter={this.handleMouseEnterDrug.bind(this , index)}
              onMouseLeave = {this.handleMouseLeaveDrug.bind(this, index)}
          >
            <label className={style['itemLabel']}  for={item.id + item.name}>{item.name}</label>
            <img 
              className={style['info-img']} 
              title='点击i图标可查看详细说明'
              style ={hasEnterItem ===index  ? {display: "inline-block"} : {display: "none"}}
              src={hasEnterImg ? infoMove : infoShow} 
              onMouseEnter={this.handleMouseEnterImg.bind(this)}
              onMouseLeave = {this.handleMouseLeaveImg.bind(this)}
              onClick={this.getTips.bind(this,item)}
             />
          </span>
      </span>
    }
    handleMouseEnterDrug(index) {
      this.setState({
          hasEnterItem: index, 
      })
    }
    handleMouseLeaveDrug() {
      this.setState({
          hasEnterItem: -1, 
      })
    }
    handleMouseEnterImg() {
      this.setState({
        hasEnterImg: true
      })
    }
    handleMouseLeaveImg() {
      this.setState({
        hasEnterImg: false
      })
    }

    render() {
      const { title,list, changeFlag, border } = this.props
      const { showAll } = this.state
      const listAll = list.map((item,index) => {
          return this.renderItem(item,index)
      });
      let firstLineNum = 0;   //第一行字数
      let secondLineNum = 0;      //第二行字数
      const listHide = list.map((item, index) => {
        let itemNameLen =  item.name.length
        if(itemNameLen > 24) {
          itemNameLen = 24
        }
        firstLineNum = firstLineNum + itemNameLen + 2;
        if (firstLineNum > 26) {
          if(itemNameLen > 18) {
            itemNameLen = 18
          }
          secondLineNum = secondLineNum + itemNameLen + 2; 
          if(secondLineNum > 20) {
            return;
          } else {
            return this.renderItem(item, index)
          }
        } else {

          return this.renderItem(item, index)
        }
      });

      return   (
            <li className={style["inspectItem"]} style={border ? {"borderBottom": "1px solid #DFDFDF"} : ''}>
              <div className={style["title"]}>{title}：</div>
              <div className={style["content"]}>
                {list.length === 0
                  ?<span >无</span>
                  : showAll
                  ? listAll
                  : listHide}
                {secondLineNum > 21 ? (
                  <span
                    style={{ display: "inline-block" }}
                    className={style["show"]}
                    onClick={this.changeShowFlag.bind(this)}
                  >
                    {showAll ? '收起' : '更多'}
                    <img src={showAll ? hideImg : showImg} />
                  </span>
                ) : (
                  ""
                )}
              </div>
            </li>
        )
    }
}

export default RecommendInspect;