AccountInfoView

import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  KeyboardAvoidingView,
  TextInput,
  SafeAreaView,
  Platform,
  Dimensions
} from 'react-native';
import PropTypes from 'prop-types';
import { createForm } from 'rc-form';
import { connect } from 'react-redux';
import PAOCR from 'react-native-ocr';
import RNFetchBlob from 'rn-fetch-blob';
import { fileUploadToIOBS, getImagePostToken } from '../../../../apis/common';
import { uploadOCR } from '../../../../apis/uploadFile';
import {
  CommonButton,
  Cell,
  AreaPicker,
  InputItem,
  Toast,
  Back,
  Dialog,
  Photo,
  LoginChecked,
  LoginUnChecked
} from '../../../../components';
import { ColorCommon, GapCommon } from '../../../../assets/publicConsts';
import GlobalStyles from '../../../../assets/globalStyles';
import { RNLog, Px2Dp } from '../../../../utils/Tool';

let isEdit = true;
const screenW = Dimensions.get('window').width;
class AccountInfoView extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    headerLeft: <Back navigation={navigation} onBeforeUnload={navigation.getParam('onBeforeUnload')} />,
  });

  state = {
    // lba50033: '', // 省
    // lba50034: '', // 市
    bankTotal: '', // 总行id
    bank: '', // 分行id
    bankTotalName: '',
    bankName: '',
    beosbankid: '', // Beos银行ID
    bankfullname: '', // Beos银行名称
    beosId: '', // id
    ocrBase64: '', // ocr识别的图片base64
    // bankValue: '', //  开户行
    // userValue: '', // 账户名
    // accountValue: '' // 开户账户,
    protocolChecked: -1, // 勾选
    disableButton: -1, // 按钮禁用
    chenkNum: -1
  }

  list = [
    { id: 1, name: '总行', content: 'ba50032Name' },
    { id: 2, name: '分行', content: 'ba50035Name' },
    { id: 3, name: '开户行', content: 'ba50036' },
    { id: 4, name: '账户名', content: 'ba50038' },
    { id: 5, name: '开户账户', content: 'ba50039' },
  ]

  static propTypes = {
    navigation: PropTypes.object.isRequired,
    dispatch: PropTypes.func.isRequired,
    bankaccountInfoList: PropTypes.array.isRequired,
    form: PropTypes.object.isRequired,
    projectAccountForm2: PropTypes.array.isRequired,
  };

  componentDidMount() {
    const { navigation } = this.props;
    const flagKey = navigation.getParam('flagKey');
    navigation.setParams({
      onBeforeUnload: this.onBeforeUnload
    });
    if (flagKey === 1) {
      this.handleflagKey1();
    }

    if (flagKey === 2) {
      this.handleflagkey2();
    }

    if (flagKey === 3) {
      this.handleflagKey3();
    }
  }

  componentWillUnmount() {
    const { dispatch } = this.props;
    dispatch({ type: 'SAVEPAYEE_SUCCESS', data: {} });
  }

  // 离开页面
  onBeforeUnload = () => {
    const {
      navigation, form, dispatch, projectAccountForm2, bankaccountInfoList
    } = this.props;
    const routerParam = navigation.getParam('data');
    const loanID = navigation.getParam('loanID');
    const { getFieldsValue } = form;
    const data = getFieldsValue();
    if ((bankaccountInfoList && Object.values(bankaccountInfoList).length > 0 && bankaccountInfoList[0].loanid)
      || (routerParam && !routerParam.flagButton)) { // 若为编辑或者审批中查看，直接返回
      navigation.goBack();
      return;
    }
    // 判断表单是否修改
    if (isEdit) { // 没有更改表单值，直接返回
      navigation.goBack();
      return;
    }
    Dialog.show({
      title: '提示信息',
      notice: '保留此次编辑?',
      confirm: '保留',
      cancel: '不保留',
      cancelDoIt: () => {
        isEdit = true; // 操作后恢复初始值
        projectAccountForm2[loanID] = {}; // 不保存将数据清空
        Dialog.hide();
        dispatch({ type: 'SET_PROJECT_ACCOUNT_FORM_2', data: projectAccountForm2 });
        navigation.goBack();
      },
      confirmDoIt: () => {
        isEdit = true; // 操作后恢复初始值
        [data.ba50033, data.ba50034] = data.provinces;
        data.ba50036 = data.lba50036;
        data.ba50038 = data.lba50038;
        data.ba50039 = data.lba50039;
        projectAccountForm2[loanID] = data; // 列表存在多条数据，若保存数据需要将ID对应起来便于回显
        Dialog.hide();
        dispatch({ type: 'SET_PROJECT_ACCOUNT_FORM_2', data: projectAccountForm2 }); // 将更改的值保存在redux中
        navigation.goBack();
      },
    });
  }

  handleflagKey1 = () => {
    const { dispatch, navigation } = this.props;
    const customerId = navigation.getParam('autherID');
    const loanId = navigation.getParam('loanID');
    const _data = navigation.getParam('_data');
    const bankInfoParams = {
      loanId,
      accountType: 1,
      customerId,
      bankType: _data && _data[0] && _data[0].value ? _data[0].value : ''
    };
    if (bankInfoParams.loanId
      && bankInfoParams.accountType
      && bankInfoParams.customerId
      && bankInfoParams.customerId !== 0
      && bankInfoParams.bankType) {
      dispatch({
        type: 'GET_BANKINFO', // 查看经销商\授信方账户信息
        bankInfoParams,
        callback: (res) => {
          if (res.status === 0) {
            const chenkNum = res.data && res.data.findIndex((item) => item.flag === 1);
            this.setState({ chenkNum });
            this.setState({ disableButton: chenkNum });
          }
        }
      });
    }
  }

  handleflagkey2 = () => {
    const { dispatch, navigation } = this.props;
    const customerId = navigation.getParam('dealerID');
    const loanId = navigation.getParam('loanID');
    const _data = navigation.getParam('_data');
    const bankInfoParams = {
      loanId,
      accountType: 2,
      customerId,
      bankType: _data && _data[0] && _data[0].value ? _data[0].value : ''
    };
    if (bankInfoParams.loanId
      && bankInfoParams.accountType
      && bankInfoParams.customerId
      && bankInfoParams.customerId !== 0
      && bankInfoParams.bankType) {
      dispatch({
        type: 'GET_BANKINFO', //  查看经销商\授信方账户信息
        bankInfoParams,
        callback: (res) => {
          if (res.status === 0) {
            const chenkNum = res.data && res.data.findIndex((item) => item.flag === 1);
            this.setState({ chenkNum });
            this.setState({ disableButton: chenkNum });
          }
        }
      });
    }
  }

  handleflagKey3 = () => {
    const { dispatch, navigation } = this.props;
    const loanId = navigation.getParam('loanID');
    const _data = navigation.getParam('_data');
    const bankInfoParams = {
      loanId,
      accountType: 3,
      bankType: _data && _data[0] && _data[0].value ? _data[0].value : ''
    };
    if (bankInfoParams.loanId
      && bankInfoParams.accountType
      && bankInfoParams.bankType) {
      dispatch({
        type: 'GET_BANKINFO', //  查看经销商\授信方账户信息
        bankInfoParams,
      });
    }
  }

  // 勾选
  handleChecked = (i) => {
    this.setState({ protocolChecked: i });
    this.setState({ disableButton: i });
    this.setState({ chenkNum: -1 });
  }

  handleEdit = (bankaccountInfoList, _data, protocolChecked, chenkNum) => (
    <ScrollView>
      {bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList.map((listItem, aIndex) => (
        <View style={styles.accountList}>
          <TouchableOpacity
            onPress={() => this.handleChecked(aIndex)}
            style={styles.radio}
          >
            { protocolChecked === aIndex || chenkNum === aIndex ? (
              <LoginChecked width={Px2Dp(16)} height={Px2Dp(16)} />
            ) : (
              <LoginUnChecked width={Px2Dp(16)} height={Px2Dp(16)} />
            )}
          </TouchableOpacity>
          <View style={styles.accountContent}>
            <Text style={styles.accountName}>账户类型：</Text>
            <Text style={styles.accountDesc}>{_data && _data[0] && _data[0].label ? _data[0].label : ''}</Text>
          </View>
          {this.list.map((item) => (
            <View style={styles.accountContent} key={item.customerid}>
              <Text style={styles.accountName}>{item.name}</Text>
              <Text style={styles.accountDesc}>{listItem[item.content]}</Text>
            </View>
          ))}
        </View>
      ))
      }
    </ScrollView>
  )

  handleView = (
    navigation, bankTotal, bankName, getFieldDecorator,
    getFieldError, bankTotalName, AddressLive, setFieldsValue, bankaccountInfoList,
    bankfullname, _data
  ) => (
    <View>
      {getFieldDecorator('bankType', {
        initialValue: _data && _data[0] && _data[0].label ? _data[0].label : '',
        validateFirst: true,
        rules: [
          { required: true, message: '请输入!' },
        ],
      })(
        <InputItem
          autoFocus
          placeholder="请输入"
          error={getFieldError('bankType')}
          editable={false}
        >
          <Text style={styles.name}>账户类型</Text>
        </InputItem>
      )}

      {_data && _data[0] && _data[0].value === 2 ? (
        <TouchableOpacity onPress={() => { navigation.navigate('ProjectInfoSearch', { returnData: this.returnData.bind(this), key: 7, bankTotal }); }}>
          <Cell label="承兑银行">
            {(bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].baBeosName) || bankfullname
              ? (<Text style={styles.content}>{bankfullname || (bankaccountInfoList && bankaccountInfoList[0].baBeosName)}</Text>)
              : <Text style={styles.content}>请输入</Text>}
          </Cell>
          {getFieldDecorator('bankno', {
            initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].baBeosName : '',
          })(
            <TextInput style={{ display: 'none' }} />
          )}
          {getFieldDecorator('beosId', {
            initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].baBeosid : '',
          })(
            <TextInput style={{ display: 'none' }} />
          )}
          {getFieldDecorator('baBeosName', {
            initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].baBeosName : '',
          })(
            <TextInput style={{ display: 'none' }} />
          )}
        </TouchableOpacity>
      ) : null}


      <TouchableOpacity onPress={() => { navigation.navigate('ProjectInfoSearch', { returnData: this.returnData.bind(this), key: 1, bankTotal }); }}>
        <Cell label="总行">
          {(bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50032Name) || bankTotalName
            ? (
              <Text style={styles.content}>
                {bankTotalName || (bankaccountInfoList && bankaccountInfoList[0].ba50032Name)}
              </Text>
            )
            : <Text style={styles.content}>请输入</Text>}
        </Cell>
        {getFieldDecorator('lba50032', {
          initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].ba50032 : '',
        })(
          <TextInput style={{ display: 'none' }} />
        )}
        {getFieldDecorator('ba50032Name', {
          initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].ba50032Name : '',
        })(
          <TextInput style={{ display: 'none' }} />
        )}
      </TouchableOpacity>

      <TouchableOpacity onPress={() => {
        if (!bankTotalName && !(bankaccountInfoList && bankaccountInfoList[0].ba50032Name)) {
          Toast.show('请输入总行');
          return;
        }
        navigation.navigate('ProjectInfoSearch', { returnData: this.returnData.bind(this), key: 2, bankTotal: bankTotal || bankaccountInfoList[0].ba50035 });
      }}
      >
        <Cell label="分行">
          {(bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50035Name) || bankName
            ? (<Text style={styles.content}>{bankName || (bankaccountInfoList[0] && bankaccountInfoList[0].ba50035Name)}</Text>)
            : <Text style={styles.content}>请输入</Text>}
        </Cell>
        {getFieldDecorator('lba50035', {
          initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].ba50035 : '',
        })(
          <TextInput style={{ display: 'none' }} />
        )}
        {getFieldDecorator('ba50035Name', {
          initialValue: bankaccountInfoList && bankaccountInfoList[0] ? bankaccountInfoList[0].ba50035Name : '',
        })(
          <TextInput style={{ display: 'none' }} />
        )}
      </TouchableOpacity>

      {/* 省市 */}
      {bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50033 && bankaccountInfoList[0].ba50034
        ? (
          <Cell label="省市">
            {getFieldDecorator('provinces', {
              initialValue: AddressLive(),
              validateFirst: true,
              rules: [{ required: true, message: '请选择!' }],
            })(
              <AreaPicker isRequiredName placeholder="请选择" error={getFieldError('provinces')} />
            )}
          </Cell>
        ) : (
          <Cell label="省市">
            {getFieldDecorator('provinces', {
              initialValue: [],
              validateFirst: true,
              rules: [{ required: true, message: '请选择!' }],
            })(
              <AreaPicker isRequiredName placeholder="请选择" error={getFieldError('provinces')} />
            )}
          </Cell>
        )}
      {getFieldDecorator('lba50036', {
        initialValue: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50036 ? bankaccountInfoList[0].ba50036 : '',
        validateFirst: true,
        rules: [
          { required: true, message: '请输入!' },
        ],
      })(
        <InputItem
          autoFocus
          placeholder="请输入"
          error={getFieldError('lba50036')}
        >
          <Text style={styles.name}>开户行</Text>
        </InputItem>
      )}
      {getFieldDecorator('lba50038', {
        initialValue: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50038 ? bankaccountInfoList[0].ba50038 : '',
        validateFirst: true,
        // getValueFromEvent: (e) => {
        //   const inputValue = e.replace(/[^a-zA-Z0-9\u4E00-\u9FA5]/g, '');
        //   setFieldsValue({ lba50038: 'inputValue' }, () => { setFieldsValue({ lba50038: inputValue }); });
        //   return inputValue;
        // },
        rules: [
          { required: true, message: '请输入内容!' },
          { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '请输入正确的内容' }
        ],
      })(
        <InputItem
          autoFocus
          placeholder="请输入"
          error={getFieldError('lba50038')}
        >
          <Text style={styles.name}>账户名</Text>
        </InputItem>
      )}
      {getFieldDecorator('lba50039', {
        initialValue: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50039 ? bankaccountInfoList[0].ba50039 : '',
        validateFirst: true,
        rules: [
          { required: true, message: '请输入!' },
          {
            pattern: /^([1-9]{1})(\d{15}|\d{18})$/,
            message: '请输入正确的银行卡号',
          }
        ],
      })(
        <InputItem
          autoFocus
          placeholder="请输入"
          error={getFieldError('lba50039')}
          keyboardType="numeric"
          icon={(
            <TouchableOpacity onPress={this.OCRScan}>
              <Photo />
            </TouchableOpacity>
            )}
        >
          <Text style={styles.name}>开户账号</Text>
        </InputItem>
      )}
    </View>
  )

  // 调取OCR
  OCRScan = async () => {
    const { form } = this.props;
    const { setFieldsValue } = form;
    const appKey = Platform.OS === 'ios' ? '947ab5a4-1fe0-11ea-a401-06b84c001f36' : 'a8cfea24-1fe0-11ea-a401-06b84c001f36';
    const data = await PAOCR.launch({
      appKey,
      env: 'prd',
    });
    if (data && data.card_number) {
      setFieldsValue({ lba50039: data.card_number });
      this.setState({
        ocrBase64: data.image,
      });
    }
  }

  handleSubmit = () => {
    const { dispatch } = this.props;
    const { ocrBase64, protocolChecked, chenkNum } = this.state;
    const { navigation, bankaccountInfoList, projectAccountForm2 } = this.props;
    const flagKey = navigation.getParam('flagKey');
    const _data = navigation.getParam('_data');
    const { form } = this.props;
    const { resetFields } = form;
    const { beosbankid, beosId } = this.state;
    const loanID = navigation.getParam('loanID');
    if (flagKey === 3) {
      const {
        bankTotal,
        bank,
      } = this.state;
      if (!bankTotal && !(bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50032Name)) {
        Toast.show('请输入总行');
        return;
      }
      if (!bank && !(bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50035Name)) {
        Toast.show('请输入分行');
        return;
      }

      form.validateFields(async (error, value) => {
        if (error) return;
        const params = {
          loanId: loanID || (bankaccountInfoList[0] && bankaccountInfoList[0].loanid), // 贷款id
          accountType: 3, // 收款方类型
          lba50032: bankTotal || (bankaccountInfoList && bankaccountInfoList[0].ba50032), // 总行
          lba50033: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50033, // 省
          lba50034: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50034, // 市
          lba50035: bank || (bankaccountInfoList && bankaccountInfoList[0].ba50035), // 分行
          lba50036: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50036, // 开户行
          lba50038: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50038, // 账户号
          lba50039: bankaccountInfoList && bankaccountInfoList[0] && bankaccountInfoList[0].ba50039, // 开户号
          bankno: beosbankid,
          beosId,
          ...value,
        };
        delete params.bankType;
        params.bankType = _data && _data[0] && _data[0].value ? _data[0].value : '';
        [params.lba50033, params.lba50034] = params.provinces;
        delete params.provinces;
        try {
          if (ocrBase64) {
            const resToken = await getImagePostToken(); // 获取上传图片token
            const curFileUUID = `IOBS_BUCKET_NAME_APOLLO${(new Date()).getTime().toString()}`;// 待上传图片唯一标识
            if (resToken) {
              const res = await fileUploadToIOBS([
                { name: 'key', data: curFileUUID },
                { name: 'token', data: resToken.data },
                {
                  name: 'file',
                  filename: `${curFileUUID}`,
                  data: RNFetchBlob.base64.encode(`data:image/jpeg;base64,${ocrBase64}`)
                }
              ], true);
              if (res && res.status === 0) {
                const { key } = JSON.parse(res.data);
                await uploadOCR({
                  fileKey: key,
                  ocrRes: value.lba50039,
                  ocrType: 5
                });
              }
            }
          }
        } catch (err) {
          RNLog(err);
        }
        dispatch({
          type: 'GET_SAVEPAYEE',
          params,
          callback: (res) => {
            if (res.status === 0) {
              Toast.show('提交成功');
              resetFields('');
              projectAccountForm2[loanID] = {}; // 保存成功后将本地数据清空
              dispatch({ type: 'SET_PROJECT_ACCOUNT_FORM_2', data: projectAccountForm2 });
              navigation.navigate('ProjectInformation', { accViewFlag: flagKey });
            }
          }
        });
      });
    } else if ((flagKey === 1 || flagKey === 2) && protocolChecked !== -1) {
      const params = {
        // ...bankaccountInfoList[protocolChecked],
        lba50032: bankaccountInfoList[protocolChecked].ba50032,
        lba50033: bankaccountInfoList[protocolChecked].ba50033,
        lba50034: bankaccountInfoList[protocolChecked].ba50034,
        lba50035: bankaccountInfoList[protocolChecked].ba50035,
        lba50036: bankaccountInfoList[protocolChecked].ba50036,
        lba50038: bankaccountInfoList[protocolChecked].ba50038,
        lba50039: bankaccountInfoList[protocolChecked].ba50039,
        bankno: '',
        beosId: '',
        baId: bankaccountInfoList[protocolChecked].baId,
        accountType: flagKey,
        loanId: loanID || bankaccountInfoList[protocolChecked].loanid, // 贷款id
        customerId: bankaccountInfoList[protocolChecked].customerid,
        bankType: _data && _data[0] && _data[0].value ? _data[0].value : '', // 付款方式
      };
      delete params.loanid;
      delete params.customerid;
      RNLog(params);
      dispatch({
        type: 'GET_SAVEPAYEE',
        params,
        callback: (res) => {
          if (res.status === 0) {
            Toast.show('提交成功');
            navigation.navigate('ProjectInformation', { accViewFlag: flagKey });
          }
        }
      });
    } else if ((flagKey === 1 || flagKey === 2) && chenkNum !== -1) {
      const params = {
        // ...bankaccountInfoList[chenkNum],
        lba50032: bankaccountInfoList[chenkNum].ba50032,
        lba50033: bankaccountInfoList[chenkNum].ba50033,
        lba50034: bankaccountInfoList[chenkNum].ba50034,
        lba50035: bankaccountInfoList[chenkNum].ba50035,
        lba50036: bankaccountInfoList[chenkNum].ba50036,
        lba50038: bankaccountInfoList[chenkNum].ba50038,
        lba50039: bankaccountInfoList[chenkNum].ba50039,
        bankno: '',
        beosId: '',
        baId: bankaccountInfoList[chenkNum].baId,
        accountType: flagKey,
        loanId: loanID || bankaccountInfoList[chenkNum].loanid, // 贷款id
        customerId: bankaccountInfoList[chenkNum].customerid,
        bankType: _data && _data[0] && _data[0].value ? _data[0].value : '', // 付款方式
      };
      delete params.loanid;
      delete params.customerid;
      RNLog(params);
      dispatch({
        type: 'GET_SAVEPAYEE',
        params,
        callback: (res) => {
          if (res.status === 0) {
            Toast.show('提交成功');
            navigation.navigate('ProjectInformation', { accViewFlag: flagKey });
          }
        }
      });
    } else if ((flagKey === 1 || flagKey === 2) && chenkNum === -1) {
      this.setState({ disableButton: -1 });
    }
  }


  returnData(obj) {
    const { form } = this.props;
    const { setFieldsValue } = form;
    if (obj.key === 1) {
      setFieldsValue({
        lba50032: String(obj.bhfId),
        ba50032Name: obj.name,
      });
      this.setState({ bankTotal: obj.bhfId, bankTotalName: obj.name });
    }
    if (obj.key === 2) {
      setFieldsValue({
        lba50035: String(obj.bbId),
        ba50035Name: obj.name,
      });
      this.setState({ bank: obj.bbId, bankName: obj.name });
    }
    if (obj.key === 7) {
      setFieldsValue({
        bankno: String(obj.beosbankid),
        ba50035Name: obj.name,
      });
      this.setState({
        beosbankid: obj.beosbankid,
        bankfullname: obj.bankfullname,
        beosId: obj.beosId
      });
    }
  }


  render() {
    const {
      navigation,
      form,
      bankaccountInfoList,
      projectAccountForm2
    } = this.props;
    const flagKey = navigation.getParam('flagKey');
    const _data = navigation.getParam('_data');
    const loanID = navigation.getParam('loanID');
    const {
      bankTotal, bankName, bankTotalName, bankfullname, disableButton, protocolChecked, chenkNum
    } = this.state;
    const { getFieldDecorator, getFieldError, setFieldsValue } = form;
    // 判断本地有存储未完成的账户信息，回显到表单中
    if (projectAccountForm2[loanID] && Object.values(projectAccountForm2[loanID]).length > 0) {
      Object.assign(bankaccountInfoList[0], projectAccountForm2[loanID]);
    }
    // 格式化省市
    const AddressLive = () => {
      if (bankaccountInfoList && bankaccountInfoList[0].ba50033 && bankaccountInfoList[0].ba50034) {
        return [bankaccountInfoList[0].ba50033, bankaccountInfoList[0].ba50034];
      }
      return [];
    };

    const handleflagButton = () => {
      if (flagKey === 1 || flagKey === 2 || flagKey === 3) {
        const data = navigation.getParam('data');
        const { flagButton } = data;
        return flagButton;
      }
      return '';
    };
    return (
      <View style={GlobalStyles.container}>
        <KeyboardAvoidingView
          behavior="padding"
          style={{ flex: 1 }}
        >
          <ScrollView style={styles.main}>
            {
              flagKey === 1 || flagKey === 2
                ? (this.handleEdit(bankaccountInfoList, _data, protocolChecked, chenkNum)) : <View />
            }
            {
              flagKey === 3
                ? (this.handleView(navigation, bankTotal, bankName,
                  getFieldDecorator, getFieldError, bankTotalName,
                  AddressLive, setFieldsValue, bankaccountInfoList, bankfullname, _data))
                : <View />
            }

          </ScrollView>
          <SafeAreaView style={styles.protocolWrap}>
            { (flagKey === 1 || flagKey === 2) && handleflagButton() === 1
              ? (
                <CommonButton
                  text="确认"
                  disable={disableButton === -1}
                  onPressButton={this.handleSubmit}
                />
              ) : null
            }
            {
              flagKey === 3 && handleflagButton() === 1
                ? (
                  <CommonButton
                    text="提交"
                    onPressButton={this.handleSubmit}
                  />
                ) : null
            }
          </SafeAreaView>
        </KeyboardAvoidingView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  main: {
    marginTop: GapCommon.gapBase * 2
  },
  list: {
    backgroundColor: ColorCommon.white
  },
  name: {
    color: ColorCommon.grayish,
    fontSize: 16
  },
  right: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  content: {
    color: ColorCommon.dark,
    fontSize: 16,
  },
  protocolWrap: {
    paddingTop: GapCommon.gapBase * 4,
    paddingBottom: GapCommon.gapBase * 4,
    paddingLeft: GapCommon.gapBase * 4,
    paddingRight: GapCommon.gapBase * 4
  },
  accountList: {
    marginTop: GapCommon.gapBase * 4,
    marginLeft: GapCommon.gapBase * 4,
    marginRight: GapCommon.gapBase * 4,
    backgroundColor: ColorCommon.white,
    width: screenW - 32,
    paddingLeft: GapCommon.gapBase * 3,
    paddingRight: GapCommon.gapBase * 3,
    paddingTop: GapCommon.gapBase * 5,
    paddingBottom: GapCommon.gapBase * 5
  },
  accountContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginLeft: GapCommon.gapBase * 7,
    marginBottom: GapCommon.gapBase * 3
  },
  radio: {
    position: 'absolute',
    left: 16,
    top: 20
  },
  accountName: {
    fontSize: 15,
    color: ColorCommon.lightGray
  },
  accountDesc: {
    fontSize: 15,
    color: ColorCommon.dark
  }
});

const mapStateToProps = (state) => ({
  bankaccountInfoList: state.bankaccountInfoList,
  saveReceivingList: state.saveReceivingList,
  projectAccountForm2: state.projectAccountForm2
});
const AccountInfoViewForm = createForm({
  // 表单域改变时设置isEdit为false
  onValuesChange() {
    isEdit = false;
  }
})(AccountInfoView);
export default connect(mapStateToProps)(AccountInfoViewForm);