'use strict';
import React from 'react';
import ReactNative, {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
} from 'react-native';

import Immutable, {Map} from 'immutable';

export default class MyOrderDetailPayListCell extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {

        let data = this.props.data;

        if(!data)
            return;

        let sort = data.get("sort_id");
        let currentTotalAmount = data.get("curr_amt");
        let currentDate = data.get("curr_date");
        let currentPAmount = data.get("curr_principal_amt");
        let currentFee = data.get("curr_fee_amt");
        let currentDelayFee = data.get("curr_dealy_fee_amt");
        let desc = data.get("desc");
        let status = data.get("status");  //1-还款中 2-结清 3-已逾期 4-已退货5-已取消

        let isDelay = (status == 3);
        let colorStyle = isDelay ? {color: '#444444'} : {color: '#b0b0b0'};

        let isPayable = (status == 1 || status == 3);

        let checked = data.get("isChecked");
        let checkboxIcon = require('../../image/uncheck_icon.png');
        if (checked) {
            checkboxIcon = require('../../image/check_icon.png');
        }


        return(
            <View style={styles.container} >
                <View style={styles.sortContainer}>
                    {
                        isPayable ? 
                        <TouchableOpacity activeOpacity={1} onPress={() => this.props.onPressCheckboxCell && this.props.onPressCheckboxCell(this.props.rowIndex)}>
                            <Image style={styles.checkboxIcon} source={checkboxIcon}/>
                        </TouchableOpacity>
                        : <Text style={styles.sortText} numberOfLines={1}>{sort}</Text>
                    }
                </View>
                <Text style={styles.totalAmount} numberOfLines={1}>{currentTotalAmount}</Text>
                <View style={styles.amountDetailContainer}>
                    <Text style={styles.amountText}>{currentDate}</Text>
                    <Text style={styles.amountText}>{"本金:" + currentPAmount}</Text>
                    <Text style={styles.amountText}>{"服务费:" + currentFee}</Text>
                    {
                        isDelay ? <Text style={styles.amountText}>{"逾期服务费:" + currentDelayFee}</Text> : null
                    }
                </View>
                <Text style={[styles.desc,colorStyle]} numberOfLines={1}>{desc}</Text>
            </View>
        );
    }



};




let {width, height} = Dimensions.get('window');
const DEVICE_WIDTH_RATIO = width / 320;

let styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        height: 60 * DEVICE_WIDTH_RATIO,
        borderBottomColor: '#e0e0e0',
        borderBottomWidth: 0.5,
    },

    sortContainer:{
        position: 'absolute',
        top: 0,
        left: 0,
        width: 50 * DEVICE_WIDTH_RATIO,
        height: 60 * DEVICE_WIDTH_RATIO,
        justifyContent: 'center',
        alignItems: 'center',
    },

    checkboxIcon:{
        width: 20 * DEVICE_WIDTH_RATIO,
        height: 20 * DEVICE_WIDTH_RATIO,
    },

    sortText:{
        color: "#444444",
        fontSize: 14 * DEVICE_WIDTH_RATIO,
    },

    totalAmount:{
        position: 'absolute',
        top: 15 * DEVICE_WIDTH_RATIO,
        left: 50 * DEVICE_WIDTH_RATIO,
        color: "#444444",
        fontSize: 14 * DEVICE_WIDTH_RATIO,
    },

    amountDetailContainer:{
        position: 'absolute',
        top: 36 * DEVICE_WIDTH_RATIO,
        left: 50 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },

    amountText:{
        color: "#444444",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        marginRight: 5 * DEVICE_WIDTH_RATIO,
    },

    desc:{
        position: 'absolute',
        top: 15 * DEVICE_WIDTH_RATIO,
        right: 15 * DEVICE_WIDTH_RATIO,
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },

});