occ-mobile/app/containers/mine/viewlist/recharge/RechargeAdd.js

import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  FlatList,
  Text,
  StatusBar,
  TouchableOpacity,
  Dimensions,
  ScrollView,
  TextInput,
  PixelRatio,
  ActivityIndicator,
} from 'react-native'
import { connect } from 'react-redux'

import Icon from '../../../../components/Iconfont/Iconfont'
import Collapsible from 'react-native-collapsible'

import { HeaderView } from '../../../common/HeaderView'
import SelectTime from '../../../common/SelectTime'
import { NavigationActions, createAction } from '../../../../utils'
import {
  ScaleUtil,
  accDiv,
  accAdd,
  ReturnDate,
  accSub,
} from '../../../../utils/utils'
import moment from 'moment'
import Toast from 'react-native-root-toast'

const { width, height } = Dimensions.get('window')
@connect(({ theme, rechargeModels, mine }) => ({
  ...theme,
  ...rechargeModels,
  ...mine,
}))
class RechargeAdd extends Component {
  constructor(props) {
    super(props)
    this.state = {
      collapsed: true,
      allSaleData: [],
      chooseOrders:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.billclaimDetailDto
          : [], //添加的关联订单
      payTime:
        props.navigation.state.params && props.navigation.state.params.item
          ? ReturnDate(props.navigation.state.params.item.claimTime, true)
          : ReturnDate(new Date(), true), // 付款单日期
      // 付款方信息
      payerText:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.payAccountAccountName
          : '', // 付款方信息 - 付款方

      receiptSuppier:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.saleOrgName
          : '', // 收款方信息 - 供应商Name
      receiptSuppierId:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.saleOrgId
          : '', // 收款方信息 - 供应商Id
      // 收款方信息
      receipter:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.financeOrgName
          : '', // 收款方信息 - 收款方Name
      receipterId:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.financeOrgId
          : '', // 收款方信息 - 收款方Id

      receiptAccount:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.receiptAccountAccountName
          : '', // 收款方信息 - 收款方账号Name
      receiptAccountId:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.receiptAccountId
          : '', // 收款方信息 - 收款方账号Id
      // 付款业务信息
      payType: '', // 付款业务信息 - 收款业务类型Name
      payTypeId:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.billreceiptType
          : '', // 付款业务信息 - 收款业务类型Id
      acountText:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.money
          : '', // 付款业务信息 - 付款金额
      payWayName:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.payWayName
          : '', //支付方式Name
      payWayCode:
        props.navigation.state.params && props.navigation.state.params.item
          ? props.navigation.state.params.item.payWayCode
          : '', //支付方式Id
      collapsedId: 'sad',
    }
    this.key = 1
  }

  // 跳转
  NavigateToOthers(routeName, params) {
    this.props.dispatch(
      NavigationActions.navigate({ routeName: routeName, params: params })
    )
  }

  // 请求
  RequestOthers(actionName, actionSearch, dispatchFinally) {
    this.props
      .dispatch(createAction(actionName)(actionSearch))
      .finally(dispatchFinally)
  }

  componentDidMount = () => {
    // 供应商
    this.RequestOthers(
      'mine/getCusSup',
      {
        customerId: CUSTOMERINFO.id,
        customerRankCode: CUSTOMERINFO.customerRankCode,
        comeFrom: 'supplier',
      },
      () => {
        if (this.props.SupplierInfo) {
          const allsaleArr = []
          this.props.SupplierInfo.forEach(item => {
            allsaleArr.push(item.saleOrganizationId)
          })
          this.findFinanceBySaleOrg(allsaleArr)
          this.setState({ allSaleData: allsaleArr })
        }
      }
    )
    // 供应商
    this.RequestOthers('mine/getBillWay', '')
    // 收款业务类型
    this.RequestOthers('mine/getPayTypes', '', () => {
      if (
        this.state.payTypeId &&
        this.props.payTypesData &&
        this.props.payTypesData.length > 0
      ) {
        this.props.payTypesData.forEach(item => {
          if (item.id == this.state.payTypeId) {
            this.state.payType = item.name
            this.setState({ payType: item.name })
          }
        })
      }
    })
  }

  // 通过供应商寻财务组织
  findFinanceBySaleOrg(item) {
    this.RequestOthers('mine/findFinanceBySaleOrg', {
      saleOrgIds: item,
      // item && item.saleOrganizationId ? [item.saleOrganizationId] : []
    })
  }

  // 通过财务组织寻收款账户信息
  findAccountByFinance(item) {
    this.RequestOthers('mine/findAccountByFinanceSaga', {
      finanOrgId: item.finanOrgId,
    })
  }

