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';
import styles from '../../routes/mobile/IndexMobile.less';
import NewsMobile from './NewsMobile';
// eslint-disable-next-line no-unused-vars
// import ExamineMobile from './ExamineMobile';
// import CommobileBill from './CommobileBill';


const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row2,
});
// eslint-disable-next-line no-unused-vars
const tabs = [
  { title: <Badge text="">消息</Badge> },
  { title: <Badge text="">待处理</Badge> },
  { title: <Badge text="">已处理</Badge> },
  { title: <Badge text="">我的申请</Badge> },
];
class MessageMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      height: (document.documentElement.clientHeight * 3) / 4,
      tabPage: 0,
    };
  }

  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,
    });
  }
  /* 页签切换 */
  // eslint-disable-next-line no-unused-vars
  handleTabClick =(index, tab) => {
    this.setState({ tabPage: index });
  }

  render() {
    const { slaveConfig, slaveData: slaveDataOld } = this.props;
    const { tabPage } = this.state;
    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' }}>
          <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>
      );
    };

    /* 待处理 */
    const unNewsProps = {
      app: {
        ...this.props.app,
      },
      sModelsId: '192116812112116672655865440',
      dispatch: this.props.dispatch,
    };

    /* 已通过 */
    const doneNewsProps = {
      app: {
        ...this.props.app,
      },
      sModelsId: '192116812112116672668106810',
      dispatch: this.props.dispatch,
    };

    /* 我的申请 */
    const sendNewsProps = {
      app: {
        ...this.props.app,
      },
      sModelsId: '192116812112116672733801250',
      dispatch: this.props.dispatch,
    };

    // eslint-disable-next-line no-unused-vars
    const examineProps = {
      app: {
        ...this.props.app,
      },
      sModelsId: '192116812112116672690047620',
      sModelType: 'examine',
      dispatch: this.props.dispatch,
    };

    return (
      <div>
        <Tabs
          tabs={tabs}
          initialPage={0}
          onChange={(tab, index) => this.handleTabClick(index, tab)}
          onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
        >

          {
            tabPage === 0 ?
              <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> : '' }
          {tabPage === 1 ? <div className={styles.demoContainer}>  <NewsMobile {...unNewsProps} /></div> : ''}
          {tabPage === 2 ? <div className={styles.demoContainer}>  <NewsMobile {...doneNewsProps} /> </div> : ''}
          {tabPage === 3 ? <div className={styles.demoContainer}>  <NewsMobile {...sendNewsProps} /></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(MessageMobile));