import React from 'react'
import css from './tip.scss'
import _ from 'lodash'

export default class Tip extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      chooseNow: "",//当前选中的记录
      chooseIndex: -1,//当前选中的记录
    }
  }

  componentDidMount() {

    document.addEventListener('keydown', this.upDownKey, false);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.upDownKey, false)
  }


  componentWillReceiveProps(next) {
    const {kw} = this.props
    if (kw && kw !== next.kw) {
      this.setState({
        chooseNow: "",//当前选中的记录
        chooseIndex: -1,//当前选中的记录
      })
    }
  }

  getTop = (kw) => {
    const {lang} = this.props
    return kw ? null : <li className={`${css.top} s-b-default`}>
      <span className={`${css.lately} s-hint`}>{lang.recently}</span>
      <span className={`${css.clear} s-lesser`} onClick={() => {
        this.onDelKeyWords("")
      }}>{lang.empty}</span>
    </li>
  }

  getItem = () => {
    const {currentUserRecord, spanOnClick} = this.props;
    const {chooseNow} = this.state;

    return currentUserRecord.map((v, i) => {
      return <li key={`u-${i}`}
                 className={`${css.kw} ${css.myKw} ${v === chooseNow ? css["choose-now"] : ""} s-primary s-bg-search-tip`}>
        <span onClick={() => {
          spanOnClick(v)
        }}>{v}</span>
        <i className={`${css['kw-icon-del']} ks-iconfont ks-icon-shanchu s-hint`} onClick={() => {
          this.onDelKeyWords(v)
        }}> </i>
      </li>
    })
  }

  //获取全局搜索的数据
  getGolbalItem = () => {
    const {globalUserRecord, spanOnClick} = this.props;
    const {chooseNow} = this.state;
    return globalUserRecord.map((v, i) => {
      return <li key={`gu-${i}`} className={`${css.kw} ${v === chooseNow ? css["choose-now"] : ""} s-bg-search-tip`}>
        <span onClick={() => {
          spanOnClick(v)
        }}>{v}</span>
      </li>
    })

  }


  //点击删除
  onDelKeyWords = (tar) => {
    this.delUserRecord(tar);
  }


  delUserRecord = (tar) => {
    const {searchRecord, kw, httpAgent} = this.props;

    httpAgent.post('/ses/user/behavior/remove', {keywords: tar}).then(res => {
      if (res && res.resultCode === '000000') {
        searchRecord(kw)
      }
    })
  }


  //上下键选择历史记录
  upDownKey = (e) => {
    const {currentUserRecord, globalUserRecord, inputFocus, kw, spanOnClick} = this.props;
    //历史记录列表
    const recondListArr = kw === '' ? currentUserRecord : _.concat(_.slice(currentUserRecord, 0, 3), _.slice(globalUserRecord, 0, 3));

    //  只有在输入框聚焦的时候，点击上下键才能进行历史记录的选择
    const {chooseIndex} = this.state;
    let index = chooseIndex;
    if (e && e.keyCode === 38 || e && e.keyCode === 37 || e && e.keyCode === 40 || e && e.keyCode === 39) {
      if (e && e.keyCode === 38 || e && e.keyCode === 37) {//上,左

        if (chooseIndex <= 0) {
          this.setState({
            chooseIndex: recondListArr.length - 1
          }, () => {
            this.setState({
              chooseNow: recondListArr[this.state.chooseIndex]
            })
          })

        } else {
          this.setState({
            chooseIndex: index - 1
          }, () => {
            this.setState({
              chooseNow: recondListArr[this.state.chooseIndex]
            })
          })

        }
      } else if (e && e.keyCode === 40 || e && e.keyCode === 39) {//下,右
        //按下键或者右键的时候
        if (chooseIndex === recondListArr.length - 1) {
          this.setState({
            chooseIndex: 0
          }, () => {
            this.setState({
              chooseNow: recondListArr[this.state.chooseIndex]
            })
          })
        } else {
          this.setState({
            chooseIndex: index + 1
          }, () => {
            this.setState({
              chooseNow: recondListArr[this.state.chooseIndex]
            })
          })
        }

      }
    }
    //  回车进行搜素
    if (e.which === 13 && inputFocus && this.state.chooseNow !== "") {
      spanOnClick(this.state.chooseNow);
      this.setState({
        chooseIndex: -1,
        chooseNow: "" //当前选中的记录
      })
    }

  }


  render() {
    const {inputFocus, kw, currentUserRecord, globalUserRecord} = this.props;
    return (
      inputFocus && (currentUserRecord.length > 0 || globalUserRecord.length > 0) ?
        <div className={`${css["ks-tip"]} s-shadow-select s-bg-container s-br-normal`}>
          <ul className={css.list}>
            {this.getTop(kw)}
            {/*如果输入框为空，显示六条当前用户的搜索词，输入框有内容，上限各三条，例如当前用户1条，全局3条，此时共展示4条*/}
            {kw === '' ? this.getItem() : _.concat(this.getItem(), this.getGolbalItem())}

          </ul>
        </div> : null
    )
  }
}