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

import Icon from '../../../components/Iconfont/Iconfont'
import { NavigationActions, createAction } from '../../../utils'
import Echarts from '../../../components/echarts/EchartsComponent'
import { ScaleUtil } from '../../../utils/utils'
import { isIphoneX } from '../../common/theme/config'
import { HeaderView } from '../../common/HeaderView'

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

@connect(({ theme, mine_header }) => ({ ...theme, ...mine_header }))
class Credit extends Component {
  constructor(props) {
    super(props)
    this.state = { data: [] }
    // console.disableYellowBox = true;
  }

  listHeader(section) {
    return (
      <View
        style={{
          marginTop: 10,
          padding: 10,
          backgroundColor: '#FAFAFA',
          borderBottomColor: '#DDD',
          flexDirection: 'row',
          justifyContent: 'space-between',
          borderBottomWidth: 1 / PixelRatio.get(),
          borderTopColor: '#DDD',
          borderTopWidth: 1 / PixelRatio.get(),
        }}
      >
        <Text style={{ fontSize: 15, lineHeight: 21, color: '#333' }}>
          {section.financialOrg}
        </Text>
        <Text style={{ fontSize: 15, lineHeight: 21, color: '#333' }}>
          {section.saleOrg}
        </Text>
      </View>
    )
  }

  listItemRender(item, index) {
    return (
      <View
        style={{
          paddingHorizontal: 10,
          paddingTop: 10,
          paddingBottom: 20,
          backgroundColor: '#FFF',
          borderBottomColor: '#EEE',
          borderBottomWidth: 1,
        }}
      >
        <Text style={{ fontSize: 14, lineHeight: 20, color: '#333' }}>
          {item.productGroupName}
        </Text>
        <View>
          <Echarts data={item} index={index} bottomText={'余额'} />
        </View>
        <View style={{ flexDirection: 'row' }}>
          <View style={{ flex: 1, alignItems: 'center' }}>
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                letterSpacing: 0.16,
                color: '#999',
              }}
            >
              额度
            </Text>
            <Text
              style={{
                fontSize: 15,
                lineHeight: 21,
                letterSpacing: 0.18,
                color: '#333',
                marginTop: 7,
              }}
            >
              {CURRENCY.currencySign}
              {ScaleUtil(item.creditLimit, CURRENCY.currencyAmountScale)}
            </Text>
          </View>
          <View style={{ height: 30, width: 2, backgroundColor: '#EEE' }} />
          <View
            style={{
              flex: 1,
              alignItems: 'center',
            }}
          >
            <Text
              style={{
                fontSize: 13,
                lineHeight: 18,
                letterSpacing: 0.16,
                color: '#999',
              }}
            >
              占用
            </Text>
            <Text
              style={{
                fontSize: 15,
                lineHeight: 21,
                letterSpacing: 0.18,
                color: '#333',
                marginTop: 7,
              }}
            >
              {/* 预占 */}
              {/* {CURRENCY.currencySign}{item.preoccupyLimit} */}
              {/* 占用 */}
              {CURRENCY.currencySign}
              {ScaleUtil(item.occupyLimit, CURRENCY.currencyAmountScale)}
            </Text>
          </View>
        </View>
      </View>
    )
  }

  render() {
    const { appTheme, creditData } = this.props
    return (
      <View
        style={[
          styles.container,
          { backgroundColor: appTheme.backgroundColor },
        ]}
      >
        <StatusBar
          animated={true}
          barStyle={appTheme.barStyle}
          // barStyle={"dark-content"}
          backgroundColor={'transparent'}
          translucent={true}
        />
        {HeaderView(this.props.dispatch, '信用余额')}

        {creditData ? (
          <SectionList
            keyExtractor={(item, index) => index}
            stickySectionHeadersEnabled={true}
            renderSectionHeader={({ section }) => this.listHeader(section)}
            renderItem={({ item, index }) => this.listItemRender(item, index)}
            style={{ marginTop: -10 }}
            sections={creditData}
          />
        ) : (
          <View
            style={{ flex: 1, alignSelf: 'center', justifyContent: 'center' }}
          >
            <ActivityIndicator />
          </View>
        )}
        <View
          style={{
            height: 10,
            width: width,
            position: 'absolute',
            top: isIphoneX() ? 74 : 50,
            backgroundColor: '#FFF',
          }}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
})

export default Credit