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

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


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

    render() {

        let bankName = "农业银行";
        let cardNo = "4561";
        let userName = "**聪";
        let mobile = "*****5865";
        let isMaster = false;

        let cardDesc = isMaster ? "主卡，用于支付验证和还款验证。" : "副卡，仅用于还款验证。";
        let cardTip = isMaster ? "如果您更换银行预留手机号，请先新增其他还款银行卡，并将新增银行卡切换为主卡。然后解除绑定此卡，重新绑定即可。"
                     : "如果您更换银行预留手机号，请先将银行卡解除绑定，再次重新绑定即可。";

        return (
            <View style={styles.container}>
                <View style={styles.cardDetailContainer}>
                    <Image style={styles.cardDetailImg} source={require("../../image/bank/b-ABC.png")}/>
                    <Text style={styles.cardDetailName}>{bankName}</Text>
                    <Text style={styles.cardDetailNo}>储蓄卡 | 尾号{cardNo}</Text>
                </View>
                <View style={styles.cardInfoContainer}>
                    <Text style={styles.cardInfoLabel}>持卡人</Text>
                    <Text style={styles.cardInfoData}>{userName}</Text>
                </View>
                <View style={styles.cardInfoLine}></View>
                <View style={styles.cardInfoContainer}>
                    <Text style={styles.cardInfoLabel}>预留手机号</Text>
                    <Text style={styles.cardInfoData}>{mobile}</Text>
                </View>
                <View style={styles.cardInfoLine}></View>
                <View style={styles.cardInfoContainer}>
                    <Text style={styles.cardInfoLabel}>分期银行</Text>
                    <Text style={styles.cardInfoData}>{cardDesc}</Text>
                </View>
                <View style={styles.cardTipContainer}>
                    <Text style={styles.cardTip}>{cardTip}</Text>
                    {
                        isMaster ? null : 
                            <View style={styles.buttonContainer}>
                                <TouchableOpacity activeOpacity={1} onPress={() => {
                                        this.props.onPressReleaseCard && this.props.onPressReleaseCard();}}>
                                    <Text style={styles.releaseButton}>解除绑定</Text>
                                </TouchableOpacity>
                                <TouchableOpacity activeOpacity={1} onPress={() => {
                                        this.props.onPressChangeCard && this.props.onPressChangeCard();}}>
                                    <Text style={styles.changeButton}>切换为主卡</Text>
                                </TouchableOpacity>
                            </View>
                    }
                </View>

                <Toast text="解绑成功" isVisible={false} />

            </View>
        );
    }
};

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

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

    cardDetailContainer:{
        width: width,
        height: 60 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#f8555b",
    },

    cardDetailImg:{
        position: 'absolute',
        top: 10 * DEVICE_WIDTH_RATIO,
        left: 15 * DEVICE_WIDTH_RATIO,
        width: 40 * DEVICE_WIDTH_RATIO,
        height: 40 * DEVICE_WIDTH_RATIO,
    },

    cardDetailName:{
        position: 'absolute',
        top: 10 * DEVICE_WIDTH_RATIO,
        left: 65 * DEVICE_WIDTH_RATIO,
        width: 150 * DEVICE_WIDTH_RATIO,
        height: 20 * DEVICE_WIDTH_RATIO,
        fontSize: 15 * DEVICE_WIDTH_RATIO,
        color: "white",
        fontWeight: 'bold',
    },

    cardDetailNo:{
        position: 'absolute',
        top: 30 * DEVICE_WIDTH_RATIO,
        left: 65 * DEVICE_WIDTH_RATIO,
        width: 150 * DEVICE_WIDTH_RATIO,
        height: 30 * DEVICE_WIDTH_RATIO,
        fontSize: 13 * DEVICE_WIDTH_RATIO,
        color: "white",
    },

    cardInfoContainer:{
        width: width,
        height: 44 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#ffffff",
        flexDirection: 'row',
        alignItems: 'center',
    },

    cardInfoLabel:{
        width: 125 * DEVICE_WIDTH_RATIO,
        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
        fontSize: 14 * DEVICE_WIDTH_RATIO,
    },

    cardInfoData:{
        width: 150 * DEVICE_WIDTH_RATIO,
        fontSize: 13 * DEVICE_WIDTH_RATIO,
    },

    cardInfoLine:{
        width: width - 15 * DEVICE_WIDTH_RATIO,
        height: 0.5 * DEVICE_WIDTH_RATIO,
        marginLeft: 15 * DEVICE_WIDTH_RATIO,
        backgroundColor: "#b4b4b4",
    },

    cardTipContainer:{
        flex: 1,
        backgroundColor: "#f0f0f0",
    },

    cardTip: {
        width: width,
        paddingLeft: 15 * DEVICE_WIDTH_RATIO,
        paddingRight: 10 * DEVICE_WIDTH_RATIO,
        paddingTop: 10 * DEVICE_WIDTH_RATIO,
        fontSize: 12 * DEVICE_WIDTH_RATIO,
        color: "#b0b0b0",
    },

    buttonContainer:{
        width: width,
        height: 100,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },

    releaseButton:{
        width: 130 * DEVICE_WIDTH_RATIO,
        height: 44 * DEVICE_WIDTH_RATIO,
        fontSize:14 * DEVICE_WIDTH_RATIO,
        paddingTop:12 * DEVICE_WIDTH_RATIO,
        marginRight: 8 * DEVICE_WIDTH_RATIO,
        color: '#000000',
        textAlign: 'center',
        borderColor:'#444444',
        borderWidth:2,
        borderRadius: 6,
    },

    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:'#444444',
        borderWidth:2,
        borderRadius: 6,
        backgroundColor:'#444444',
    },


});