'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';
import YH_Image from '../../../common/components/YH_Image';
import SlicedImage from '../../../common/components/SlicedImage';
import LoadingIndicator from '../../../common/components/LoadingIndicator';
import BankSafePay from '../installment/BankSafePay';
import ChangeBankCard from '../installment/ChangeBankCard';
import ConfirmPay from '../installment/ConfirmPay';
import Prompt from '../../../coupon/components/coupon/Prompt';


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}
                rowIndex={rowID}
                onPressCheckboxCell={this.props.onPressCheckboxCell}
            />
        );
    }

    render() {

        let {isFetching, orderInfo, showBankSafePayView, showChangeBankView, showConfirmPayView, bankCardsList, payCard, formateData, tipMessage} = this.props.myOrderDetail;

        if(!orderInfo)
            return null;

        //订单商品
        let orderGoods = orderInfo.get("order_goods") ? orderInfo.get("order_goods").get(0) : null;
        let productName = orderGoods ? orderGoods.get("product_name") : "";
        let goodsImage = orderGoods ? orderGoods.get("goods_image") : "";
        goodsImage = goodsImage ? SlicedImage.getSlicedUrl(goodsImage, 45, 60, 2) : "";

        let orderCode = orderInfo.get("order_code") ? ("订单编号：" + orderInfo.get("order_code")) : "";
        let orderTime = orderInfo.get("create_time");
        let orderAmount = orderInfo.get("amount");
        let avgAmount = orderInfo.get("avg_principal_amt");
        let avgFeeAmount = orderInfo.get("avg_fee_amt");
        let totalAmount = orderInfo.get("total_amt");
        //退款金额
        let refundNum = orderInfo.get("refund_num");

        //分期列表
        let package_list = orderInfo.get("package_list") ? orderInfo.get("package_list").toArray() : [];

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

        //订单状态: 1-还款中 2-结清 3-已逾期 4-已退货5-已取消
        let status = orderInfo.get("status");
        let isOrderOver = (status == 2 || status == 4 || status == 5);
        let orderOverText = (status == 2) ? "已结清" : (status == 4) ? "已退货" : (status == 5) ? "已取消" : "";

        
        return (
            <View style={styles.container}>
                {
                    refundNum ? <Text style={styles.refundMsg} numberOfLines={1}>{"该订单已退款" + refundNum + "元"}</Text> : null
                }
                <View style={styles.goodsInfoContainer}>
                    <YH_Image style={styles.goodsImage} url={goodsImage}/>
                    <Text style={styles.productName} numberOfLines={1}>{productName}</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}>{avgAmount}</Text>
                    </View>
                    <View style={styles.installmentInfoCell}>
                        <Text style={styles.installmentInfoCellText}>分期服务费</Text>
                        <Text style={styles.installmentInfoCellText}>{avgFeeAmount}</Text>
                    </View>
                    <View style={styles.installmentInfoCell}>
                        <Text style={styles.installmentInfoCellText}>总计应还</Text>
                        <Text style={styles.installmentInfoCellText}>{totalAmount}</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(package_list)}
                    enableEmptySections={true}
                    renderRow={this.renderRow}
                />
                <View style={styles.splitLine}></View>

                {
                    status ?
                        isOrderOver ?
                        <View style={styles.bottomContainer}>
                            <Text style={styles.orderOverText} numberOfLines={1}>{orderOverText}</Text>
                        </View>
                        :
                        <View style={styles.bottomContainer}>
                            <TouchableOpacity style={styles.checkboxContainer} activeOpacity={1} onPress={() => {
                                                this.props.onPressCheckboxAll && this.props.onPressCheckboxAll()}}>
                                <Image style={styles.checkboxIcon} source={checkboxIcon}/>
                            </TouchableOpacity>
                            <View style={styles.payMoneyContainer}>
                                <Text style={styles.payTitle} numberOfLines={1}>待支付</Text>
                                <Text style={styles.payAmount} numberOfLines={1}> ¥{formateData.get("currAmtCount")?formateData.get("currAmtCount"):'0.00'}</Text>
                            </View>
                            <Text style={styles.payDesc} numberOfLines={1}>含服务费¥{formateData.get("currFeeCount")?formateData.get("currFeeCount"):'0.00'}</Text>

                            <TouchableOpacity style={styles.payButtonContainer} activeOpacity={1} onPress={() => {
                                                this.props.onPressPayNow && this.props.onPressPayNow()}}>
                                <Text style={styles.payButton}>立即还款</Text>
                            </TouchableOpacity>
                        </View>
                        :
                        null
                }


                <LoadingIndicator
                   isVisible={isFetching}
                />

                {showBankSafePayView?
                   <BankSafePay
                       payCard={payCard.toJS()}
                       formateData={formateData.toJS()}
                       closeBankSafePay={this.props.closeBankSafePay}
                       bankSafePayNow={this.props.bankSafePayNow}
                       changeBankCard={this.props.onPressChangeBankCard}
                   />
                   :null
                }
                {showChangeBankView ?
                   <ChangeBankCard
                       payCard={payCard}
                       bankCardsList={bankCardsList}
                       onCancelChangeBankCard={this.props.onCancelChangeBankCard}
                       onConfirmChangeBankCard={this.props.onConfirmChangeBankCard}
                       addNewBankCard={this.props.addNewBankCard}
                   />
                   :null
                }
                {showConfirmPayView?
                   <ConfirmPay
                       reSendConfirmPaySnsCode={this.props.reSendConfirmPaySnsCode}
                       cancelPayInConfirm={this.props.cancelPayInConfirm}
                       confirmPayAction={this.props.confirmPayAction}
                       payCard={payCard.toJS()}
                       formateData={formateData.toJS()}
                   />
                   :null
                }

                {tipMessage !== '' ? <Prompt
                       text={tipMessage}
                       duration={800}
                       onPromptHidden={this.props.clearTipMessage}
                   /> : null}
                

            </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",
    },

    refundMsg:{
        width: width,
        height: 35 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#707070",
        color: "#ffffff",
        fontSize: 14 * DEVICE_WIDTH_RATIO,
        paddingTop: 8 * DEVICE_WIDTH_RATIO,
        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
    },

    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,
    },

    productName:{
        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,
        alignItems: 'center',
        justifyContent: 'center',
    },

    orderOverText:{
        color: "#444444",
        fontSize: 17 * DEVICE_WIDTH_RATIO,
    },

    checkboxContainer:{
        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,
    },

    payMoneyContainer:{
        position: 'absolute',
        top: 15 * DEVICE_WIDTH_RATIO,
        left: 50 * DEVICE_WIDTH_RATIO,
        flexDirection: 'row',
    },

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

    payAmount:{
        color: "#ff0000",
        fontSize: 14 * DEVICE_WIDTH_RATIO,
    },

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

    payButtonContainer:{
        position: 'absolute',
        top: 10 * DEVICE_WIDTH_RATIO,
        right: 15 * DEVICE_WIDTH_RATIO,
        
    },


    payButton:{
        width: 110 * DEVICE_WIDTH_RATIO,
        height: 40 * DEVICE_WIDTH_RATIO,
        fontSize:14 * DEVICE_WIDTH_RATIO,
        color: '#ffffff',
        textAlign: 'center',
        borderColor:'#cc0009',
        borderWidth:2,
        borderRadius: 6,
        backgroundColor:'#cc0009',
        paddingTop: 10 * DEVICE_WIDTH_RATIO,
    },


});