/**@flow
 * Created by shiyunjie on 2018/8/18.
 */
import React from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Panel from '../../components/Agera-App-Base-panel';
import BasicIcon from '../../components/BasicIcon';


const screenWidth = global.SCREEN_WIDTH;


const styles = StyleSheet.create({

  explainFont: {
    fontSize: 14,
    color: '#666666',
  },
});

type Props = {
  item : Object,
  index : number,
}

export default function LoanPanel(props : Props) {
  const {
    item, index,
  } = props;
  return (
    <Panel
      title={item.title}
      containerHeight={50}
      index={index}
      amount=""
      upIcon={(
        <BasicIcon
          suite="Ionicons"
          name="ios-arrow-up"
          size={24}
          color="#666"
        />
      )}
      downIcon={(
        <BasicIcon
          suite="Ionicons"
          name="ios-arrow-down"
          size={24}
          color="#666"
        />
      )}
    >
      <View
        style={{
          //height: (65),
          flexDirection: 'column',
          justifyContent: 'flex-start',
          backgroundColor: '#F9FAFB',
          paddingBottom: (8),
          alignItems: 'stretch',
          //flexWrap: 'wrap',
        }}
      >
        <View
          style={{
            paddingHorizontal: (15),
          }}
        >
          {
            item.content.map((info, index) => (
              <View
                style={{
                //height: 25,
                  width: screenWidth - 50,
                  flexDirection: 'row',
                  justifyContent: 'flex-start',
                  flexWrap: 'wrap',
                  marginVertical: 10,
                }}
              >
                <Text style={[styles.explainFont]}>
                  {info.key}
                </Text>
                <View style={{ flex: 1 }} />
                <View
                  style={{
                    flexDirection: 'row',
                    justifyContent: 'flex-end',
                    flexWrap: 'nowrap',
                  }}
                >
                  <Text style={[styles.explainFont, { minWidth: 0, color: '#333' }]}>
                    {info.value}
                  </Text>
                </View>
              </View>
            ))
          }
        </View>
        <View style={{ backgroundColor: '#fff', height: 20 }} />
      </View>
    </Panel>
  );
}