  //  行显示
  rowShow(data) {
    return (
      <View
        style={{
          paddingVertical: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          borderBottomColor: '#EEE',
          borderBottomWidth: data.isLast ? 0 : 1,
        }}
      >
        <Text style={{ fontSize: 14, color: '#333', letterSpacing: 0.17 }}>
          {data.titleName}
        </Text>
        <Text style={{ fontSize: 14, color: '#666', letterSpacing: 0.17 }}>
          {data.value}
        </Text>
      </View>
    )
  }

  //  行显示--时间
  rowShowForDate(data) {
    return (
      <View
        style={{
          paddingVertical: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          borderBottomColor: '#EEE',
          borderBottomWidth: data.isLast ? 0 : 1,
        }}
      >
        <Text style={{ fontSize: 14, color: '#333', letterSpacing: 0.17 }}>
          {data.titleName}
        </Text>
        <TouchableOpacity
          onPress={() => {
            this.showTime._openModal()
          }}
          style={{ flexDirection: 'row' }}
        >
          <Text
            style={{
              fontSize: 14,
              color: data.value ? '#666' : '#CCC',
              letterSpacing: 0.17,
            }}
          >
            {data.value || '请选择'}
          </Text>
          <Icon
            name="icon-icon-xiala"
            color={'#999'}
            size={14}
            style={{
              justifyContent: 'center',
              marginLeft: 5,
            }}
          />
        </TouchableOpacity>
      </View>
    )
  }

  rowShowForInput(data) {
    return (
      <View
        style={{
          paddingVertical: 10,
          flexDirection: 'row',
          justifyContent: 'space-between',
          borderBottomColor: '#EEE',
          borderBottomWidth: data.isLast ? 0 : 1,
          alignItems: 'center',
        }}
      >
        <Text style={{ fontSize: 14, color: '#333', letterSpacing: 0.17 }}>
          {data.titleName}
        </Text>
        <TextInput
          style={{
            width: width / 2.5,
            padding: 0,
            fontSize: 14,
            lineHeight: 20,
            letterSpacing: 0.38,
            color: data.isAmount ? '#E70013' : '#333',
            marginTop: 4,
            textAlign: 'right',
          }}
          editable={
            this.state.chooseOrders && this.state.chooseOrders.length > 0
              ? false
              : true
          }
          autoCapitalize="none"
          autoCorrect={false}
          underlineColorAndroid={'transparent'}
          clearButtonMode="while-editing"
          onChangeText={text => data.onChange(text)}
          defaultValue={
            (typeof data.value == 'number'
              ? ScaleUtil(data.value, CURRENCY.currencyAmountScale)
              : data.value) + ''
          }
          multiline={false}
          // onSubmitEditing={() => this._searchindex()}
          placeholder={'请输入'}
          placeholderTextColor={'#CCC'}
        />
      </View>
    )
  }

  //  行显示-下拉
  rowShowCollapse(data) {
    const valueShow = []
    let touchKey
    if (data.value && data.value.length > 0) {
      data.value.forEach((item, key) => {
        valueShow.push(
          <TouchableOpacity
            onPress={() => {
              data.onTouch && data.onTouch(item)
            }}
            key={key}
            style={{
              paddingVertical: 10,
              flexDirection: 'row',
              justifyContent: 'space-between',
            }}
          >
            <Text
              style={{
                fontSize: 14,
                color: key == touchKey ? 'red' : '#666',
                letterSpacing: 0.17,
              }}
            >
              {item[data.nameKet]}
            </Text>
            <Icon
              name="icon-icon-duigou"
              color={'#999'}
              size={14}
              style={{
                justifyContent: 'center',
                marginLeft: 5,
              }}
            />
          </TouchableOpacity>
        )
      })
    }
    return (
      <View>
        <TouchableOpacity
          onPress={() => {
            if (this.state.collapsed == data.titleName) {
              this.setState({ collapsed: true })
            } else {
              this.setState({ collapsed: data.titleName })
            }
          }}
          style={{
            paddingVertical: 10,
            flexDirection: 'row',
            justifyContent: 'space-between',
            borderBottomColor: '#EEE',
            borderBottomWidth: data.isLast ? 0 : 1,
          }}
        >
          <Text style={{ fontSize: 14, color: '#333', letterSpacing: 0.17 }}>
            {data.titleName}
          </Text>
          <View style={{ flexDirection: 'row' }}>
            <Text
              style={{
                fontSize: 14,
                color: data.rightName ? '#666' : '#CCC',
                letterSpacing: 0.17,
              }}
            >
              {data.rightName || '请选择'}
            </Text>
            <Icon
              name="icon-icon-xiala"
              size={14}
              color={'#999'}
              style={{
                justifyContent: 'center',
                marginLeft: 5,
                transform: [
                  {
                    rotate:
                      data.titleName !== this.state.collapsed
                        ? '0deg'
                        : '180deg',
                  },
                ],
              }}
            />
          </View>
        </TouchableOpacity>
        {data.value && data.value.length > 0 ? (
          <Collapsible
            collapsed={data.titleName !== this.state.collapsed}
            align={'center'}
          >
            <View>{valueShow}</View>
          </Collapsible>
        ) : null}
      </View>
    )
  }

