import React from 'react';
import WeesoTop from './childComponents/WeesoTop';
import WeesoInput from './childComponents/WeesoInput';
import {inject, observer} from 'mobx-react';
import {Spin, Row} from 'antd';
import {WeaLocaleProvider} from 'ecCom';
import WessoRecords from './WessoRecords.js';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

const allstore = ['routing','weesoStore', 'weesoSeachSetStore'];
@inject(...allstore)
@observer
class Weeso extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    let pageuuid = this.props.routing&&this.props.routing.location&&this.props.routing.location.query&&this.props.routing.location.query.page_uuid;
    const { setState, getCustompageBaseDatas } = this.props.weesoSeachSetStore;
    const { initWeeso, setUrlParams } = this.props.weesoStore;
    if(pageuuid) {
      setUrlParams({});
      setState({ page_uuid: pageuuid }, () => {
        initWeeso(pageuuid);
        getCustompageBaseDatas({
          page_uuid: pageuuid,
          cuspage_type: '1'
        }, 'init');
      });
    } else {
      initWeeso();
      getCustompageBaseDatas({
        cuspage_type: '1'
      }, 'init');
    }
  }
  
  componentDidMount() {
    const {weesoStore} = this.props;
    // weesoStore.initWeeso();
    weesoStore.showAdmin = true;
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.location&& nextProps.location&&this.props.location.key!==nextProps.location.key){
      const {weesoStore} = this.props;
      // weesoStore.initWeeso();
    }
  }

  componentWillUnmount() {
    if(this.props.location) {
      const { query } = this.props.location;
      const { setState } = this.props.weesoStore;
      if(query.page_uuid && (query.page_uuid !== '' && query.page_uuid !== 'FULLSEARCH') ) {
        setState({ widthMap: {} });
      }
    }
  }
  
  render() {
    const { baseDatas, baseDatas: { page_showIcon, page_icon, page_title } } = this.props.weesoSeachSetStore;
    let titleStr=page_title;
    if(!titleStr){
        titleStr=getLabel( 31953 , "微搜");
    }
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@u42qez`} spinning={this.props.weesoStore.spinning}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@f7h30q`} className="esearch-container-header">
          <div className="wea-weeso" titleParams={this.props.weesoStore.ecodeTitleParams}>
            <div className="weeso-topbox-container">
              <WeesoTop ecId={`${this && this.props && this.props.ecId || ''}_WeesoTop@8228ht`}/>
            </div>
            <div className="weeeso-title">
              <div className="titlt-position">
                {page_icon && page_icon.indexOf('CLASSNAME') > -1 ?
                  <i className="icon-coms-ws"></i>
                  :
                  (
                    page_icon !== '' ? <img className="img-logo" width={42} height={42} src={`${page_icon}`}/> : ''
                  )
                }
                <span className="weeso-cursor">
                    {titleStr}
              </span>
              </div>
            </div>
            <WeesoInput ecId={`${this && this.props && this.props.ecId || ''}_WeesoInput@g5rpmb`}/>
          </div>
        </Row>

        <WessoRecords ecId={`${this && this.props && this.props.ecId || ''}_WessoRecords@qdpj05`} />
      </Spin>
    )
  }
}

export default props => <Weeso ecId={`${this && this.props && this.props.ecId || ''}_Weeso@1x11f1`} {...props} key={props.location.search || 'weeso-home'} />