import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import {
  WeaLocaleProvider,
  WeaTop,
  WeaTab,
  WeaSearchGroup,
  WeaAppCenter,
  WeaRightMenu,
} from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('homepageStore','routing')
@observer
class IntegrationHomePage extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    const { homepageStore } = this.props;
    homepageStore.getApps();
  }

  onClick = datas => {
    // const { pathname, basename } = this.props.location;
    // const hashname = pathname + basename;
    // const urlHashIndex = hashname.indexOf('/integration/');

    // if(urlHashIndex === -1) {
    //   return;
    // }

    // if(urlHashIndex === 0) {
    //   weaHistory.push({ pathname: datas.routeUrl });
    // } else {
    //   const prefix = pathname.substr(0, urlHashIndex);
    //   weaHistory.push({ pathname: `${prefix}${datas.routeUrl}` });
    // }
   
    // console.log(this.props.location)
    const { routing } = this.props;
    window.doEngineThemeAction('onSubMenuClick', { infoId: datas.appid })
    datas.issingle == '0' ? routing.push(datas.routeUrl) : window.open(datas.routeUrl);
  }

  render() {
    const { homepageStore } = this.props;
    const { 
      loading, 
      tabDatas, 
      selectedKey,
      functionals,
      products,
      auth_center_server,
      auth_center_client,
      auth_center_other
     } = homepageStore;
    const collectParams = {
      favname: getLabel(32269, '集成中心'),
      favouritetype: 2,
      objid: 0,
      importantlevel: 1,
      link: 'wui/engine.html#/main/integration/homepage',
    };
    let datas = selectedKey == 0 ? toJS(functionals) : selectedKey == 1 ? toJS(products) : [];
    return (
      <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qg151p`}
        title={getLabel(32269, '集成中心')}
        icon={<i className='icon-coms-integration' />}
        iconBgcolor='#1a57a0'
        loading={loading}
        buttons={[]}
        buttonSpace={10}
        showDropIcon={true}
        dropMenuProps={{
          collectParams: collectParams
        }}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tuv7yv`} collectParams={collectParams}>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@583yt0`} 
            keyParam={"key"}
            selectedKey={selectedKey}
            datas={toJS(tabDatas)}
            onChange={v => homepageStore.selectedKey = v}
          />
          {
            selectedKey == 2
              ? <div>
                  <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ispet3`} col={1} needTigger={true} title={getLabel('516457','认证服务管理')} showGroup={true} items={[]}>
                    <div className="portal-ac-center">
                      <WeaAppCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaAppCenter@3u9wda`} pageNum={4} datas={toJS(auth_center_server)} dots={toJS(auth_center_server).length/4 > 1} onClick={this.onClick} />
                    </div>
                  </WeaSearchGroup>
                  <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@cx7k3p`} col={1} needTigger={true} title={getLabel('516740','认证接入管理')} showGroup={true} items={[]}>
                    <div className="portal-ac-center">
                      <WeaAppCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaAppCenter@5xz5li`} pageNum={4} datas={toJS(auth_center_client)} dots={toJS(auth_center_client).length/4 > 1} onClick={this.onClick} />
                    </div>
                  </WeaSearchGroup>
                  <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hr5rrl`} col={1} needTigger={true} title={getLabel('25740','其他')} showGroup={true} items={[]}>
                    <div className="portal-ac-center">
                      <WeaAppCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaAppCenter@uzl2yk`} pageNum={4} datas={toJS(auth_center_other)} dots={toJS(auth_center_other).length/4 > 1} onClick={this.onClick} />
                    </div>
                  </WeaSearchGroup>
                </div>
              : <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@j7mqmo`} col={1} needTigger={false} showGroup={true} items={[]}>
                  <div className="portal-ac-center">
                    <WeaAppCenter ecId={`${this && this.props && this.props.ecId || ''}_WeaAppCenter@oydt6r`} datas={datas} pageNum={Math.ceil(datas.length/4)*4} dots={false} onClick={this.onClick} />
                  </div>
                </WeaSearchGroup>
          }
        </WeaRightMenu>
      </WeaTop>
    );
  }
}

export default IntegrationHomePage;