  associateOrder() {
    this.state.chooseOrders.push({
      key: this.key,
      amount: 0,
      paymentType: '',
      paymentTypeName: '',
      persistStatus: 'new',
      serialnum: this.key * 10,
    })
    this.setState({
      chooseOrders: this.state.chooseOrders,
    })
    this.key++
  }

  // 确定回调
  confirmCbFn(e) {
    this.calculateTotleAmt()
  }

  // 计算价格并赋值到付款金额上
  calculateTotleAmt(e) {
    let totleAmount = 0
    const returnData = e ? e : this.state.chooseOrders
    returnData.forEach(item => {
      totleAmount = ScaleUtil(
        accAdd(item.amount, totleAmount),
        CURRENCY.currencyAmountScale
      )
    })
    // if (returnData) {
    //   this.setState({ chooseOrders: returnData });
    // }
    this.setState({ acountText: totleAmount })
  }

  // 提交的数据拼装
  payDataModal(flag, totleAmt) {
    const payReturnData = {
      billDate: new Date(this.state.payTime).getTime(),
      currencyName: CURRENCY.name,
      customerId: CUSTOMERINFO.id,
      payBillItemSet: this.state.chooseOrders,
      // payeeAccount: this.state.receiptAccountId, //收款方账号
      payeeId: this.state.receipterId, //收款方（财务组织）
      paymentAmount: this.state.acountText, //付款金额
      // paymentModeId: this.state.payWayCode, //支付方式
      paymentTypeId: this.state.payTypeId, //付款类型
      persistStatus: 'new',
      supplierId: this.state.receiptSuppierId,
    }
    return payReturnData
  }

  // 提交/暂存付款单
  submitPayment() {
    let payDataModal = this.payDataModal()
    if (
      payDataModal.payeeId &&
      payDataModal.paymentAmount > 0 &&
      payDataModal.paymentTypeId
    ) {
      this.NavigateToOthers('OrderPay', {
        submitData: payDataModal,
        totalAmount: payDataModal.paymentAmount,
        comeFrom: 'addPayBill',
        callBack: () => {
          this.props.navigation.state.params.goBackCb()
        },
      })
    } else {
      if (this.toast) {
        Toast.hide(this.toast)
      }
      this.toast = Toast.show(
        `请选择:${payDataModal.payeeId ? '' : ' "收款方" '}${
          this.state.payTime ? '' : ' "时间" '
        }${payDataModal.paymentAmount > 0 ? '' : ' "付款金额" '}${
          payDataModal.paymentTypeId ? '' : ' "付款类型" '
        } 后再保存/提交！`,
        { position: toastHeight }
      )
    }
  }

