'use strict';

import React from 'react';
import ReactNative from 'react-native';

const {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    TouchableOpacity,
    Modal,
    ScrollView,
} = ReactNative;


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

    render() {
        return (
            <Modal  visible={this.props.isShow}
                    animationType={'none'}
                    transparent={true}
                    onRequestClose={() => { }}>

                <View style={styles.modalContainer}>
                    <View style={styles.modalView}>
                        <View style={styles.confirmTitleContainer}>
                            <Text style={[styles.sure, {marginTop: 20, marginBottom: 8}]}>提示</Text>
                            <ScrollView style={styles.scrollView} vertical={true} showsVerticalScrollIndicator={true} >

                              <Text style={{marginLeft: 30, marginRight: 30}}>

                                <Text style={styles.boldTextStyle}>如何查询银行卡开户行？{'\n'}</Text>

                                <Text >
                                  <Text style={styles.boldTextStyle}>第一种：</Text>
                                  <Text style={styles.confirmContent}>手机银行查询。现在银行基本上都有属于自己的APP，用户下载后，登录手机银行，打开我的账号，就能查到开户行信息了。{'\n'}</Text>
                                </Text>

                                <Text >
                                  <Text style={styles.boldTextStyle}>第二种：</Text>
                                  <Text style={styles.confirmContent}>网银查询跟手机银行差不多，都是通过网络查询，只要能上网，随时随地都可以查到开户行的信息。网银查询，前提是需要用户本已经开通了网上银行账号，然后上网搜找到自己银行卡的官网，比如工商银行，打开官网“中国工商银行中国网站”，进入登录个人网上银行后，点击我的账户-账务查询-账户开户-开户行信息，就可以看到开户行信息。{'\n'}</Text>
                                </Text>

                                <Text >
                                  <Text style={styles.boldTextStyle}>第三种：</Text>
                                  <Text style={styles.confirmContent}>微信公众号查询。打开微信，点一下右上角“+”号，点击添加朋友，再点击公众号，输入银行卡所属银行名称，关注后发送“开户行”就能轻松查询。{'\n'}</Text>
                                </Text>

                                <Text >
                                  <Text style={styles.boldTextStyle}>第四种：</Text>
                                  <Text style={styles.confirmContent}>电话查询。拿出自己的银行卡，卡的反面有写明客服电话，拨打后转接人工服务，询问客服人员该卡的开户行是什么，等待回复。{'\n'}</Text>
                                </Text>

                                <Text >
                                  <Text style={styles.boldTextStyle}>第五种：</Text>
                                  <Text style={styles.confirmContent}>营业厅查询。这种方式，是最多人选择的。但要记得带上身份证和银行卡前往营业厅，排队取号在柜台进行查询，有的银行也可以直接在大厅进行查询。{'\n'}</Text>
                                </Text>

                              </Text>

                            </ScrollView>
                        </View>
                        <View style={styles.confirmBtnContainer}>
                            <TouchableOpacity
                                style={{width: '100%', alignItems: 'center', justifyContent: 'center', height: 44}}
                                onPress={() => {
                                    this.props.hiddenBankTipsAlert && this.props.hiddenBankTipsAlert();
                                }}>
                                <Text style={styles.sure}>我知道了</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </Modal>
        );
    }
};

let {width, height} = Dimensions.get('window');

let styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        width: width,
        height: height,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'rgba(0, 0, 0, 0.4)',
    },
    modalView: {
        width: 270,
        height: 337,
        borderRadius: 5,
        backgroundColor: '#ffffff',
        flexDirection: 'column',
    },
    confirmBtnContainer: {
        width: '100%',
        height: 44,
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: '#ffffff',
    },
    confirmTitleContainer: {
        alignItems: 'center',
    },
    confirmContent: {
        color: '#444444',
        fontSize: 14,
        lineHeight: 24,
        textAlign: 'left',
        letterSpacing: -0.09,
        fontFamily: 'PingFang-SC-Regular',
        includeFontPadding: false,
    },
    boldTextStyle: {
      color: '#444444',
      fontSize: 14,
      fontWeight:'bold',
      lineHeight: 24,
      textAlign: 'left',
      letterSpacing: -0.09,
      fontFamily: 'PingFang-SC-Regular',
      includeFontPadding: false,
    },
    sure: {
        fontSize: 17,
        color: '#D0021B',
        letterSpacing: -0.41,
        fontWeight: 'bold',
        fontFamily: 'PingFang-SC-Regular',
    },
    scrollView: {
        height: 241,
        backgroundColor: '#ffffff',
    },
});