/**
 * Created by baoyinghai on 1/4/17.
 */
import React, { PropTypes } from 'react';
import { iconWrapper } from '../../framework/utils/IconHelper';
import { getLoadingBarStatus } from '../../framework/service/CacheService';

// 模糊查询  条件之间是或关系
export default class Search extends React.Component {
  static propTypes = {
    dataSource: PropTypes.array,
    onSearch: PropTypes.func,
  };

  static defaultProps = {
    dataSource: [],
  };

  constructor(props) {
    super(props);
    const dataSource = this.props.dataSource;
    const title = [];
    const filterItems = [];
    dataSource.forEach(item => {
      title.push(item.displayValue);
      filterItems.push({ fieldName: item.name });
    });
    this.searchValue = undefined;
    this.state = {
      title,
      filterItems,
      value: ''
    };
  }

  _onChange = e => {
    const value = e.target.value;
    const { filterItems } = this.state;
    const updated = filterItems.map(item => {
      item.value = value;
      return item;
    });
    this.setState({ filterItems: updated, value: value });
  };

  _onSearch = () => {
    if (!this.state.filterItems || this.state.filterItems.length === 0) return;
    const searchValue = this.state.filterItems[0].value;
    if (searchValue === this.searchValue) return;
    this.searchValue = searchValue;
    this.props.onSearch && this.props.onSearch(this.state.filterItems);
  };


  _getPlaceHolder = () => {
    return '请输入' + this.state.title.join('/');
  };

  _inputBlur = e => {
    const wrapperDiv = e.currentTarget.parentNode;
    const inputEle = e.currentTarget;
    const icon = wrapperDiv.childNodes[1];
    this._setBlurStyle(wrapperDiv, inputEle, icon);
  };

  _setFocusStyle = (wrapperDiv, inputEle, icon) => {
    // const searchInput = document.querySelector('.simple-modal-search-bar input');
    if (!this.inputWidth) {
      this.inputWidth = (14 * this._getPlaceHolder().length) + 'px';
      inputEle.style.maxWidth = '400px';
    }
    inputEle.style.width = this.inputWidth;
    // inputEle.style.width = '200px';
    inputEle.focus();
    if (wrapperDiv) wrapperDiv.style.border = '1px solid #108ee9';
    if (icon) icon.style.color = '#108ee9';
  };

  _setBlurStyle = (wrapperDiv, inputEle, icon) => {
    if (!inputEle.value) {
      inputEle.style.width = '0px';
      wrapperDiv.style.border = '';
      if (icon) icon.style.color = '';
    }
  };

  componentDidMount() {

  }

  _onKeyDown = e => {
    if (e.keyCode === 13) {
      console.log('keyCode === 13');
      if (parseInt(e.currentTarget.style.width, 10) > 0) {
        this._onSearch();
      }
    }
  };

  /* eslint-disable */
  render() {
    const eventHandler = {
      onMouseOut: e => {
        const wrapperDiv = e.currentTarget;
        const inputEle = wrapperDiv.childNodes[0];
        const icon = wrapperDiv.childNodes[1];
        this._setBlurStyle(wrapperDiv, inputEle, icon);
      },
      onMouseOver: e => {
        const wrapperDiv = e.currentTarget;
        const inputEle = wrapperDiv.childNodes[0];
        const icon = wrapperDiv.childNodes[1];
        this._setFocusStyle(wrapperDiv, inputEle, icon)
      }
    };
    return (
      <div {...eventHandler} className="simple-modal-search-bar">
        <input type="text" onChange={this._onChange} placeholder={this._getPlaceHolder()} onBlur={this._inputBlur} onKeyDown={this._onKeyDown} />
        {iconWrapper('icon-fangdajing', null, null, { onClick: this._onSearch })}
      </div>
    )
  }
}
