'use strict';

import React, {Component} from 'react';
import {Dimensions, ListView, StyleSheet, Text, View} from 'react-native';
import {Immutable} from 'immutable';


export default class WithdrawalRecord extends Component {

    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

    _renderRow(rowData, sectionID, rowID) {
        return (
            <View>
                <View style={styles.rowView}>
                    <Text style={styles.numberText}>处理编号：{rowData.get("settlementCode")}</Text>
                    <Text style={styles.priceText}>{rowData.get("settlementAmountStr")}</Text>
                </View>
                <View style={[styles.rowView, {height: 20, marginTop: 4, marginBottom: 12}]}>
                    <Text style={styles.timeText}>{rowData.get("settlementTimeStr")}</Text>
                    <Text style={styles.statusText}>{rowData.get("settlementStatus")}</Text>
                </View>
                <View style={styles.lineView}/>
            </View>
        );
    }

    render() {
        let {
            settlementRecordList,
        } = this.props;
        let recordList = settlementRecordList.list ? settlementRecordList.list.toArray() : [];
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    // yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(recordList)}
                    renderRow={this._renderRow}
                    onEndReached={() => {
                        if (recordList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}/>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        alignItems: 'center'
    },
    contentContainer: {
        width: width,
        backgroundColor: 'white'
    },
    rowView: {
        width: width,
        height: 22,
        flexDirection: 'row',
        marginTop: 12,
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    lineView: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    numberText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0.19,
    },
    priceText: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 16,
        color: '#444444',
        letterSpacing: -0.21,
        fontWeight: 'bold'
    },
    timeText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#B0B0B0',
        letterSpacing: -0.19,
    },
    statusText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 12,
        color: '#D0021B',
        letterSpacing: -0.29,
    },
});