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

import Immutable, {Map} from 'immutable';
import Toast from '../../../common/components/Toast';
import MyOrderDetailPayListCell from './MyOrderDetailPayListCell';


export default class MyOrderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.dataSource = new ListView.DataSource({
          rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
        this.renderRow = this.renderRow.bind(this);
    }


    renderRow(rowData, sectionID, rowID, highlightRow) {
        return (
            <MyOrderDetailPayListCell
                data={rowData}
                onPressOrder={this.props.onPressOrder}

            />
        );
    }

    render() {

        let goodsName = "Adidas Originals KS full size";
        let orderCode = "订单编号：165965646564 ";
        let orderTime = "2015.12.13";
        let orderMoney = "￥ 455";
        let isOrderPaying = false;
        let orderStateText = "还款中1/3";

        let colorStyle = isOrderPaying ? {color: '#444444'} : {color: '#b0b0b0'};

        let cardList = [{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'},{'a':'A'}];



        return (
            <View style={styles.container}>
                <View style={styles.goodsInfoContainer}>
                    <Image style={styles.goodsImage} source={require("../../image/bank/bank-ABC.png")} />
                    <Text style={styles.goodsName} numberOfLines={1}>{goodsName}</Text>
                    <Text style={styles.orderCode} numberOfLines={1}>{orderCode}</Text>
                    <Text style={styles.orderTime} numberOfLines={1}>{orderTime}</Text>
                </View>
                <View style={styles.splitLine}></View>
                <View style={styles.installmentInfoContainer}>
                    <View style={styles.installmentInfoCell}>
                        <Text style={styles.installmentInfoCellText}>分期应还</Text>
                        <Text style={styles.installmentInfoCellText}>{"555"}</Text>
                    </View>
                    <View style={styles.installmentInfoCell}>
                        <Text style={styles.installmentInfoCellText}>分期服务费</Text>
                        <Text style={styles.installmentInfoCellText}>{"555"}</Text>
                    </View>
                    <View style={styles.installmentInfoCell}>
                        <Text style={styles.installmentInfoCellText}>总计应还</Text>
                        <Text style={styles.installmentInfoCellText}>{"555"}</Text>
                    </View>                    
                </View>
                <View style={styles.splitLine}></View>
                <View style={styles.splitBlank}></View>
                <View style={styles.splitLine}></View>
                <ListView
                    style={styles.payListContainer}
                    dataSource={this.dataSource.cloneWithRows(cardList)}
                    enableEmptySections={true}
                    renderRow={this.renderRow}
                />
                <View style={styles.splitLine}></View>
                <View style={styles.bottomContainer}>
                    <TouchableOpacity activeOpacity={1} onPress={() => {
                                        this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
                        <Text style={styles.changeButton}>立即还款</Text>
                    </TouchableOpacity>
                </View>
                

            </View>
        );
    }
};

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: "#ffffff",
    },

    splitLine:{
        width: width,
        height: 0.5 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#b4b4b4",
    },

    splitBlank:{
        width: width,
        height: 15 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#f0f0f0",
    },

    goodsInfoContainer:{
        width: width,
        height: 80 * DEVICE_WIDTH_RATIO,
    },

    goodsImage:{
        position: 'absolute',
        top: 10 * DEVICE_WIDTH_RATIO,
        left: 15 * DEVICE_WIDTH_RATIO,
        width: 45 * DEVICE_WIDTH_RATIO,
        height: 60 * DEVICE_WIDTH_RATIO,
    },

    goodsName:{
        position: 'absolute',
        top: 15 * DEVICE_WIDTH_RATIO,
        left: 70 * DEVICE_WIDTH_RATIO,
        color: "#444444",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },

    orderCode:{
        position: 'absolute',
        top: 30 * DEVICE_WIDTH_RATIO,
        left: 70 * DEVICE_WIDTH_RATIO,
        color: "#444444",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },

    orderTime:{
        position: 'absolute',
        top: 50 * DEVICE_WIDTH_RATIO,
        left: 70 * DEVICE_WIDTH_RATIO,
        color: "#b0b0b0",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },


    installmentInfoContainer:{
        width: width,
        height: 60 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },

    installmentInfoCell:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'column',
    },

    installmentInfoCellText:{
        color: "#444444",
        fontSize: 12 * DEVICE_WIDTH_RATIO,
    },

    payListContainer:{
        width: width,
        height: 200 * DEVICE_WIDTH_RATIO,
    },

    bottomContainer:{
        width: width,
        height: 60 * DEVICE_WIDTH_RATIO,
    },


    changeButton:{
        width: 130 * DEVICE_WIDTH_RATIO,
        height: 44 * DEVICE_WIDTH_RATIO,
        fontSize:14 * DEVICE_WIDTH_RATIO,
        paddingTop:12 * DEVICE_WIDTH_RATIO,
        marginLeft: 8 * DEVICE_WIDTH_RATIO,
        color: '#ffffff',
        textAlign: 'center',
        borderColor:'#cc0009',
        borderWidth:2,
        borderRadius: 6,
        backgroundColor:'#cc0009',
    },


});