import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Route,Link } from 'react-router-dom';

import { actionCreators } from './store';

// import { CSSTransition } from 'react-transition-group';
// const Submenu = (props) => {
//     return (
//         <div>
//             <input onFocus={props.handleInputFocus} />
//             {props.menu}</div>
//     )

// }

/**
 * 可替换成无状态组件
 */


class Content extends PureComponent {

    

    getListArea() {
        const { list, menu } = this.props;
        // const newList = list.toJS();
        // const pageList = [];

        // if (newList.length) {
        // 	for (let i = (page - 1) * 10; i < page * 10; i++) {
        // 		pageList.push(
        // 			<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
        // 		)
        // 	}
        // }
        //可以直接获得输入框里的内容
        menu;
        if (true) {
            return (
                <div>
                   {
                    list.map((item) => {
                        return <span className='ispan' type="text" key={item} >{item}</span>
                    })
                }
                </div>
            )
        } else {
            return null;
        }
    }


    render() {
        const { inputValue, handleInputFocus,handleInputChange, menu, list } = this.props;
        return (
            <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="active">
                    <a href="/product" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
                        <span class="nav-link-text">公共锁库</span>
                      </a>
                      <Link to='/product'>公共锁库</Link>
                    </li>
                    <li>
                    <a href="/product/lockStatistics" title="Analytics Dashboard" data-filter-tags="application intel analytics dashboard">
                        <span class="nav-link-text">使用统计</span>
                      </a>
                      <Link to='/product/lockStatistics'>使用统计</Link>
                    </li>
                  </ul>
                
                </li>
                
              </ul>
              
            </nav>
            
          </aside>
          <div  id="content">
               
                {/* <Route path='/product' exact component={Lockstore} ></Route>
                <Route path='/product/lockStatistics' exact render={()=><div>使用统计</div>} ></Route> */}
               
          </div>
            </BrowserRouter>
        );
    }

    //组件即将要被挂在的时候执行的方法--
    componentDidMount(){
        //逻辑代码可以写在mapDispathToProps里 this.props.方法

        // axios.get('/api/submenuList.json').then((res) => {
        //     const data = res.data;
        //     dispatch(changeList(data.data));
        // }).catch(() => {
        //     console.log('error');
        // })
    }

}



/**
 * store里的数据映射到这个组件里的state
 * @param {*} state 
 */
const mapStateToProps = (state) => {

    return {
        //menu: state.submenu.menu
        menu: state.getIn(['submenu', 'menu']),
        list: state.getIn(['submenu', 'list']),
        inputValue: state.getIn(['submenu', 'inputValue']),
    }
    // return {
    // 	focused: state.getIn(['header', 'focused']),
    // 	list: state.getIn(['header', 'list']),
    // 	page: state.getIn(['header', 'page']),
    // 	totalPage: state.getIn(['header', 'totalPage']),
    // 	mouseIn: state.getIn(['header', 'mouseIn'])
    // }
}


/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
    return {
        handleInputFocus(list) {

            // const action = {
            //     type: 'aearch_focus'
            // };
            //发送给store--提取出action--避免发送重复的ajax请求
            (list.size === 0) && dispatch(actionCreators.getList());
            // if(list.size>0){
            //     dispatch(actionCreators.getList());
            // }
            dispatch(actionCreators.searchFocus());
        },
        handleInputChange(ivalueElem){
           
            dispatch(actionCreators.changeInputValue(ivalueElem.value));
        },
    }
    // return {
    // 	handleInputFocus(list) {
    // 		(list.size === 0) && dispatch(actionCreators.getList());
    // 		dispatch(actionCreators.searchFocus());
    // 	},
    // 	handleInputBlur() {
    // 		dispatch(actionCreators.searchBlur());
    // 	},
    // 	handleMouseEnter() {
    // 		dispatch(actionCreators.mouseEnter());
    // 	},
    // 	handleMouseLeave() {
    // 		dispatch(actionCreators.mouseLeave());
    // 	},
    // 	handleChangePage(page, totalPage, spin) {
    // 		let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
    // 		if (originAngle) {
    // 			originAngle = parseInt(originAngle, 10);
    // 		}else {
    // 			originAngle = 0;
    // 		}
    // 		spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';

    // 		if (page < totalPage) {
    // 			dispatch(actionCreators.changePage(page + 1));
    // 		}else {
    // 			dispatch(actionCreators.changePage(1));
    // 		}
    // 	}
    // }
}

export default connect(mapStateToProps, mapDispathToProps)(Content);
