import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { BrowserRouter, Route,Link } from 'react-router-dom';
import StaffHeader from '../../common/staffHeader'

import { actionCreators } from './store';

class lock_count extends PureComponent {

    

    getListArea() {
        const { list, menu } = this.props;
        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 (
            <div>
                <StaffHeader />
                <main id="js-page-content" role="main" class="page-content">
          <div class="row">
            <div class="col-xl-12">
              <div id="panel-1" class="panel">
                <div class="panel-hdr">
                  <div class="col-auto pr-0">
                    <div class="input-group input-group-sm bg-white shadow-inset-2">
                      <input type="text" class="form-control bg-transparent" placeholder="锁号"/>
                      <div class="input-group-append">
                        <button class="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i class="fal fa-search"></i></button>
                      </div>
                    </div>
                  </div>
                  <div class="col-auto pr-0">
                    <select class="custom-select form-control custom-select-sm">
                      <option selected="">办事处</option>
                      <option value="1">广东办</option>
                      <option value="2">总部</option>
                      <option value="3">江西办</option>
                    </select>
                  </div>
                  <div class="col-auto ml-auto">
                  </div>
                  <div class="col-auto pl-0">
                    <button class="btn btn-sm btn-default" data-toggle="dropdown"><i class="fal fa-sort-amount-down"></i> 排序</button>
                    <div class="dropdown-menu dropdown-menu-right" id="paixu">
                      <ul class="list-unstyled px-3 pt-2 mb-0">
                        <li class="mb-2">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="pai1" name="paizhi" id="on" checked/>
                            <label class="custom-control-label" for="pai1">已使用</label>
                          </div>
                        </li>
                        <li class="mb-2">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="pai2" name="paizhi"/>
                            <label class="custom-control-label" for="pai2">未使用</label>
                          </div>
                        </li>
                        <li class="mb-2">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="pai3" name="paizhi"/>
                            <label class="custom-control-label" for="pai3">合计</label>
                          </div>
                        </li>
                      </ul>
                      <ul class="list-unstyled px-3 pt-2 mb-0 border-top">
                        <li class="mb-2">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="pdown" name="paixu" id="on" checked/>
                            <label class="custom-control-label" for="pdown">降序</label>
                          </div>
                        </li>
                        <li class="mb-2">
                          <div class="custom-control custom-radio">
                            <input type="radio" class="custom-control-input" id="pup" name="paixu"/>
                            <label class="custom-control-label" for="pup">升序</label>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                <div class="panel-container show">
                  {/* <!--数据内容区--> */}
                  <div class="panel-content">
                    <table class="table table-bordered table-hover table-striped">
                      <thead>
                        <tr>
                          <th rowspan="2">办事处</th>
                          <th rowspan="2">员工</th>
                          <th colspan="3" class="text-center">锁合计</th>
                        </tr>
                        <tr>
                          <th title="接收">未使用</th>
                          <th title="销售、赠送、借出、升级、收回、更换">已使用</th>
                          <th>合计</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>总部</td>
                          <td>王晶</td>
                          <td>30</td>
                          <td>70</td>
                          <td>100</td>
                        </tr>
                        <tr>
                          <td>总部</td>
                          <td>黄嘉玲</td>
                          <td>41</td>
                          <td>71</td>
                          <td>101</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
            </div>
        );
    }

    //组件即将要被挂在的时候执行的方法--
    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));
        },
    }
}

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