import React, { Component } from 'react';
import { Provider,connect } from 'react-redux';
import { BrowserRouter, Route,Link } from 'react-router-dom';
import store from './store';
import { actionCreators } from './common/store';
import Lockcount from './lock_count';
import Lockstore from './lock_store';


class product 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-7 icon-stack-3x opacity-100 color-danger-900 "></i>
              <i className="base base-4 icon-stack-2x opacity-100 color-danger-600 "></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="active open">
                  <a href="#" title="软件锁" data-filter-tags="软件锁" className="waves-effect waves-themed">
                      <i className="fal fa-magic "></i>
                      <span className="nav-link-text">软件锁</span>
                  </a>
                  <ul>
                      <li className={menuActive=='lock_store'?'active':''} onClick={()=>handleMenuActive('lock_store')} >
                        <Link to='/product'>
                          <span className="nav-link-text">公共锁库 {} </span>
                        </Link>
                      </li>
                      <li className={menuActive=='lock_count'?'active':''} onClick={()=>handleMenuActive('lock_count')} >
                        <Link to='/product/lockCount'>
                          <span className="nav-link-text">使用统计 {} </span>
                        </Link>
                      </li>
                  </ul>
              </li>
              <li className="">
                  <a href="#" title="Application Intel" data-filter-tags="application intel">
                      <i className="fal fa-cloud "></i>
                      <span className="nav-link-text">云版管理</span>
                  </a>
                  <ul>
                      <li>
                          <a href="intel_analytics_dashboard.html" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
                              <span className="nav-link-text">养护云版</span>
                          </a>
                      </li>
                      <li>
                          <a href="intel_marketing_dashboard.html" title="Marketing Dashboard" data-filter-tags="application intel marketing dashboard">
                              <span className="nav-link-text">建筑云版</span>
                          </a>
                      </li>
                  </ul>
              </li>
          </ul>
          <div className="filter-message js-filter-message bg-success-600"></div>
      </nav>
        {/* <!-- END 侧栏主菜单 --> */}
      </aside>

      <div className="page-content-wrapper">
               
        <Route path='/product' exact component={Lockstore} ></Route>
        <Route path='/product/lockCount' exact component={Lockcount} ></Route>
               
      </div>
        </BrowserRouter>
        
      // </Provider>
    );
  }

}

const mapStateToProps = (state) => {

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


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