import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import StaffHeader from '../../common/staffHeader';
import { actionCreators } from './store';

import { Table, Radio, Spin, Space, Tag } from 'antd';
import 'antd/dist/antd.css';
import Popups from '../../common/popups';

const radioStyle = {
  display: 'block',
  height: '30px',
  lineHeight: '30px',
};

let popupsObj = null;
class company extends PureComponent {

  render() {
    const { columnsVisible, companyList, pagination, handleCompanyData, loading, columns, sortField, sort,
      handleColumnsShow, handleInputChange, handleCompanySortField,handleCompanySort } = this.props;

    return (
      <Fragment>
        <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">
                    <button className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">省/市/区</button>
                    <div className="dropdown-menu width300" >
                      <ul className="nav nav-tabs nav-tabs-clean justify-content-center" role="tablist">
                        <li className="nav-item"><a className="nav-link text-center active" data-toggle="tab" href="#tab-province2" role="tab" aria-selected="true">省份</a></li>
                        <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-city2" role="tab" aria-selected="false">市区</a></li>
                        <li className="nav-item"><a className="nav-link" data-toggle="tab" href="#tab-area2" role="tab" aria-selected="false">县区</a></li>
                      </ul>
                      <div className="tab-content p-3">
                        <div className="tab-pane city-item fade active show" id="tab-province2" role="tabpanel" aria-labelledby="tab-province">

                          <p className="mb-1"><button type="button" className="btn btn-xs btn-outline-default">黑龙江省</button><button type="button" className="btn btn-xs btn-outline-default">吉林省</button><button type="button" className="btn btn-xs btn-outline-default">辽宁省</button></p>

                        </div>
                        <div className="tab-pane city-item fade" id="tab-city2" role="tabpanel" aria-labelledby="tab-city">
                          <button type="button" className="btn btn-xs btn-outline-default">广州市</button>

                        </div>

                        <div className="tab-pane city-item fade" id="tab-area2" role="tabpanel" aria-labelledby="tab-area">
                          <button type="button" className="btn btn-xs btn-primary">香洲区</button>
                        </div>
                      </div>
                    </div>
                  </div>



                  {/*   
value={searchValue} onChange={handleInputSearchValue}
                  */}

                  <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="姓名/客户/手机/QQ" /> */}
                    </div>
                  </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">
                        {
                          columnsVisible.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">
                        
                          <Radio.Group onChange={(e) => handleCompanySortField(pagination.toJS(),this.props,e)} value={sortField}>
                            <Radio style={radioStyle} value='CREATETIME'>
                              添加时间
                          </Radio>
                            <Radio style={radioStyle} value='UPDATETIME'>
                              编辑时间
                          </Radio>
                          </Radio.Group>
                        </li>
                      </ul>
                      <ul className="list-unstyled px-3 pt-2 mb-0 border-top">
                        <li className="mb-2">
                          <Radio.Group onChange={(e) => handleCompanySort(pagination.toJS(),this.props,e)} value={sort}>
                            <Radio style={radioStyle} value='DESC'>
                              递减
                          </Radio>
                            <Radio style={radioStyle} value='ASC'>
                              递增
                          </Radio>
                          </Radio.Group>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div className="col-auto pl-0">
                    <button type="button" className="btn btn-sm btn-primary"><i className="far fa-plus"></i> 联系人</button>
                  </div>

                </div>
                <div className="panel-container show ">
                  <div className="panel-content " >

                    <Table
                      onChange={(pagination, filters, sorter) => handleCompanyData(pagination, filters, sorter, this.props)}
                      pagination={pagination.toJS()}
                      loading={loading}
                      bordered
                      columns={columns.toJS()}
                      dataSource={companyList.toJS()}
                    />

                  </div>
                </div>
              </div>
            </div>
          </div>

        </main>



        <Popups mainView={'company'} onRef={(ref) => popupsObj = ref} />


      </Fragment>
    )
  }

  componentDidMount() {
    const { handleCompanyData, handleColumnsAllShow, pagination } = this.props;
    handleCompanyData(pagination.toJS(), {}, {}, this.props);
    //handleColumnsAllShow();
  }

}




const mapStateToProps = (state) => {
  return {
    columnsVisible: state.getIn(['company', 'columnsVisible']),
    companyList: state.getIn(['company', 'companyList']),
    pagination: state.getIn(['company', 'pagination']),
    loading: state.getIn(['company', 'loading']),
    columns: state.getIn(['company', 'columns']),
    sortField: state.getIn(['company', 'sortField']),
    sort: state.getIn(['company', 'sort']),

    companyDetail: state.getIn(['popups', 'companyDetail']),

  }
}

const mapDispathToProps = (dispatch) => {
  return {
    //列隐藏显示
    handleColumnsShow(index) {
      dispatch(actionCreators.toggleColumns(index));
    },
    //获得客户数据
    handleCompanyData(pagination, filters, sorter, props) {
      dispatch(actionCreators.changeLoading());
      dispatch(actionCreators.getCompanyLIst(pagination, props));
    },
    //排序设置
    handleCompanySortField(pagination, props,e) {
      dispatch(actionCreators.changeLoading());
      dispatch(actionCreators.changeSortField(e.target.value));
      dispatch(actionCreators.getCompanyLIst(pagination, props,{sortField:e.target.value,sort:props.sort}));
    },
    handleCompanySort(pagination, props,e){
      dispatch(actionCreators.changeLoading());
      dispatch(actionCreators.changeSort(e.target.value));
      dispatch(actionCreators.getCompanyLIst(pagination, props,{sortField:props.sortField,sort:e.target.value}));
    },
    //弹出详情页点击触发
    handleCompanyPopups(key) {
      popupsObj.handleCompanyPopups(key);
      // console.log(popupsObj);
      // console.log(key);
    },
  }
}

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