import React from 'react';
import { Flex, Button, ListView, Toast } from 'antd-mobile-v2';
import { createForm } from 'rc-form';
import 'antd-mobile-v2/dist/antd-mobile.css';
import CommobileBase from './CommobileBase';
import CommobileBillEvent from './CommobileBillEvent';
import CommobileViewSlave from './CommobileViewSlave';
import commonConfig from '../../utils/config';
import * as commonUtils from '../../utils/utils';
import ShowType from './CommobileComponent';
import * as commonServices from '../../services/services';
import * as commonFunc from '../../components/Common/commonFunc';
import CommobileToolBar from './CommobileToolBar';
import * as commonBusiness from '../../components/Common/commonBusiness';
import styles from '../mobile.less';
import add from '../../assets/mobile/add-select.svg';
import scan from '../../assets/mobile/scanning.svg';
import close from '../../assets/mobile/close.svg';
// eslint-disable-next-line import/first
import BarCodeUtil from './BarCodeUtil';

// const { Item } = List;
// const PlaceHolder = ({ className = '', ...restProps }) => (
//   <div className={`${className} placeholder`} {...restProps}>产品名称：测试骑马订样本</div>
// );

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

class ProcessReportMobileComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  async componentWillMount() {
    const { token, sModelsId } = this.props;
    const dataUrl = `${commonConfig.server_host}syssearch/getSyssearchData/${sModelsId}?sModelsId=${sModelsId}`; /* 获取快捷查找方案 */
    const dataReturn = (await commonServices.getService(token, dataUrl)).data;
    if (dataReturn.code === 1) {
      const returnData = dataReturn.dataset.rows;
      const addState = {};
      if (commonUtils.isNotEmptyArr(returnData)) {
        addState.searchOperation = [];
        returnData.forEach((item) => {
          addState.searchOperation.push({ text: item.sName });
        });
        let iIndex = returnData.findIndex(item => item.bDefault);
        iIndex = iIndex > -1 ? iIndex : commonUtils.isEmptyArr(returnData) ? -1 : 0;
        addState.label = returnData[iIndex].sName;
      }
      this.props.onSaveState({ searchSolution: returnData, ...addState });
    } else {
      this.props.getServiceError(dataReturn);
    }
  }

  componentWillReceiveProps(nextProps) {
    const { formData, employeeConfig, currentId } = nextProps;
    if (commonUtils.isEmptyObject(employeeConfig) && formData.length > 0) {
      const sId = currentId || nextProps.masterData?.sId || '';
      const employeeConfig = formData.filter(item => item.sTbName.toUpperCase() === 'mftproductionreportemployee'.toUpperCase())[0];
      const addState = {};
      if (sId === '') {
        if (!commonUtils.isNotEmptyObject(nextProps.copyTo)) {
          addState.employeeData = [];
        }
      } else {
        this.props.handleGetDataSet({
          name: 'employee', configData: employeeConfig, condition: { sSqlCondition: { sParentId: sId } },
        });
      }
      this.props.onSaveState({
        ...addState,
        pageLoading: false,
        employeeConfig,
      });
    }
  }

  onChange = async (event) => {
    const file = event.target.files[0];
    if (file) {
      this.parseQrCode(file)
        .then((data) => {
          Toast.info(data);
        })
        .catch((error) => {
          Toast.fail(error.message);
        });
    }
    // this.parseLineCode(file);
  }

  getViewValue = (showConfig, record) => {
    let sValue = record[showConfig.sName];
    if (showConfig.sDropDownType === 'const') {
      let showDropDown = [];
      if (typeof showConfig.showDropDown === 'object') {
        // eslint-disable-next-line prefer-destructuring
        showDropDown = showConfig.showDropDown;
      } else {
        showDropDown = commonUtils.objectToArr(commonUtils.convertStrToObj(showConfig.showDropDown));
      }
      let iIndex = commonUtils.isEmpty(record[showConfig.sName]) ? -1 : showDropDown.findIndex(item => item.sId === record[showConfig.sName].toString());
      if (iIndex === -1 && record[showConfig.sName] === '') {
        iIndex = showDropDown.findIndex(item => item.sId === '');
      }
      sValue = iIndex > -1 ? showDropDown[iIndex].value : record[showConfig.sName];
    }
    return sValue;
  };

   handleClick = async (name, type, sId) => {
     if (name === 'BtnSave') {
       this.props.onSubmit();
     } else if (type === 'add') {
       const { [`${name}Data`]: tableData, slaveData } = this.props;
       const tableDataRow = this.props.onDataRowAdd(name, true);
       if (name === 'employee') {
         tableDataRow.sSlaveId = slaveData[0].sId;
       }
       tableData.push(tableDataRow);
       this.props.onSaveState({ [`${name}Data`]: tableData, [`${name}SelectedRowKeys`]: [tableDataRow.sId] });
     } else if (type === 'del') {
       const { app, [`${name}Data`]: tableData } = this.props;
       let { [`${name}DelData`]: tableDelData } = this.props;
       tableDelData = commonUtils.isEmptyArr(tableDelData) ? [] : tableDelData;
       if (sId !== '') {
         const tableDataIndex = tableData.findIndex(item => item.sId === sId);
         if (tableDataIndex > -1) {
           const slaveDataFilter = tableData[tableDataIndex];
           tableData.splice(tableDataIndex, 1);
           slaveDataFilter.handleType = 'del';
           tableDelData.push(slaveDataFilter);
         }
         this.props.onSaveState({
           [`${name}Data`]: tableData,
           [`${name}DelData`]: tableDelData,
           [`${name}SelectedRowKeys`]: [],
         });
       } else {
         Toast.fail(commonFunc.showMessage(app.commonConst, 'pleaseChooseDelData')); // 请选择删除数据
       }
     } else if (type === 'scan') {
       BarCodeUtil.startScan(async (type, code) => {
         const {
           employeeConfig, sModelsId, masterData, slaveData, employeeData,
         } = this.props;
         const employeeDataConfig = commonUtils.isNotEmptyObject(employeeConfig) ? employeeConfig.gdsconfigformslave : '';
         const employeeSlaveConfig = employeeDataConfig.filter(item => item.sControlName === 'sEmployeeId');
         let employeeDataDetiale;
         employeeDataDetiale = this.props.onDataRowAdd(name, true);
         const employeeAssignField = commonUtils.isNotEmptyArr(employeeSlaveConfig) ? employeeSlaveConfig[0].sAssignField : '';
         let dropDownData = [];
         if (employeeSlaveConfig[0].sDropDownType === 'sql') {
           dropDownData = await this.props.getSqlDropDownData(sModelsId, 'employee', employeeSlaveConfig[0], employeeData);
         }
         let employeeDataOne;
         if (!commonUtils.isEmpty(dropDownData)) {
           employeeDataOne = dropDownData.filter(item => item.sId === code);
         }
         const newCopyTo = {};
         newCopyTo.master = masterData;
         newCopyTo.slave = commonUtils.isEmpty(slaveData) ? [] : slaveData[0];
         employeeDataDetiale = { ...employeeDataDetiale, ...commonFunc.getAssignFieldValue(employeeAssignField, employeeDataOne[0], newCopyTo) };
         employeeData.push(employeeDataDetiale);
         this.props.onSaveState({ employeeData });
       });
       // if (this.textInput) {
       //   this.textInput.click();
       // }
     } else if (name === 'BtnCancel') {
       window.history.back(-1);
     }
   }

  handleTableChange = async (name, sFieldName, changeValue, sId, dropDownData) => {
    const {
      token, sModelsId, masterData, slaveData, employeeData: employeeDataOld, employeeDelData: employeeDelDataOld,
    } = this.props;
    if (name === 'slave') {
      if (sFieldName === 'sTeamName' || sFieldName === 'sTeamId') { /* 主表选择的班组，循环复制到从表班组 */
        const tableDataRow = await this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData, true);
        const iSlaveIndex = slaveData.findIndex(item => item.sId === tableDataRow.sId);/* 拿到主表下拉选中的班组的名称 */
        slaveData[iSlaveIndex] = tableDataRow;
        const employeeDelData = commonUtils.isEmptyArr(employeeDelDataOld) ? [] : employeeDelDataOld;
        const employeeData = [];
        const iIndex = dropDownData.findIndex(item => item.sId === changeValue.sTeamId);/* 拿到主表下拉选中的班组的名称 */
        if (iIndex > -1) {
          if (commonUtils.isNotEmptyArr(slaveData) && slaveData.length > 0) {
            const url = `${commonConfig.server_host}eleteamemployee/getEleteamemployee?sModelsId=${sModelsId}&sTeamId=${tableDataRow.sTeamId}&sSlaveId=${tableDataRow.sSlaveId}&sParentId=${tableDataRow.sParentId}`;
            const dataReturn = (await commonServices.getService(token, url)).data;
            if (dataReturn.code === 1) {
              const returnData = dataReturn.dataset.rows;
              if (commonUtils.isNotEmptyObject(returnData) && returnData.length > 0) {
                employeeDataOld.forEach((item) => {
                  item.handleType = 'del';
                  employeeDelData.push(item);
                });
                if (commonUtils.isEmptyArr(employeeData)) { /* 当班组人员无数据时 */
                  returnData.forEach((child) => {
                    employeeData.push({
                      sId: commonUtils.createSid(),
                      sParentId: tableDataRow.sParentId,
                      sSlaveId: tableDataRow.sId,
                      sEmployeeId: child.sEmployeeId,
                      sEmployeeName: child.sEmployeeId,
                      dProportion: child.dProportion !== 0 ? child.dProportion : commonUtils.convertFixNum(1 / returnData.length, 6),
                      handleType: 'add',
                    });
                  });
                }
              }
              const dWageMoneyTotal = commonUtils.isNotEmptyNumber(tableDataRow.dWageMoney) ? tableDataRow.dWageMoney : 0;
              if (commonUtils.isNotEmptyNumber(dWageMoneyTotal)) {
                let dProportionTotal = 0;
                employeeData.forEach((item) => {
                  if (commonUtils.isNotEmptyNumber(item.dProportion) && item.dProportion !== 0) {
                    item.dProportion = parseFloat(item.dProportion);
                    dProportionTotal += commonUtils.convertFixNum(item.dProportion, 6);
                    dProportionTotal = commonUtils.convertFixNum(dProportionTotal, 6);
                  }
                });
                employeeData.forEach((item) => {
                  if (commonUtils.isNotEmptyNumber(item.dProportion)) {
                    const index1 = employeeData.findIndex(item1 => item1.sId === item.sId);
                    employeeData[index1] = {
                      ...item,
                      dWageMoney: commonUtils.convertFixNum((item.dProportion / dProportionTotal) * dWageMoneyTotal, 6),
                      handleType: commonUtils.isEmpty(item.handleType) ? 'update' : item.handleType,
                    };
                  }
                });
              }
            }
            this.props.onSaveState({
              slaveData, employeeData, employeeDelData,
            });
          }
        }
      } else if (sFieldName === 'dProcessQty' || sFieldName === 'sConversionFormulaId' || sFieldName === 'sConversionFormulaName') {
        const tableDataRow = await this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData, true);
        // eslint-disable-next-line prefer-destructuring
        const sOutputValueFormulaId = tableDataRow.sOutputValueFormulaId; /* 产值公式 */
        if (sOutputValueFormulaId) {
          tableDataRow.dOutputValueQty = await commonBusiness.getFormulaValue({
            token, sModelsId, masterData, tableDataRow, sComputeId: sOutputValueFormulaId,
          });
        }
        // eslint-disable-next-line prefer-destructuring
        const sConversionFormulaId = tableDataRow.sConversionFormulaId;
        if (sConversionFormulaId) {
          tableDataRow.dConversionQty = await commonBusiness.getFormulaValue({
            token, sModelsId, masterData, tableDataRow, sComputeId: sConversionFormulaId,
          });
        }
        const iSlaveIndex = slaveData.findIndex(item => item.sId === tableDataRow.sId);/* 拿到主表下拉选中的班组的名称 */
        if (iSlaveIndex > -1) {
          slaveData[iSlaveIndex] = tableDataRow;
          this.props.onSaveState({
            slaveData, enabled: true,
          });
        }
      } else if (sFieldName === 'dProcessQty' || sFieldName === 'sWageId' || sFieldName === 'sWageName') {
        const tableDataRow = await this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData, true);
        const iSlaveIndex = slaveData.findIndex(item => item.sId === tableDataRow.sId);/* 拿到主表下拉选中的班组的名称 */
        slaveData[iSlaveIndex] = tableDataRow;
        const employeeDelData = commonUtils.isEmptyArr(employeeDelDataOld) ? [] : employeeDelDataOld;
        slaveData[iSlaveIndex].dWageMoney = await commonBusiness.getFormulaValue({
          token, sModelsId, masterData, tableDataRow, sComputeId: tableDataRow.sWageId,
        });
        const dWageMoneyTotal = slaveData[iSlaveIndex].dWageMoney;
        const employeeData = employeeDataOld;
        if (commonUtils.isNotEmptyNumber(dWageMoneyTotal)) {
          let dProportionTotal = 0;
          employeeDataOld.forEach((item) => {
            if (commonUtils.isNotEmptyNumber(item.dProportion) && item.dProportion !== 0) {
              item.dProportion = parseFloat(item.dProportion);
              dProportionTotal += commonUtils.convertFixNum(item.dProportion, 6);
              dProportionTotal = commonUtils.convertFixNum(dProportionTotal, 6);
            }
          });
          employeeDataOld.forEach((item) => {
            if (commonUtils.isNotEmptyNumber(item.dProportion)) {
              const index1 = employeeData.findIndex(item1 => item1.sId === item.sId);
              employeeData[index1] = { ...item, dWageMoney: commonUtils.convertFixNum((item.dProportion / dProportionTotal) * dWageMoneyTotal, 6), handleType: commonUtils.isEmpty(item.handleType) ? 'update' : item.handleType };
            }
          });
        }
        /* 选择计件方案后 算总金额 */
        const dWageMoney = commonUtils.isNotEmptyNumber(dWageMoneyTotal) ? commonUtils.convertFixNum(dWageMoneyTotal, 6) : 0;
        const dTimeMoney = commonUtils.isNotEmptyNumber(tableDataRow.dTimeMoney) ? commonUtils.convertFixNum(tableDataRow.dTimeMoney, 6) : 0;
        const dLossMoney = commonUtils.isNotEmptyNumber(tableDataRow.dLossMoney) ? commonUtils.convertFixNum(tableDataRow.dLossMoney, 6) : 0;
        tableDataRow.dAllMoney = commonUtils.convertFixNum((dWageMoney + dTimeMoney) - dLossMoney, 6);
        this.props.onSaveState({
          slaveData, employeeData, employeeDelData, enabled: true,
        });
      } else if (sFieldName === 'dTimeMoney' || sFieldName === 'dLossMoney') {
        const tableDataRow = await this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData, true);
        const iSlaveIndex = slaveData.findIndex(item => item.sId === tableDataRow.sId);/* 拿到主表下拉选中的班组的名称 */
        slaveData[iSlaveIndex] = tableDataRow;
        /* 总金额=计件工资+工时工资-损失金额 */
        const dWageMoney = commonUtils.isNotEmptyNumber(tableDataRow.dWageMoney) ? commonUtils.convertFixNum(tableDataRow.dWageMoney, 6) : 0;
        const dTimeMoney = commonUtils.isNotEmptyNumber(tableDataRow.dTimeMoney) ? commonUtils.convertFixNum(tableDataRow.dTimeMoney, 6) : 0;
        const dLossMoney = commonUtils.isNotEmptyNumber(tableDataRow.dLossMoney) ? commonUtils.convertFixNum(tableDataRow.dLossMoney, 6) : 0;
        tableDataRow.dAllMoney = commonUtils.convertFixNum((dWageMoney + dTimeMoney) - dLossMoney, 6);
        this.props.onSaveState({
          slaveData, enabled: true,
        });
      } else {
        this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData);
      }
    } else if (name === 'employee' && sFieldName === 'dProportion') {
      const tableDataRow = await this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData, true);
      const iEmployeeIndex = employeeDataOld.findIndex(item => item.sId === tableDataRow.sId);/* 拿到主表下拉选中的班组的名称 */
      employeeDataOld[iEmployeeIndex] = tableDataRow;
      const iSlaveIndex = slaveData.findIndex(item => item.sId === tableDataRow.sSlaveId);/* 拿到主表下拉选中的班组的名称 */
      const dWageMoneyTotal = slaveData[iSlaveIndex].dWageMoney;
      const employeeData = employeeDataOld;
      if (commonUtils.isNotEmptyNumber(dWageMoneyTotal)) {
        let dProportionTotal = 0;
        employeeDataOld.forEach((item) => {
          if (commonUtils.isNotEmptyNumber(item.dProportion) && item.dProportion !== 0) {
            // item.dProportion = parseFloat(item.dProportion);
            dProportionTotal += commonUtils.convertFixNum(parseFloat(item.dProportion), 6);
            dProportionTotal = commonUtils.convertFixNum(dProportionTotal, 6);
          }
        });
        employeeDataOld.forEach((item) => {
          if (commonUtils.isNotEmptyNumber(item.dProportion)) {
            const index1 = employeeData.findIndex(item1 => item1.sId === item.sId);
            employeeData[index1] = { ...item, dWageMoney: commonUtils.convertFixNum((item.dProportion / dProportionTotal) * dWageMoneyTotal, 6), handleType: commonUtils.isEmpty(item.handleType) ? 'update' : item.handleType };
          }
        });
      }
      this.props.onSaveState({
        employeeData, enabled: true,
      });
    } else {
      this.props.onDataChange(name, sFieldName, changeValue, sId, dropDownData);
    }
  }
  // setTextInputRef = (element) => {
  //   this.textInput = element;
  // };

  render() {
    const {
      employeeConfig, employeeData: employeeDataOld, sModelsId, enabled, app, sUseInfo, onReturnForm, slaveData, slaveConfig,
    } = this.props;
    const slaveDatas = commonUtils.isEmptyArr(slaveData) ? {} : slaveData[0];
    onReturnForm(this.props.form);
    const employeeDataOld2 = employeeDataOld === undefined ? [] : employeeDataOld;
    const employeeData = dataSource.cloneWithRows(employeeDataOld2);

    const f1 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[0];
    const f2 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[1];
    const f3 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[2];
    const f4 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[3];
    const f5 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[4];
    const f6 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[5];
    const f7 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[6];
    const f8 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[7];
    const f9 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[8];
    const f10 = commonUtils.isEmptyObject(slaveConfig) ? {} : slaveConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '' && item.iTag === 1)[9];

    const formItemLayout = { labelCol: { span: 2 }, wrapperCol: { span: 18 } };
    const style = {
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    };
    const btnStyle = {
      fontSize: '15px',
      backgroundColor: '#f0f0f0',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
    };
    const BtnStyle = {
      type: 'default',
      color: 'red',
      border: 'none',
      backgroundColor: '#f0f0f0',
      fontSize: '15px',
    };
    const divStyle = {
      display: 'flex',
      justifyContent: 'space-between',
      background: ' #f0f0f0',
    };
    const paddingFive = {
      padding: '5px 0',
    };
    const row = (rowData, sectionID, rowID) => {
      return (
        <div style={{ backgroundColor: '#f0f0f0' }} key={rowID}>
          <Flex className={styles.ProcessReportMobile}>
            {/* eslint-disable-next-line react/jsx-no-duplicate-props */}
            <Flex.Item style={style}>
              <Button type="button" inline disabled={!enabled} onClick={this.handleClick.bind(this, 'employee', 'add')} style={btnStyle}>
              增加
                <img src={add} className={styles.iconStyle} style={!enabled ? { opacity: 0.3 } : { opacity: 1 }} alt="add" />
              </Button>
            </Flex.Item>
            <Flex.Item style={style}>
              <Button type="button" inline disabled={!enabled} onClick={this.handleClick.bind(this, 'employee', 'scan')} style={btnStyle}>
                扫码
                <img src={scan} className={styles.iconStyle} style={!enabled ? { opacity: 0.3 } : { opacity: 1 }} alt="scan" />
              </Button>
            </Flex.Item>
            <Flex.Item style={style}>
              <Button type="button" inline disabled={!enabled} onClick={this.handleClick.bind(this, 'employee', 'del', rowData.sId)} style={btnStyle}>
                删除
                <img src={close} className={styles.iconStyle} style={!enabled ? { opacity: 0.3 } : { opacity: 1 }} alt="close" />
              </Button>
            </Flex.Item>
          </Flex>
          {commonUtils.isEmptyObject(employeeConfig) ? '' : employeeConfig.gdsconfigformslave.filter(item => item.bVisible && item.sName !== '').map((child) => {
            const sMemo = child.sName.toLowerCase().endsWith('memo');
            // sUseInfo是指被其他单据调用，或者被审核
            let enabledNew = (enabled && !child.bReadonly && !child.specialControl && commonUtils.isEmpty(sUseInfo));
            if (child.iTag === 1) {
              enabledNew = false;
            } else if (child.iTag === 3) {
              enabledNew = true;
            }
            const showTypeProps = {
              app,
              record: rowData,
              sId: rowData.sId, /*   修改当前编号(数据格式:字符串)   */
              name: 'employee',
              form: this.props.form,
              formId: sModelsId,
              getSqlDropDownData: this.props.getSqlDropDownData,
              getSqlCondition: this.props.getSqlCondition,
              handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
              getFloatNum: this.props.getFloatNum,
              getDateFormat: this.props.getDateFormat,
              onChange: this.handleTableChange,
              showConfig: child,
              formItemLayout: sMemo ? formItemLayout : {},
              textArea: sMemo,
              enabled: enabledNew,
              dataValue: rowData[child.sName],
              bTable: true,
              onFilterDropDownData: this.props.onFilterDropDownData,
              onSaveState: this.props.onSaveState,
            };
            return (
              <ShowType {...showTypeProps} />
            );
          })}
        </div>
      );
    };
    return (
      <div className="commobileBillContainer">
        <div style={f1 ? paddingFive : {}} className={styles.onlyWordBg}>
          <Flex className={f1 ? `${styles.paddingFive}` : ''}>
            {
              f1 ? <Flex.Item className={styles.wordsFlow} style={{ color: '#fff', fontWeight: 'bold', fontSize: '17px' }}>{f1.showName} : {this.getViewValue(f1, slaveDatas)}</Flex.Item> : ''
            }
            {
              f2 ? <Flex.Item className={`${styles.wordsFlow} ${styles.fr}`} style={{ fontSize: '17px' }}>{f2.showName} : {this.getViewValue(f2, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
          <Flex className={f3 ? `${styles.paddingFive}` : ''}>
            {
              f3 ? <Flex.Item className={styles.wordsFlow} style={{ fontSize: '17px' }}>{f3.showName} : {this.getViewValue(f3, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
          <Flex className={f4 ? `${styles.paddingFive}` : ''} style={{ fontSize: '17px' }}>
            {
              f4 ? <Flex.Item className={styles.wordsFlow} style={{ fontSize: '17px' }}>{f4.showName} : {this.getViewValue(f4, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
          <Flex className={f5 ? `${styles.paddingFive}` : ''}>
            {
              f5 ? <Flex.Item className={styles.wordsFlow} style={{ fontSize: '17px' }}>{f5.showName} : {this.getViewValue(f5, slaveDatas)}</Flex.Item> : ''
            }
            {
              f6 ? <Flex.Item className={`${styles.wordsFlow} ${styles.fr}`} style={{ fontSize: '17px' }}>{f6.showName} : {this.getViewValue(f6, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
          <Flex className={f7 ? `${styles.paddingFive}` : ''}>
            {
              f7 ? <Flex.Item className={styles.wordsFlow} style={{ fontSize: '17px' }}>{f7.showName} : {this.getViewValue(f7, slaveDatas)}</Flex.Item> : ''
            }
            {
              f8 ? <Flex.Item className={`${styles.wordsFlow} ${styles.fr}`} style={{ fontSize: '17px' }}>{f8.showName} : {this.getViewValue(f8, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
          <Flex className={f9 ? `${styles.paddingFiveTeen}` : ''}>
            {
              f9 ? <Flex.Item className={styles.wordsFlow} style={{ fontSize: '17px' }}>{f9.showName} : {this.getViewValue(f9, slaveDatas)}</Flex.Item> : ''
            }
            {
              f10 ? <Flex.Item className={`${styles.wordsFlow} ${styles.fr}`} style={{ fontSize: '17px' }}>{f10.showName} : {this.getViewValue(f10, slaveDatas)}</Flex.Item> : ''
            }
          </Flex>
        </div>
        <form style={{ paddingBottom: '47px' }}>
          <div className="flex-container" style={{ color: 'white' }}>
            <CommobileViewSlave {...this.props} iTag={1} onDataChange={this.handleTableChange} />
            <CommobileViewSlave {...this.props} onDataChange={this.handleTableChange} />
          </div>
          {commonUtils.isEmptyArr(employeeDataOld) ?
            <div>
              <Flex className={styles.ProcessReportMobile}>
                <Flex.Item style={style}>
                  <Button type="button" inline disabled={!enabled} onClick={this.handleClick.bind(this, 'employee', 'add')} style={btnStyle}>
                  增加
                    <img src={add} className={styles.iconStyle} style={!enabled ? { opacity: 0.3 } : { opacity: 1 }} alt="add" />
                  </Button>
                </Flex.Item>
                <Flex.Item style={style}>
                  <Button type="button" inline disabled={!enabled} onClick={this.handleClick.bind(this, 'employee', 'scan')} style={btnStyle}>
                    扫码
                    <img src={scan} className={styles.iconStyle} style={!enabled ? { opacity: 0.3 } : { opacity: 1 }} alt="scan" />
                  </Button>
                </Flex.Item>
              </Flex>
            </div> :
            <ListView
              dataSource={employeeData}
              renderRow={row}
              pageSize={commonConfig.pageSize}
              onScroll={() => {}}
              scrollRenderAheadDistance={500}
              onEndReachedThreshold={10}
              className={styles.listView}
            />}
          <div
            className={`${styles.ProcessReportMobile} commobileBillToolbar`}
            style={{
              position: 'fixed', bottom: '0px', width: '100%', zIndex: 1,
            }}
          >
            <CommobileToolBar {...this.props} btnStyle={BtnStyle} divStyle={divStyle} onButtonClick={this.handleClick} />
          </div>

        </form>
      </div>
    );
  }
}

const ProcessReportMobile = createForm()(ProcessReportMobileComponent);

export default CommobileBase(CommobileBillEvent(ProcessReportMobile));