npmchenwei111/app/views/borrowdetail/CompanyDetailContentCardLayout.js

test1111

/**
 * Created by changwei on 2017/6/20.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import { px2dp, sp } from '../../utils/Px2dp'
import R from '../../assets/R'
import YTShowSelectedMenu from '../../../src/native/YTShowSelectedMenu'
import Utils from '../../utils/Utils'
import RequestSimplify from '../../utils/RequestSimplify'
import YoujieApi from '../../api/YoujieApi'

class CompanyDetailContentCardLayout extends Component {
  constructor (props) {
    super(props)
    this.setData(props)
  }

  componentDidMount () {
  }

  //@Override 重写方法
  componentWillReceiveProps (props) {
    this.state = {
      ...this.state,
      companyDetail: {
        ...this.state.companyDetail,
        months: Utils.avoidNullArray(props.data.months),
        cashes: Utils.avoidNullArray(props.data.cashes),
      },
    }
  }

  setData (props) {
    this.state = {
      companyDetail: {
        cash: props.data.defaultCash,
        month: props.data.defaultMonth,
        monthlyPayment: props.data.monthlyPayment,
        months: Utils.avoidNullArray(props.data.months),
        cashes: Utils.avoidNullArray(props.data.cashes),
      },
    }
  }

  openSelect (filed, value) {

    switch (filed) {
      case 'cash':
        if (this.state.companyDetail.cashes === null) {
          return false
        }
        let copyCashs = []
        console.log(this.props.data.cashes, 'amounts')
        this.state.companyDetail.cashes.forEach((value, index) => {
          copyCashs.push(`${value}`)
        })

        let cashIndex = copyCashs.indexOf(this.state.companyDetail.cash)
        YTShowSelectedMenu.show('请选择借款金额', copyCashs, cashIndex).then(resolve => {
            this.setState({
              companyDetail: {
                ...this.state.companyDetail,
                cash: copyCashs[resolve],
              }
            }, () => {
              this.getMonth(this.state.companyDetail.cash)
            })
          }
        ).catch(reject => {
            console.log(`Show Selected Menu failed because of ${reject}`)
          }
        )
        break
      case 'month':
        if (this.state.companyDetail.months === null) {
          return false
        }
        let copyMonths = []
        console.log(this.state.companyDetail.months, 'months')
        this.state.companyDetail.months.forEach((value, index) => {
          copyMonths.push(`${value}`)
        })

        console.log('CompanyDetail copyMonths', copyMonths, 'this.state.companyDetail.month:', this.state.companyDetail.month)

        let monthIndex = copyMonths.indexOf(this.state.companyDetail.month)

        YTShowSelectedMenu.show('请选择借款期限', copyMonths, monthIndex).then(resolve => {
            this.setState({
              companyDetail: {
                ...this.state.companyDetail,
                month: copyMonths[resolve],
              }
            }, () => {
              this.getRepayCash(this.state.companyDetail.cash, this.state.companyDetail.month)
            })
          }
        )
        break
    }

  }

  getMonth (cash) {
    RequestSimplify.fetchNoCancelable(YoujieApi.get_company_month, {
      companyId: parseFloat(this.props.data.companyId).toFixed(0),
      cash: parseFloat(cash).toFixed(0)
    }, (res) => {
      let data = res.data
      let index = data.months.indexOf(parseInt(this.state.companyDetail.month))
      this.setState({
        companyDetail: {
          ...this.state.companyDetail,
          months: data.months,
          month: data.months[index < 0 ? 0 : index].toString()
        }
      }, () => {
        this.getRepayCash(this.state.companyDetail.cash, this.state.companyDetail.month)
      })
    })
  }

  getRepayCash (cash, month) {
    RequestSimplify.fetchNoCancelable(YoujieApi.get_company_repayment, {
      companyId: parseFloat(this.props.data.companyId).toFixed(0),
      cash: parseFloat(cash).toFixed(0),
      month: parseFloat(month).toFixed(0)
    }, (res) => {
      let data = res.data
      this.setState({
        companyDetail: {
          ...this.state.companyDetail,
          monthlyPayment: data.repayment,
        }
      })
    })
  }

  _renderPaymentItem (content, tip, i) {
    return <View style={styles.itemWrap}
                 key={i}>
      <Text style={styles.itemContent} numberOfLines={1}>{content}</Text>
      <Text style={styles.tip}>{tip}</Text>
    </View>
  }

  render () {
    let companyDetail = this.props.data
    console.log(companyDetail, 'companyDetail')
    return (
      <View style={[styles.container, this.props.style]}>
        <View style={styles.content}>
          {[
            this._renderPaymentItem(parseFloat(this.state.companyDetail.monthlyPayment).toFixed(1), '每月应还款', 0),
            <View style={styles.line}
                  key={1}/>,
            this._renderPaymentItem(companyDetail.referenceRateAll, companyDetail.referenceRateDesc, 2),
            <View style={styles.line}
                  key={3}/>,
            this._renderPaymentItem(companyDetail.lendingTime, '最快放款时间', 4),
          ]}
        </View>

        <View style={[styles.content, {marginTop: px2dp(36), marginLeft: px2dp(10), marginRight: px2dp(10)}]}>

          <TouchableOpacity activeOpacity={0.7}
                            style={[styles.bottomContent, {flex: 1, paddingLeft: 10, paddingRight: 10}]}
                            onPress={() => {this.openSelect('cash', this.state.companyDetail.cash)}}>
            <View style={{flexDirection: 'row'}}>
              <Text style={[styles.tip]}>金额</Text>
              <View style={{flexDirection: 'row', flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
                <Text style={[styles.tip, {color: '#333', paddingRight: 7}]}>
                  {
                    this.state.companyDetail.cash
                  }
                </Text>
                <Image source={R.img.ic_arrow_down} style={{width: 6, height: 6}}/>
              </View>
            </View>
          </TouchableOpacity>

          <TouchableOpacity activeOpacity={0.7}
                            style={[styles.bottomContent, {flex: 1, marginLeft: 10, paddingRight: 10, paddingLeft: 10}]}
                            onPress={() => {this.openSelect('month', this.state.companyDetail.month)}}>
            <View style={{flexDirection: 'row'}}>
              <Text style={[styles.tip]}>期限</Text>
              <View style={{flexDirection: 'row', flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}>
                <Text style={[styles.tip, {color: '#333', paddingRight: 7}]}>
                  {
                    this.state.companyDetail.month + '月'
                  }
                </Text>
                <Image source={R.img.ic_arrow_down} style={{width: 6, height: 6}}/>
              </View>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    paddingRight: px2dp(8),
    paddingLeft: px2dp(8),
    borderColor: '#000',
    borderRadius: px2dp(6),
  },
  content: {
    flexDirection: 'row',
    marginTop: px2dp(30),
  },
  contentBottom: {
    backgroundColor: '#fff',
    borderColor: '#000',
    borderRadius: px2dp(15),
  },
  itemWrap: {
    flex: 1,
    alignItems: 'center',
  },
  itemValueWrap: {
    flexDirection: 'row'
  },
  itemContent: {
    height: px2dp(40),
    fontSize: sp(22),
    textAlign: 'center',
    color: '#333333'
  },
  tip: {
    color: '#666666',
    fontSize: sp(14),
    alignItems: 'center'
  },
  line: {
    width: px2dp(1),
    marginTop: px2dp(15),
    marginBottom: px2dp(15),
    backgroundColor: '#e2e2e2',
  },
  bottomContent: {
    backgroundColor: '#fff',
    borderColor: '#c9c9c9',
    borderRadius: px2dp(10),
    borderWidth: px2dp(1),
    height: px2dp(30),
    flexDirection: 'row',
    alignItems: 'center'
  },
})

export default CompanyDetailContentCardLayout