import React from 'react';
import { Button, Card, TextareaItem, WhiteSpace, WingBlank, ListView } from 'antd-mobile';
// import { createForm } from 'rc-form';
import 'antd-mobile/dist/antd-mobile.css';
import CommobileBase from './CommobileBase';
import CommobileBillEvent from './CommobileBillEvent';
import * as commonUtils from '../../utils/utils';
import * as commonConfig from '../../utils/config';
import CommobileViewMaster from './CommobileViewMaster';

const dataSource = new ListView.DataSource({
  rowHasChanged: (row1, row2) => row2,
});
class ExamineMobile extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {
    const { slaveConfig, slaveData: slaveDataOld, onReturnForm } = this.props;
    onReturnForm(this.props.form);
    console.log('render', slaveDataOld, slaveConfig, 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' }}>
          <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>
        <form style={{ paddingBottom: '47px' }}>
          <div className="flex-container" style={{ color: 'white' }}>
            <CommobileViewMaster {...this.props} />
          </div>
        </form>
        <Card>
          <Card.Header
            title="李明清"
            thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
            extra={<span>4月14日 16:59</span>}
          />
          <Card.Body>
            <div>
              单据【XDD200300010】单据审核请求
              单据日期：2020-03-02
              单据号：XDD200300010
              审核内容：订单2金额大于1000
              备注：请领导尽快批复
            </div>
            <div style={{ border: '1px solid' }}>
              <TextareaItem
                autoHeight
                rows={3}
                placeholder="回复"
              />
            </div>
            <WingBlank>
              <WhiteSpace />
              <Button type="primary" inline style={{ marginRight: '4px' }}>驳回</Button>
              {/* use `am-button-borderfix`. because Multiple buttons inline arranged, the last one border-right may not display */}
              <Button type="primary" inline style={{ marginRight: '4px' }} >同意</Button>
              <Button type="primary" inline style={{ marginRight: '4px' }} >委托</Button>
            </WingBlank>
          </Card.Body>
        </Card>
        <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(CommobileBillEvent(ExamineMobile));