import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
// import { BrowserRouter, Route,Link } from 'react-router-dom';

import { actionCreators } from './store';

import StaffHeader from '../../common/staffHeader';
import DataTable from '../../common/dataTable';


// import '../style.css';
// import { get } from 'immutable';
import ClientPopups from '../../common/popups'

// const client =(props)=>{
//     const { searchValue,columns,clientThead,handleInputSearchValue } = props;
//     return (
//       <div></div>
//     );
// }

let dt = null;

class client extends PureComponent {

  getListArea() {
    const { list, menu } = this.props;
    // const newList = list.toJS();
    // const pageList = [];

    // if (newList.length) {
    // 	forHtml (let i = (page - 1) * 10; i < page * 10; i++) {
    // 		pageList.push(
    // 			<SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
    // 		)
    // 	}
    // }
    //可以直接获得输入框里的内容
    menu;
    if (true) {
      return (
        <div>
          {
            list.map((item) => {
              return <span className='ispan' type="text" key={item} >{item}</span>
            })
          }
        </div>
      )
    } else {
      return null;
    }
  }

  render() {
    const { handleInputChange, columns, columnsData, handleSearch, handleColumnsShow, handleColumnBindEvent } = 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">
                        {
                          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>
                                  {/* onClick={() => handleColumnsShow(index)} */}
                                </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" forHtml="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" forHtml="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" forHtml="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" checked="" />
                            <label className="custom-control-label" forHtml="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" forHtml="pup">升序</label>
                          </div>
                        </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 " >
                    {/* this.constructClientColumns()  this.constructClientThead()   */}
                    <DataTable onRef={(ref) => dt = ref} url={`/contact/client`} columnBindEvent={handleColumnBindEvent} columnsData={columnsData} columns={columns.toJS()} />

                    {/* <table id="dt-basic-example"  className="table table-bordered table-hover table-striped w-100">
                      <thead>
                        <tr>
                          <th>联系人</th>
                          <th>客户名称</th>
                          <th>手机</th>
                          <th>电话</th>
                          <th>QQ</th>
                          <th>部门</th>
                          <th>职务</th>
                          <th>办公室</th>
                          <th>地区</th>
                          <th>个人标签</th>
                          <th>协作标签</th>
                          <th>地址</th>
                          <th>乘车</th>
                          <th>地标</th>
                          <th>住宿</th>
                          <th>备注</th>
                          <th>软件锁</th>
                          <th>大司空</th>
                          <th>养护云</th>
                          <th>创建人</th>
                        </tr>
                      </thead>
                      <tbody>

                         {
                           
                          this.props.clientList.map((item) => {
                            return (
                              <tr key={item.get('id')} >
                                <td><a href="#detail" data-toggle="modal" data-target="#detail">{item.get('clientname')}</a></td>
                                <td><a href="#com-detail" data-toggle="modal" data-target="#com-detail">{item.get('companyname')}</a></td>
                                <td>{item.get('telephone')}</td>
                                <td>{item.get('phone')}</td>
                                <td>{item.get('qq')}</td>
                                <td>{item.get('department')}</td>
                                <td>{item.get('position')}</td>
                                <td>{item.get('office')}</td>
                                <td>{item.get('local')}</td>
                                <td>个人标签</td>
                                <td><span className="badge tagcol-01">
                                  <span className="d-inline-block text-truncate text-truncate-xs">这是一条标签名字很长很长的标签</span></span><span className="badge tagcol-02">
                                    <span className="d-inline-block text-truncate text-truncate-xs">特别关注</span>
                                  </span>
                                  <a data="添加标签" className="badge badge-secondary tagcol-08" href="" data-toggle="dropdown"><i className="far fa-plus"></i></a>
                                </td>
                                <td>{item.get('address')}</td>
                                <td>{item.get('ride')}</td>
                                <td>{item.get('landmarks')}</td>
                                <td>{item.get('stay')}</td>
                                <td>{item.get('mark')}</td>
                                <td><a href="#lock-detail" data-toggle="modal" data-target="#lock-detail">HNYH-0654</a></td>
                                <td>大司空</td>
                                <td>养护云</td>
                                <td>创建人</td>
                              </tr>
                            )
                          })
                        } 
                      </tbody>

                    </table> */}






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

        </main>

        <ClientPopups />
      </Fragment>
    );
  }

  //组件即将要被挂在的时候执行的方法
  componentDidMount() {
    //const { columnsData } = this.props;
    this.props.handleColumnsAllShow();
    // this.props.handleClientData(clientList);
  }






}


let delaySwitch = null;//延迟检索开关

/**
 * store里的数据映射到这个组件里的state
 * @param {*} state 
 */
const mapStateToProps = (state) => {
  return {
    clientList: state.getIn(['client', 'clientList']),
    columns: state.getIn(['client', 'columns']),
    columnsData: state.getIn(['client', 'columnsData']),
    popupsClientId: state.getIn(['popups', 'popupsClientId']),
  }
}


/**
 * 要改变store里的内容需要调用dispatch方法
 * @param {*} dispatch 
 */
const mapDispathToProps = (dispatch) => {
  return {
    handleClientData(list) {
      (list.size === 0) && dispatch(actionCreators.getClientLIst());
    },
    //检索联系人
    handleSearch(serchValue) {
      //e.target --可以获得dom
      if (delaySwitch != null) {
        clearTimeout(delaySwitch);
      }
      delaySwitch = setTimeout(() => {
        let filter = {
          searchValue: serchValue.value
        };
        dt.handleSearch(filter);
      }, 350);
    },
    //----组件更新后，调用更新后的方法---利用引用的方式操作子组件方法
    handleInputChange(e, index) {
      //dispatch(actionCreators.toggleColumns(index));
      dt.handleColumnVisible(index, e.target.value);
      // const target = event.target;
      // const value =  target.checked;
      // console.log(value);
    },
    handleColumnsShow(index) {
      dispatch(actionCreators.toggleColumns(index));
    },
    handleColumnsAllShow() {
      dispatch(actionCreators.toggleColumnsAll(dt));
    },
    //构建列的点击事件
    handleColumnBindEvent(res) {
      console.log(this);
      for (var i = 0 ; i < res.data.length; i++) {
        res.data[i].clientname = `<a onClick="abc()" href="#detail" data-toggle="modal" data-target="#detail">${res.data[i].clientname}</a>`;
      }
      return res;
    },
    
    //要操作子组件-更新父组件的值，把父组件的方法传递过去

    //-----
  }
}


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