import React from 'react'
import css from './type.scss'

export default class Type extends React.Component {

  constructor(props) {
    super(props)
    this.flag = true
  }

  onCompositionStart = () => {
    this.flag = false
    console.log('onCompositionStart')
  }

  onCompositionEnd = (e) => {
    this.flag = true
    console.log('onCompositionEnd')
    const { onType } = this.props
    console.log('onChange 2',e.target.value,this.flag)
    onType(e,this.flag)
  }

  onChange = (e) => {
    const { onType } = this.props
    console.log('onChange',e.target.value,this.flag)
    onType(e,this.flag) // 这里不能使用 setTimeout 0 会导致无法输入中文
  }


  render() {
    const {contentShow, kw, onType, onFocus, onClose, lang, keypress} = this.props
    return (
      <div className={`${css["ks-type"]} s-b-primary`}>
        <i className={`${css["ks-search-icon"]} ks-iconfont ks-icon-sousuo1 s-hint`}></i>
        <input type="text" placeholder={lang.search} value={kw} onFocus={onFocus}
               onKeyPress={keypress}
               onChange={this.onChange}
               onCompositionStart={this.onCompositionStart}
               onCompositionEnd={this.onCompositionEnd}
        />
        {contentShow ? <i className={`${css["close"]} s-hint ks-iconfont ks-icon-close`} onClick={onClose}/> : null}
      </div>
    )
  }
}