/**
 * Created by baoyinghai on 6/20/17.
 */
import React from 'react';
import { iconWrapper } from '../../framework/utils/IconHelper';
import './search.less';

export default class SearchBar extends React.Component {

  _onKeyDown = e => {
    e.stopPropagation();
    if (e.keyCode === 13) {
      // TODO:
      const { searchFunc } = this.props;
      searchFunc && searchFunc(e.currentTarget.value);
    }
  };

  _onFocus = e => {
    // TODO：障碍
    const node = e.currentTarget.parentNode;
    node.style.width = 'calc(100% - 350px)';
    node.style.border = '2px solid #6fbdf7';
    this.oldColor = node.lastChild.style.color;
    node.lastChild.style.color = '#6fbdf7';
  };

  _onBlur = e => {
    const node = e.currentTarget.parentNode;
    node.style.width = '';
    node.style.border = '1px solid #ededed';
    node.lastChild.style.color = this.oldColor;
  };

  render() {
    return (
      <div className="search-bar-wrapper">
        <input onFocus={this._onFocus} onBlur={this._onBlur} onKeyDown={this._onKeyDown} />
        {iconWrapper('icon-fangdajing')}
      </div>
    );
  }
}
