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 {
    render() {
      const { lockCount } = this.props;
        return (
            <div>
                <StaffHeader />
                <main id="js-page-content" role="main" className="page-content">
          <div className="row">
            <div className="col-xl-12">
              <div id="panel-1" className="panel">
                <div className="panel-hdr">
                  <div className="col-auto pr-0">
                    <div className="input-group input-group-sm bg-white shadow-inset-2">
                      <input type="text" className="form-control bg-transparent" placeholder="锁号"/>
                      <div className="input-group-append">
                        <button className="btn btn-default waves-effect waves-themed" type="button" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="搜索"><i className="fal fa-search"></i></button>
                      </div>
                    </div>
                  </div>
                  <div className="col-auto pr-0">
                    <select className="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 className="col-auto ml-auto">
                  </div>
                  <div className="col-auto pl-0">
                    <button className="btn btn-sm btn-default" data-toggle="dropdown"><i className="fal fa-sort-amount-down"></i> 排序</button>
                    {/* <div className="dropdown-menu dropdown-menu-right" id="paixu">
                      <ul className="list-unstyled px-3 pt-2 mb-0">
                        <li className="mb-2">
                          <div className="custom-control custom-radio">
                            <input type="radio" className="custom-control-input" id="pai1" name="paizhi" id="on" checked/>
                            <label className="custom-control-label" for="pai1">已使用</label>
                          </div>
                        </li>
                        <li className="mb-2">
                          <div className="custom-control custom-radio">
                            <input type="radio" className="custom-control-input" id="pai2" name="paizhi"/>
                            <label className="custom-control-label" for="pai2">未使用</label>
                          </div>
                        </li>
                        <li className="mb-2">
                          <div className="custom-control custom-radio">
                            <input type="radio" className="custom-control-input" id="pai3" name="paizhi"/>
                            <label className="custom-control-label" for="pai3">合计</label>
                          </div>
                        </li>
                      </ul>
                      <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
                        <li className="mb-2">
                          <div className="custom-control custom-radio">
                            <input type="radio" className="custom-control-input" id="pdown" name="paixu" id="on" checked/>
                            <label className="custom-control-label" for="pdown">降序</label>
                          </div>
                        </li>
                        <li className="mb-2">
                          <div className="custom-control custom-radio">
                            <input type="radio" className="custom-control-input" id="pup" name="paixu"/>
                            <label className="custom-control-label" for="pup">升序</label>
                          </div>
                        </li>
                      </ul>
                    </div> */}
                  </div>
                </div>
                <div className="panel-container show">
                  {/* <!--数据内容区--> */}
                  <div className="panel-content">
                    <table className="table table-bordered table-hover table-striped">
                      <thead>
                        <tr>
                          <th rowSpan="2">办事处</th>
                          <th rowSpan="2">员工</th>
                          <th colSpan="3" className="text-center">锁合计</th>
                        </tr>
                        <tr>
                          <th title="接收">未使用</th>
                          <th title="销售、赠送、借出、升级、收回、更换">已使用</th>
                          <th>合计</th>
                        </tr>
                      </thead>
                      <tbody>
                      {
                           
                           lockCount.map((item) => {
                             return (
                        <tr key={item.get('id')}>
                          <td>{item.get('key_num')}</td>
                          <td>{item.get('product')}</td>
                          <td>{item.get('telephone')}</td>
                          <td>{item.get('updatetime')}</td>
                          <td>{item.get('telephone')}</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.方法
        const { lockCount,handleLockcount } = this.props;
      
        handleLockcount(lockCount);
    }

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

    return {
      lockCount:state.getIn(['lockcount', 'lockCount']),
      menu: state.getIn(['submenu', 'menu']),
      list: state.getIn(['submenu', 'list']),
      inputValue: state.getIn(['submenu', 'inputValue']),
    }
}

/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
    return {
      handleLockcount(lockCount){
          (lockCount.size === 0) && dispatch(actionCreators.getLockcountLIst());
        },
        handleInputFocus(list) {
            //发送给store--提取出action--避免发送重复的ajax请求
            (list.size === 0) && dispatch(actionCreators.getList());
            dispatch(actionCreators.searchFocus());
        },
        handleInputChange(ivalueElem){
           
            dispatch(actionCreators.changeInputValue(ivalueElem.value));
        },
    }
}

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