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

import { actionCreators } from './store';

class lock_store extends PureComponent {
    render() {
        const { lockStore } = 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">
                    <button className="btn btn-sm btn-default" type="button" data-toggle="modal" data-target="#filter"><i className="fal fa-filter"></i> 筛选</button>
                  </div>
                  <div className="col-auto ml-auto">
                      <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">已显示7列</button>
                      {/* <div className="dropdown-menu">
                        <ul className="list-unstyled px-3 pt-2 mb-0">
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie1" checked=""/>
                              <label className="custom-control-label" >锁号</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie2" checked=""/>
                              <label className="custom-control-label">产品</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie3" checked=""/>
                              <label className="custom-control-label" >办事处</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie4" checked=""/>
                              <label className="custom-control-label" >出库时间</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie5" checked=""/>
                              <label className="custom-control-label">责任人</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie6" checked=""/>
                              <label className="custom-control-label" >状态</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie7" checked=""/>
                              <label className="custom-control-label">客户</label>
                            </div>
                          </li>
                          <li className="mb-2">
                            <div className="custom-control custom-switch">
                              <input type="checkbox" className="custom-control-input" id="lie8"/>
                              <label className="custom-control-label">客户</label>
                            </div>
                          </li>
                        </ul>
                      </div> */}
                  </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" checked=""/>
                            <label className="custom-control-label" >锁号</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" >出库时间</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" checked=""/>
                            <label className="custom-control-label">降序</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" >升序</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>锁号</th>
                          <th>产品</th>
                          <th>办事处</th>
                          <th>出库时间</th>
                          <th>销售/借出/赠送时间</th>
                          <th>责任人</th>
                          <th>状态</th>
                          <th>联系人</th>
                        </tr>
                      </thead>
                      <tbody>
                      {
                           lockStore.map((item) => {
                             return (
                        <tr key={item.get('id')}>
                          <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">{item.get('key_num')}</a></td>
                          <td><span className="badge badge-primary mr-1">{item.get('product')}</span><span className="badge badge-primary mr-1">全国专业222</span></td>
                          <td>{item.get('telephone')}</td>
                          <td>{item.get('createTime')}</td>
                          <td>{item.get('updatetime')}</td>
                          <td><a href="#compe-detail" data-toggle="modal" data-target="#compe-detail">{item.get('category')}</a></td>
                          <td>{item.get('status')}</td>
                          <td><a href="#detail" data-toggle="modal" data-target="#detail">{item.get('client')}</a></td>
                        </tr>
                       
                        )
                      })
                } 
                      </tbody>
                    </table>
                    {/* <!--翻页--> */}
                    <div className="d-flex justify-content-center">
                      <ul className="pagination pagination-sm">
                        <li className="page-item disabled">
                          <a className="page-link" href="#" aria-label="Previous">
                											<span aria-hidden="true"><i className="fal fa-chevron-left"></i></span>
                										</a>
                        </li>
                        <li className="page-item active" aria-current="page">
                          <span className="page-link">
                											1
                											<span className="sr-only">(current)</span>
                          </span>
                        </li>
                        <li className="page-item"><a className="page-link" href="#">2</a></li>
                        <li className="page-item"><a className="page-link" href="#">3</a></li>
                        <li className="page-item">
                          <a className="page-link" href="#" aria-label="Next">
                											<span aria-hidden="true"><i className="fal fa-chevron-right"></i></span>
                										</a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        {/* <LockDetail /> */}
            </div>
        );
    }

    //组件即将要被挂在的时候执行的方法--
    componentDidMount(){
      const { lockStore,a } = this.props;
      
      a(lockStore);
    }

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

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

/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
    return {
        a(lockStore){
          (lockStore.size === 0) && dispatch(actionCreators.getClientLIst());
        },
        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_store);