npmchenwei111/app/views/loanapply/BorrowPeriodItemView.js

test1111

/**
 * Created by ziyu on 2017/6/26.
 */

import React, { Component } from 'react'
import { Image, StyleSheet, Text, View } from 'react-native'
import YTShowSelectedMenu from '../../../src/native/YTShowSelectedMenu'
import Button from '../../common/views/Button'
import ArrowRight from '../../common/views/ArrowRight'
import { px2dp, sp } from '../../utils/Px2dp'
import R from '../../assets/R'

class BorrowPeriodItemView extends Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedPeriodIndex: -1,
      period: {
        termList: [],
        termStr: ''
      }
    }
  }

  componentDidMount () {

  }

  openSelect () {
    if (this.props.period.termList == null) {
      return false
    }
    let copyPeriods = this.props.period.termList || []
    console.log(this.state.selectedPeriodIndex)
    YTShowSelectedMenu.show('请选择借款期限', copyPeriods, this.state.selectedPeriodIndex).then(
      resolve => {
        console.log(resolve, 'resolve')
        this.setState({
          selectedPeriodIndex: resolve
        }, () => {
          this.props.changeSelectPeriod(copyPeriods[resolve])
        })
        console.log(`Selected value is ${resolve}`)
      }
    )
  }

  _renderPeriodText (txt) {
    console.log('txt', txt)
    return (
      <Text style={{
        color: txt ? R.color.bar_color : R.color.font_input_hint,
        fontSize: sp(16),
        textAlign: 'right',
        flex: 1
      }}>{txt || '请选择期限'}</Text>
    )
  }

  _renderArrow () {
    return (
      <View style={{justifyContent: 'center', paddingLeft: px2dp(5)}}>
        <ArrowRight />
      </View>
    )
  }

  render () {
    let period = this.props.period
    console.log('period', period)
    console.log('period1', this.state.selectedPeriodIndex)
    return (
      <Button onPress={() => { this.openSelect()}}>
        <View style={styles.borrowItem}>
          <View style={{justifyContent: 'center', marginRight: px2dp(10)}}>
            <Image style={styles.borrowItemIcon} source={R.img.ic_date_limit}/>
          </View>
          <View style={styles.borrowContent}>
            <Text style={styles.period_title}>{period.termStr}</Text>
            {[
              this._renderPeriodText(period.termList[this.state.selectedPeriodIndex]),
              this._renderArrow()
            ]}
          </View>
        </View>
      </Button>
    )
  }

}

const
  styles = StyleSheet.create({
    borrowItem: {
      paddingHorizontal: px2dp(16),
      flexDirection: 'row',
      backgroundColor: '#fff'
    },
    borrowItemIcon: {
      width: px2dp(22),
      height: px2dp(22),
      justifyContent: 'center',
      resizeMode: Image.resizeMode.contain
    },
    borrowContent: {
      position: 'relative',
      paddingTop: px2dp(25),
      paddingBottom: px2dp(25),
      flexDirection: 'row',
      flex: 1,
      borderBottomWidth: px2dp(1),
      borderBottomColor: '#EFEFF4',
      borderStyle: 'solid',
      marginLeft: px2dp(10),
    },
    period_title: {
      color: R.color.bar_color,
      fontSize: sp(16),
    }
  })

export default BorrowPeriodItemView