import React, { Component } from 'react';
import { Provider,connect } from 'react-redux';
import { BrowserRouter, Route,Link } from 'react-router-dom';
//import store from './store';

import {Client} from './indexComponents';
import { actionCreators } from './common/store';


class contact extends Component {

  render() {
    const { menuActive,handleMenuActive } = this.props;
     //console.log(this.state);
    //console.log(store.getIn('common','menuActive'));
    return (
      // <Provider store={store}>
         
         <BrowserRouter>
          <aside className="page-sidebar">
            <div className="page-logo">
              <a href="#modal-shortcut" className="page-logo-link press-scale-down d-flex align-items-center position-relative" data-toggle="modal">
                <div className="icon-stack fa-2x">
                  <i className="base base-4 icon-stack-3x opacity-100 color-info-700"></i>
                  <i className="base base-12 icon-stack-2x opacity-100 color-info-500"></i>
                  <i className="fal fa-box icon-stack-1x opacity-100 color-white"></i>
                </div>
                <span className="page-logo-text mr-1">客户</span>
                <span className="position-absolute text-white opacity-50 small pos-top pos-right mr-2 mt-n2"></span>
                <i className="ni ni-my-apps d-inline-block ml-1 fs-lg color-primary-300"></i>
              </a>
            </div>
            <nav id="js-primary-nav" className="primary-nav" role="navigation">
            
              <ul id="js-nav-menu" className="nav-menu">
                <li className={menuActive=='client'?'active':''} onClick={()=>handleMenuActive('client')} >
                  <Link to='/contact'>
                  <i className="fal fa-address-book"></i>
                      <span className="nav-link-text">联系人 {} </span>
                  </Link>
                  
                </li>
                <li className={menuActive=='company'?'active':''} onClick={()=>handleMenuActive('company')}>
                  <Link to='/contact/company'>
                  <i className="fal fa-building "></i>
                      <span className="nav-link-text">公司</span>
                  </Link>
                </li>
              </ul>
            </nav>
            
          </aside>
          <div className="page-content-wrapper">
               
                <Route path='/contact' exact component={Client} ></Route>
                <Route path='/contact/company' exact render={()=><div>使用统计--------------------------------=================================-------------------</div>} ></Route>
                {/* render={()=>{<div>使用统计--------------------------------=================================-------------------</div>}} */}
          </div>
            </BrowserRouter>
        
      // </Provider>
    );
  }

}

const mapStateToProps = (state) => {

  return {
    menuActive: state.getIn(['commonContact', 'menuActive']),
  }
}


const mapDispathToProps = (dispatch) => {
  return {
    handleMenuActive(value) {
     
      dispatch(actionCreators.menuActive(value));
    },
  }
  
}
// export default contact;
export default connect(mapStateToProps, mapDispathToProps)(contact);
