import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { PubSub } from 'ray-eventpool';
import { Input } from 'amos-framework';
import Icon from 'amos-icon';
import { browserHistory } from 'amos-react-router';
import { amosRequest } from 'amos-processor';
import { secExtUrl } from 'CONSTS/urlConsts';
import NavTab from './navtab';


class AppList extends Component {
  static propTypes = {
    onClosed: PropTypes.func
  };

  constructor(props) {
    super(props);
    this.state = {
      activeTab: 'all',
      activeItem: {},
      tabAll: []
    };
  }

  componentWillMount() {
    this.onSetAppList('');
  }

  componentDidMount() {
    PubSub.publish('menus-click', {
      leftClose: this.onSystemClick
    });
  }

  componentWillUnmount() {
    this.setState({
      tabAll: []
    });
  }

  onSystemClick = (sysItem) => {
    this.props.onClosed();
  }

  onSetAppList = (name) => {
    // amosRequest(`${Url.applistByNameUrl}?name=${name}`,{ method: 'GET' }).then((data) => {
    amosRequest(`${secExtUrl.opSearchMenusUrl}?nodeName=${name}&type=28`,{ method: 'GET' }).then((data) => {
      let res = (data || {}).dataList || [];
      let _allApp = [];
      let allApp = [];
      const convetData = (data, index, list) => {
        data.map(e => {
          let obj = {};
          if (index === 0) {
            obj.key = e.id;
            obj.text = e.name;
            obj.children = [];
            list.push(obj);
          }
          if (index !== 0 && !e.children) {
            let obj = {};
            obj.key = e.id;
            obj.title = e.name,
            obj.funcIcon = e.image || '/src/assets/funcicon/search.png';
            obj.linkTo = e.url;
            _allApp.push({
              key: obj.key,
              title: obj.title,
              funcIcon: obj.funcIcon,
              linkTo: obj.linkTo
            });
            obj.children = [];
            list.push(obj);
            if (e.children && e.children.length > 0) {
              convetData(e.children, 1, obj.children);
            }
          } else {
            if (e.children && e.children.length > 0) {
              convetData(e.children, 1, obj.children || list );
            }
          }
        });
      };
      convetData(res, 0, allApp);
      allApp.length > 0 && allApp.unshift({ key: 'all', text: '全部', children: _allApp, count: _allApp.length });
      console.log('allApp===========',allApp);
      this.setState({ tabAll: allApp, activeItem: allApp[0] });
    });
  }
  /**
   * tab变化
   */
  onTabChange = (activeTab, item) => {
    this.setState({
      activeTab,
      activeItem: item
    });
  }
  /**
   * 收藏
   */
  onFavorite = (isFavorite, item) => {
    // amosRequest(`${Url.appCollectionUrl}/${item.key}`,{ method: 'POST' });
  }
  /**
   * 行点击
   */
  onItemClick = (key, item) => {
    browserHistory.push(item.linkTo);
    this.props.onClosed();
    PubSub.publish('menus-click', {
      leftClose: this.onSystemClick
    });
  }

  render() {
    const { activeTab, tabAll } = this.state;
    return (
      <div className="app-list">
        <Input
          className="app-search center-block"
          placeholder="搜索可用服务"
          onChange={(e)=>this.setState({ searchValue: e.target.value })}
        />
        <Icon onClick={()=>this.onSetAppList(this.state.searchValue || '')} className="app-search-icon cursor-p" icon="search" />
        <NavTab
          tabAll={tabAll}
          onFavorite={this.onFavorite}
          activeTab={activeTab}
          onTabChange={this.onTabChange}
          onItemClick={this.onItemClick}
        />
      </div>
    );
  }
}

AppList.propTypes = {

};

export default AppList;
