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

import { Table } from 'antd';
import 'antd/dist/antd.css';

import { actionCreators } from './store';

class lock_store extends PureComponent {
    render() {
        
        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" ref={(input) => { this.searchValue = input }} onKeyUp={() => handleSearch(this.searchValue)} className="form-control bg-transparent" placeholder="锁号" />
                    </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">已显示列</button>
                      <div className="dropdown-menu">
                        <ul className="list-unstyled px-3 pt-2 mb-0">
                        {/* {
                          columnsData.map((item, index) => {
                            return (
                              <li key={index} className="mb-2">
                                <div className="custom-control custom-switch">
                                  <input type="checkbox" name={index} onChange={(e) => handleInputChange(e, index)} value={item.get('columnsValue')} checked={item.get('columnsValue')} className="custom-control-input" id={"lie" + index} />
                                  <label onClick={() => handleColumnsShow(index)} htmlFor={"lie" + index} className="custom-control-label" >{item.get('columnsName')}</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
                     
                  /> 
                  {/* 接口路径 */}
                  {/* <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnBindEvent={handleColumnBindEvent} columnsData={columnsData} columns={columns.toJS()}/> */}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </main>
        {/* <Popups mainView={'lock_store'} onRef={(ref) => popupsObj = ref} /> */}
        {/* <LockDetail /> */}
            </div>
        );
    }

    //组件即将要被挂在的时候执行的方法--
    componentDidMount(){
      
    }

}

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

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

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