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

import Immutable, {Map} from 'immutable';

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

    onPressDelayQuestion() {
        Alert.alert('逾期服务费信息','如果您到期未还款：需要加收逾期利息费和延迟还款费\n逾期利息费：待还本金 *利息率*延迟还款天数，利息率=0.025%/天\n延迟还款费：逾期3天内还款免收延迟还款服务费，逾期4天，从第一天逾期开始算，500元之内，加收1元/天延迟还款服务费。每500元增加1元/天。',
                [{text: '我知道了'},]);
    }

    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 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>
                {
                    isDelay ? 
                        <View style={styles.delayDescContainer}>
                            <Text style={styles.delayDesc} numberOfLines={1}>{desc}</Text>
                            <TouchableOpacity onPress={() => { this.onPressDelayQuestion && this.onPressDelayQuestion();}}>
                                <Image style={styles.question} source={require("../../image/red_question_icon.png")}/>
                            </TouchableOpacity>
                        </View>
                    : 
                        <Text style={styles.desc} 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,
        marginRight: 5 * DEVICE_WIDTH_RATIO,
    },

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

    delayDescContainer:{
        position: 'absolute',
        top: 15 * DEVICE_WIDTH_RATIO,
        right: 15 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },

    delayDesc:{
        color: "#ff0000",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },

    question: {
        width: 14 * DEVICE_WIDTH_RATIO,
        height: 14 * DEVICE_WIDTH_RATIO,
        marginTop: 2 * DEVICE_WIDTH_RATIO,
        marginLeft: 3 * DEVICE_WIDTH_RATIO,
    },

});