import React from 'react';
import { ListView } from 'antd-mobile';
import styles from '../mobile.less';
// eslint-disable-next-line import/first
import 'antd-mobile/dist/antd-mobile.css';
import CommobileBase from './CommobileBase';
import CommobileListEvent from './CommobileListEvent';
import CommobileSearchComponent from './CommobileSearchComponent';
import * as commonConfig from '../../utils/config';

const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row2,
});

class ContactsMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      personPic: 'https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png',
      // height: ( document.documentElement.clientHeight * 3) / 4,
    };
  }


  onEndReached = async () => {
    if ((this.props.slavePagination.current + 1) <= Math.ceil(this.props.slavePagination.total / commonConfig.pageSize)) {
      const { slaveFilterCondition, slaveData: slaveDataOld } = this.props;
      const slaveData = [...slaveDataOld];
      const addState = await this.props.onGetData(this.props.slaveConfig, slaveFilterCondition, this.props.slavePagination.current + 1, true);
      addState.slaveData = slaveData.concat(addState.slaveData);
      this.props.onSaveState({ ...addState });
      // this.state = {
      //   isLoading: true,
      // };
    }
  }

  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }

  handleGridClick = (el) => {
    const { dispatch } = this.props;
    const { slaveConfig } = this.props;
    const { gdsconfigformslave } = slaveConfig;
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < gdsconfigformslave.length; i++) {
      if (gdsconfigformslave[i].sName === 'picArr') {
        this.sActiveId = gdsconfigformslave[i].sActiveId;
      }
    }
    dispatch({
      type: 'content/onRouterMobile',
      payload: {
        url: '/indexMobile/contactsInfo',
        sModelsId: this.sActiveId,
        sId: el.sId,
        personPic: this.state.personPic,
        slaveData: this.props.slaveData,
      },
    });
  };


  render() {
    const { slaveData: slaveDataOld } = this.props;
    const slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
    const slaveData = dataSource.cloneWithRows(slaveDataOld2);

    const row = (rowData, sectionID, rowID) => {
      const obj = rowData;
      return (
        <div key={rowID} className={styles.conContent} onClick={this.handleGridClick.bind(this, obj)} >
          <div className={styles.conContentInner} >
            <img className={styles.conImg} src={this.state.personPic} alt="" />
            <div className={styles.conInfo} >
              <div className={styles.conName} >{obj.sEmployeeName}</div>
              <div><span className={styles.conpart}>{obj.sDepartName}</span></div>
            </div>
          </div>
        </div>
      );
    };

    return (
      <div style={{
        position: 'absolute',
        top: 0,
        bottom: 0,
        overflow: 'hiddle',
        width: '100%',
      }}
      >
        <CommobileSearchComponent {...this.props} />
        <div className={styles.listViewStyle}>
          <ListView
            dataSource={slaveData}
            renderFooter={() => (
              <div style={{ padding: 30, textAlign: 'center' }}>
                {this.props.isLoading ? '加载中...' : '加载完毕'}
              </div>)}
            renderRow={row}
            style={{
              // height: this.state.height,
              position: 'absolute',
              overflow: 'auto',
              bottom: 0,
              top: 0,
              width: '100%',
            }}
            pageSize={commonConfig.pageSize}
            onScroll={() => {}}
            scrollRenderAheadDistance={500}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={10}
          />
        </div>
      </div>
    );
  }
}
export default CommobileBase(CommobileListEvent(ContactsMobile));