import React from 'react';
// eslint-disable-next-line no-unused-vars
import { Tabs, Badge, ListView, SearchBar } from 'antd-mobile-v2';
import 'antd-mobile-v2/dist/antd-mobile.css';
// import ExamineMobile from './ExamineMobile';
import commonConfig from '../../utils/config';
import * as commonUtils from '../../utils/utils';
import CommobileBase from '../../mobile/common/CommobileBase';
import CommobileListEvent from './CommobileListEvent';


const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row2,
});
// eslint-disable-next-line no-unused-vars
const tabs = [
  { title: <Badge text="3">消息</Badge> },
  { title: <Badge text="3">审批消息</Badge> },
];
class NewsMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: (document.documentElement.clientHeight * 3) / 4,
    };
  }

  componentWillMount() {
    /* 获取配置 */
    this.props.onSaveState({ searchSolution: [] });
  }

  onEndReached = async () => {
    if ((this.props.slavePagination.current + 1) <= Math.ceil(this.props.slavePagination.total / commonConfig.pageSize)) {
      const addState = await this.props.onGetData(this.props.slaveConfig, [], this.props.slavePagination.current + 1, true);
      addState.slaveData = this.props.slaveData.concat(addState.slaveData);
      this.props.onSaveState({ ...addState });
    }
  }
  onClose = key => () => {
    this.setState({
      [key]: false,
    });
  }
  /* 列表弹出详情 */
  handleDoubleClick =(rowData) => {
    this.props.onDoubleClick(rowData);
  }

  render() {
    const { slaveConfig, slaveData: slaveDataOld } = this.props;
    const slaveDataOld2 = slaveDataOld === undefined ? [] : slaveDataOld;
    const slaveData = dataSource.cloneWithRows(slaveDataOld2);
    const f1 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible)[0];
    const f2 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible)[1];
    const f3 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible)[2];
    const f4 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible)[3];
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 6,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );
    const row = (rowData, sectionID, rowID) => {
      const obj = rowData;
      return (
        <div key={rowID} style={{ padding: '0 15px' }} onDoubleClick={() => this.handleDoubleClick(rowData)}>
          <div
            style={{
              lineHeight: '40px',
              borderBottom: '1px solid #F6F6F6',
            }}
          >
            <span style={{
                fontSize: 18, color: '#000', fontWeight: 'bold', paddingLeft: '10px', paddingRight: '10px',
}}
            >{obj[f1.sName]}
            </span>
            <span style={{ fontSize: 14, color: '#888' }}>{obj[f2.sName]}</span>
          </div>
          <div style={{ display: 'flex', padding: '10px 0' }}>
            {/* <img style={{ height: '50px', marginRight: '15px', borderRadius: '50%' }} src="https://zos.alipayobjects.com/rmsportal/dKbkpPXKfvZzWCM.png" alt="" /> */}
            <div style={{ lineHeight: 1, width: '100%' }}>
              <div style={{ color: '#000', paddingLeft: '6px', marginBottom: '8px' }}>{obj[f3.sName]}</div>
              <div style={{ color: '#000', paddingLeft: '6px', marginBottom: '8px' }}>{obj[f4.sName]}</div>
            </div>
          </div>
        </div>
      );
    };
    return (
      <div>
        {/* <Tabs */}
        {/*  tabs={tabs} */}
        {/*  initialPage={0} */}
        {/*  onChange={(tab, index) => { console.log('onChange', index, tab); }} */}
        {/*  onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }} */}
        { /* > */ }
        {/*  <div> */ }
        {/*    <SearchBar placeholder="关键词" /> */}
        {/*   <ListView */}
        {/*      dataSource={slaveData} */}
        {/*      renderFooter={() => ( */}
        {/*        <div style={{ padding: 30, textAlign: 'center' }}> */}
        {/*          {this.props.isLoading ? 'Loading...' : 'Loaded'} */}
        {/*        </div>)} */}
        {/*      renderRow={row} */}
        {/*      renderSeparator={separator} */}
        {/*      style={{ */}
        {/*        height: this.state.height, */}
        {/*        overflow: 'auto', */}
        {/*      }} */}
        {/*      pageSize={commonConfig.pageSize} */}
        {/*      onScroll={() => {}} */}
        {/*      scrollRenderAheadDistance={500} */}
        {/*      onEndReached={this.onEndReached} */}
        {/*      onEndReachedThreshold={10} */}
        {/*    /> */}
        {/*  </div> */}
        {/*  <div> */}
        {/*    <SearchBar placeholder="单据号" /> */}
        {/*    <ListView */}
        {/*      dataSource={slaveData} */}
        {/*      renderFooter={() => ( */}
        {/*        <div style={{ padding: 30, textAlign: 'center' }}> */}
        {/*          {this.props.isLoading ? 'Loading...' : 'Loaded'} */}
        {/*        </div>)} */}
        {/*      renderRow={row} */}
        {/*      renderSeparator={separator} */}
        {/*      style={{ */}
        {/*        height: this.state.height, */}
        {/*        overflow: 'auto', */}
        {/*      }} */}
        {/*      pageSize={commonConfig.pageSize} */}
        {/*      onScroll={() => {}} */}
        {/*      scrollRenderAheadDistance={500} */}
        {/*      onEndReached={this.onEndReached} */}
        {/*      onEndReachedThreshold={10} */}
        {/*    /> */}
        {/*  </div> */}
        {/* </Tabs> */}
        <div>
          <ListView
            dataSource={slaveData}
            renderFooter={() => (
              <div style={{ padding: 30, textAlign: 'center' }}>
                {this.props.isLoading ? 'Loading...' : 'Loaded'}
              </div>)}
            renderRow={row}
            renderSeparator={separator}
            style={{
              height: this.state.height,
              overflow: 'auto',
            }}
            pageSize={commonConfig.pageSize}
            onScroll={() => {}}
            scrollRenderAheadDistance={500}
            onEndReached={this.onEndReached}
            onEndReachedThreshold={10}
          />
        </div>
      </div>

    );
  }
}
export default CommobileBase(CommobileListEvent(NewsMobile));