import React, { Component } from 'react'
import {
  View,
  Dimensions,
  FlatList,
  TouchableOpacity,
  Text,
} from 'react-native'
import { connect } from 'react-redux'

import { NavigationActions } from '../../../utils'
import Icon from '../../../components/Iconfont/Iconfont'
import ModalEcx from '../../../components/Modal'

const { width, height } = Dimensions.get('window')

// @connect(({ theme }) => ({ ...theme }))
class OrderCredit extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
    }
  }

  _closeModal() {
    this.credit._setModalVisible(false)
  }
  _openModal = va => {
    this.credit._setModalVisible(true)
    this.setState({ data: va })
  }

  OrderCredit(item) {
    return (
      <View
        style={{
          marginBottom: 2,
          borderBottomColor: '#EEE',
          borderBottomWidth: 1,
        }}
      >
        <View style={{ paddingTop: 7 }}>
          <Text style={{ fontSize: 14, color: '#333' }}>
            {item.productLineName}
          </Text>
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            paddingVertical: 7,
          }}
        >
          <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
            信用余额：
          </Text>
          <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
            {CURRENCY.currencySign} {item.creditBalance}
          </Text>
        </View>
        <View
          style={{
            flexDirection: 'row',
            justifyContent: 'space-between',
            marginBottom: 7,
          }}
        >
          <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
            本单产品线金额：
          </Text>
          <Text style={{ fontSize: 13, lineHeight: 18, color: '#666' }}>
            {CURRENCY.currencySign} {item.thisProdLineAmount}
          </Text>
        </View>
      </View>
    )
  }

  _renderModalContent() {
    return (
      <View
        style={{
          width: width,
          backgroundColor: '#FFF',
          paddingHorizontal: 10,
          paddingTop: 20,
          paddingBottom: 130,
        }}
      >
        <TouchableOpacity
          onPress={() => {
            this._closeModal()
            this.props.cb && this.props.cb()
          }}
          style={{ position: 'absolute', right: 10, top: 10 }}
        >
          <Icon name="icon-icon-guanbianniu" size={26} color={'#CCC'} />
        </TouchableOpacity>
        <Text
          style={{
            alignSelf: 'center',
            fontSize: 15,
            lineHeight: 19,
            color: '#333',
          }}
        >
          本单信用满足情况
        </Text>
        <FlatList
          keyExtractor={(item, index) => index}
          data={this.state.data}
          extraData={this.state}
          style={{ marginTop: 31 }}
          renderItem={({ item, index }) => this.OrderCredit(item, index)}
        />
      </View>
    )
  }

  gotoDetail = () => {
    this.props.dispatch(NavigationActions.navigate({ routeName: 'Detail' }))
  }

  render() {
    return (
      <ModalEcx
        ref={credit => (this.credit = credit)}
        content={this._renderModalContent()}
      />
    )
  }
}

export default OrderCredit