  render() {
    const {
        appTheme,
        SupplierInfo,
        billwayData,
        payTypesData,
        payWays,
        financeBankAcc,
        FinancialOrg,
      } = this.props,
      //
      // 付款单抬头
      payJobid = { titleName: '支付单编号', value: ' ' },
      // payBillType = {
      //   titleName: "支付方式",
      //   value: payWays,
      //   nameKet: "name",
      //   rightName: this.state.payWayName,
      //   onTouch: item => {
      //     this.setState({
      //       payWayName: item.name,
      //       payWayCode: item.code,
      //       collapsed: true
      //     });
      //   }
      // },
      payCurrency = { titleName: '支付币种', value: CURRENCY.name },
      payJobTime = {
        titleName: '支付单日期',
        value: this.state.payTime,
        isLast: true,
      },
      //
      // 收款方信息
      receiptSuppier = {
        titleName: '供应商',
        value: SupplierInfo,
        nameKet: 'saleOrganizationName',
        rightName: this.state.receiptSuppier,
        onTouch: item => {
          this.findFinanceBySaleOrg([item.saleOrganizationId])
          this.setState({
            receiptSuppier: item.saleOrganizationName,
            receiptSuppierId: item.saleOrganizationId,
            // 置空收款方和收款方账号
            receipter: '',
            receipterId: '',
            receiptAccount: '',
            receiptAccountId: '',
            collapsed: true,
          })
        },
      },
      receipterInfo = {
        titleName: '收款方',
        value: FinancialOrg,
        nameKet: 'finanOrgName',
        rightName: this.state.receipter,
        onTouch: item => {
          this.findAccountByFinance(item)
          this.setState({
            receipter: item.finanOrgName,
            receipterId: item.finanOrgId,
            // 置空收款方账号
            receiptAccount: '',
            receiptAccountId: '',
            collapsed: true,
          })
        },
      },
      // receiptAccount = {
      //   titleName: "收款方账号",
      //   value: financeBankAcc,
      //   nameKet: "accountName",
      //   rightName: this.state.receiptAccount,
      //   onTouch: item => {
      //     this.setState({
      //       receiptAccount: item.accountName,
      //       receiptAccountId: item.id,
      //       collapsed: true
      //     });
      //   },
      //   isLast: true
      // },
      //
      //付款业务信息
      payType = {
        titleName: '收款业务类型',
        value: payTypesData,
        nameKet: 'name',
        rightName: this.state.payType,
        onTouch: item => {
          this.setState({
            payType: item.name,
            payTypeId: item.id,
            collapsed: true,
          })
        },
      },
      payAmount = {
        titleName: '付款金额',
        value: this.state.acountText,
        onChange: e => {
          this.setState({ acountText: e })
        },
        isAmount: true,
        isLast: true,
      }
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {/* 头部 */}
        {HeaderView(this.props.dispatch, '新增支付单')}
        <ScrollView style={styles.container}>
          {/* 订单信息 */}
          <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
            {this.rowShow(payJobid)}
            {/* {this.rowShowCollapse(payBillType)} */}
            {this.rowShow(payCurrency)}
            {this.rowShowForDate(payJobTime)}
          </View>

          {/* 收款方信息 */}
          <View>
            <View
              style={{
                paddingTop: 10,
                paddingBottom: 5,
                paddingHorizontal: 10,
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  color: '#333',
                  letterSpacing: 0.17,
                  fontWeight: '600',
                }}
              >
                收款方信息
              </Text>
              <TouchableOpacity
                onPress={() => {
                  this.findFinanceBySaleOrg(this.state.allSaleData)
                  this.setState({
                    receiptSuppier: '',
                    receiptSuppierId: '',
                    receipter: '',
                    receipterId: '',
                    collapsed: true,
                  })
                }}
                style={{
                  borderColor: '#CCC',
                  borderRadius: 20,
                  borderWidth: 1 / PixelRatio.get(),
                  paddingHorizontal: 10,
                  paddingVertical: 3,
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    color: '#333',
                    letterSpacing: 0.17,
                  }}
                >
                  清空
                </Text>
              </TouchableOpacity>
            </View>
            <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
              {this.rowShowCollapse(receiptSuppier)}
              {this.rowShowCollapse(receipterInfo)}
              {/* {this.rowShowCollapse(receiptAccount)} */}
            </View>
          </View>
          {/* 付款业务信息 */}
          <View>
            <View
              style={{
                paddingTop: 10,
                paddingBottom: 5,
                paddingHorizontal: 10,
              }}
            >
              <Text
                style={{
                  fontSize: 14,
                  color: '#333',
                  letterSpacing: 0.17,
                  fontWeight: '600',
                }}
              >
                付款业务信息
              </Text>
            </View>
            <View style={{ backgroundColor: '#FFF', paddingHorizontal: 10 }}>
              {this.rowShowCollapse(payType)}

              {this.rowShowForInput(payAmount)}
            </View>
          </View>

          <View
            style={{
              padding: 10,
              marginTop: 10,
              flexDirection: 'row',
              backgroundColor: '#FFF',
              borderBottomColor: '#EEE',
              borderBottomWidth: 1 / PixelRatio.get(),
            }}
          >
            <View style={{ flex: 4 }}>
              <Text style={[styles.Text13, { color: '#333' }]}>
                付款业务类型
              </Text>
            </View>
            <View style={{ flex: 4 }}>
              <Text style={[styles.Text13]}>金额</Text>
            </View>
            <View style={{ flex: 1 }}>
              <Text style={[styles.Text13]}>操作</Text>
            </View>
          </View>

          <FlatList
            extraData={this.state}
            keyExtractor={(item, key) => item.key + key}
            data={this.state.chooseOrders}
            renderItem={({ item, index }) => {
              return (
                <View>
                  <View
                    style={{
                      flex: 1,
                      padding: 10,
                      flexDirection: 'row',
                      backgroundColor: '#FFF',
                    }}
                  >
                    <TouchableOpacity
                      style={{ flex: 4 }}
                      onPress={() => {
                        if (this.state.collapsedId == item.key) {
                          this.setState({ collapsedId: 'sad' })
                        } else {
                          this.setState({ collapsedId: item.key })
                        }
                      }}
                    >
                      <Text style={[styles.Text13, { color: '#333' }]}>
                        {item && item.paymentTypeName
                          ? item.paymentTypeName
                          : '请选择...'}
                      </Text>
                    </TouchableOpacity>
                    <View style={{ flex: 4 }}>
                      <TextInput
                        style={{
                          width: width / 2.5,
                          padding: 0,
                          fontSize: 14,
                          lineHeight: 20,
                          letterSpacing: 0.38,
                          color: '#333',
                          marginTop: 4,
                        }}
                        autoCapitalize="none"
                        autoCorrect={false}
                        underlineColorAndroid={'transparent'}
                        clearButtonMode="while-editing"
                        onChangeText={text => {
                          item.amount = text
                          this.setState({
                            chooseOrders: this.state.chooseOrders,
                          })
                        }}
                        value={item.amount ? item.amount + '' : ''}
                        multiline={false}
                        onSubmitEditing={() => this.confirmCbFn()}
                        onBlur={() => this.confirmCbFn()}
                        placeholder={'请输入'}
                        placeholderTextColor={'#CCC'}
                      />
                    </View>
                    <TouchableOpacity
                      onPress={() => {
                        const { chooseOrders } = this.state
                        chooseOrders.splice(index, 1)
                        this.calculateTotleAmt()
                        this.setState({ chooseOrders: chooseOrders })
                      }}
                      style={{ flex: 1 }}
                    >
                      <Text style={[styles.Text13, { color: '#333' }]}>
                        删除
                      </Text>
                    </TouchableOpacity>
                  </View>
                  <Collapsible
                    collapsed={item.key !== this.state.collapsedId}
                    align={'center'}
                  >
                    <FlatList
                      extraData={this.state}
                      keyExtractor={(data, key) => data.id + key}
                      data={payTypesData}
                      renderItem={data => {
                        return (
                          <TouchableOpacity
                            style={{ padding: 10, backgroundColor: '#FFF' }}
                            onPress={() => {
                              item.paymentType = data.item.id
                              item.paymentTypeName = data.item.name
                              this.setState({
                                chooseOrders: this.state.chooseOrders,
                                collapsedId: 'sad',
                              })
                            }}
                          >
                            <Text style={[styles.Text13, { color: '#333' }]}>
                              {data.item.name}
                            </Text>
                          </TouchableOpacity>
                        )
                      }}
                    />
                  </Collapsible>
                </View>
              )
            }}
          />
          {/* 添加关联订单 */}
          <TouchableOpacity
            onPress={() => {
              this.associateOrder()
            }}
            style={{
              paddingVertical: 7,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#FFF',
              flexDirection: 'row',
              marginTop: 10,
            }}
          >
            <Icon
              name="icon-icon-guanbianniu"
              size={20}
              style={{
                transform: [{ rotate: '45deg' }],
                marginRight: 7,
                marginTop: 4,
              }}
            />
            <Text style={{ fontSize: 12, letterSpacing: 0.14, lineHeight: 17 }}>
              添加付款信息
            </Text>
          </TouchableOpacity>
        </ScrollView>

        {/* 底部按钮 */}
        <View
          style={{ height: 45, flexDirection: 'row', backgroundColor: '#FFF' }}
        >
          <TouchableOpacity
            onPress={() => this.props.dispatch(NavigationActions.back())}
            style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
          >
            <Text style={styles.bottonText666}>取消</Text>
          </TouchableOpacity>

          <TouchableOpacity
            onPress={() => {
              this.submitPayment()
            }}
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#E70013',
            }}
          >
            {this.state.isLoading ? (
              <ActivityIndicator />
            ) : (
              <Text style={styles.bottonTextwhite}>提交</Text>
            )}
          </TouchableOpacity>
        </View>
        <SelectTime
          ref={showTime => (this.showTime = showTime)}
          cb={date => {
            this.setState({
              payTime: moment(date).format('YYYY-MM-DD'),
            })
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  Text13: {
    fontSize: 13,
    lineHeight: 18,
  },
  bottonText666: {
    fontSize: 14,
    lineHeight: 20,
    color: '#666',
  },
  bottonTextwhite: {
    fontSize: 14,
    lineHeight: 20,
    color: '#FFF',
  },
})

export default RechargeAdd