'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, Image, StyleSheet, Text, TouchableOpacity, View, ScrollView} from 'react-native';
import HelpTipsModal from "./HelpTipsModal";
import SureModal from "./SureModal";
import WithdrawModal from "./WithdrawModal";
import ScrollableTabView from 'react-native-scrollable-tab-view';
import TabStatistics from '../components/TabStatistics';
import Statistics from "./Statistics";
import ReactNative from "react-native";
import { TipsAlertItem, TipsAlert } from '../../common/components/YH_TipsAlert';


const tabTitles = ['昨日', '本月', '上月'];

export default class Data extends Component {
    constructor(props) {
        super(props);
        this._jumpBindCardUrl = this._jumpBindCardUrl.bind(this);
    }

    componentDidMount() {
        this.subscription = DeviceEventEmitter.addListener('BankCardBindSuccessEvent', () => {
            this.props.refreshSettlementInfo && this.props.refreshSettlementInfo();
        });
    }

    componentWillUnmount() {
        this.subscription.remove();
    }

    _jumpBindCardUrl() {
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let bindType = bindStatus ? '2' : '1';
        this.props.jumpWithUrl && this.props.jumpWithUrl('我的银行卡', 'bankCard', bindType);
        this.props.hiddenTipsAlertDialog && this.props.hiddenTipsAlertDialog();
    }

    render() {
        let {
            isShowTipsAlert,
            isShowHelp,
            isShowSure,
            isShowWithdrawal,
            statisticsInfo
        } = this.props;
        let bindStatus = this.props.settlementInfo.settlementInfoData.hasBankCard;
        let scrollEnabled = height < 667;
        
        // 处理了空值判断
        let settlementAmount = this.props.settlementInfo.settlementInfoData.settlementAmount;
        settlementAmount = settlementAmount ? settlementAmount : '0';

        return (
            <ScrollView style={styles.container} scrollEnabled = {scrollEnabled}>
                <TipsAlert 
                    tips={this.props.tips}
                    isShow={isShowTipsAlert}
                    >
                    <TipsAlertItem showStatus='sure' handleAction={this._jumpBindCardUrl}>去绑定</TipsAlertItem>
                    <TipsAlertItem showStatus='cancel' handleAction={this.props.hiddenTipsAlertDialog}>取消</TipsAlertItem>
                </TipsAlert>
                <HelpTipsModal
                    tips={this.props.tips}
                    isShowHelp={isShowHelp}
                    hiddenHelpDialog={this.props.hiddenHelpDialog}/>
                <SureModal
                    isShow={isShowSure}
                    hiddenSureDialog={this.props.hiddenSureDialog}
                    showWithdrawalDialog={this.props.showWithdrawalDialog}/>
                <WithdrawModal
                    isShowWithdrawal={isShowWithdrawal}
                    hiddenWithDrawDialog={this.props.hiddenWithDrawDialog}/>
                <View style={styles.headerBackground}>
                    <Text style={styles.canWithDrawText}>可提现金额</Text>
                    <View style={styles.amountView}>
                        <View style={[styles.textView, {flex: 3}]}>
                            <Text
                                style={styles.amountText}><Text style={{fontSize:30}}>￥</Text>{settlementAmount}</Text>
                        </View>
                        <View style={[styles.textView, {flex: 1, alignItems: 'flex-end'}]}>
                            <TouchableOpacity activeOpacity={1} onPress={() => {
                                if (!bindStatus) {
                                    this.props.showTipsAlertDialog && this.props.showTipsAlertDialog('请先完成银行卡绑定');
                                    return
                                }
                                if (!this.props.settlementInfo.settlementInfoData.settlementAmount || this.props.settlementInfo.settlementInfoData.settlementAmount === 0) {
                                    return
                                }
                                if (this.props.settlementInfo.settlementInfoData.canSettlement) {
                                    !this.props.addSettlement.isFetching && this.props.showSureDialog && this.props.showSureDialog();
                                } else {
                                    this.props.showHelpDialog && this.props.showHelpDialog('您有正在处理中的提现，请耐心等待完成后再做新的提现操作');
                                }
                            }}>
                                <Text style={styles.amountButton}>提现</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                    <View style={styles.reminderView}>
                        <Image style={styles.reminderImage} source={require('../images/reminder.png')}/>
                        <Text style={styles.reminderText} numberOfLines={2}>每月20日结算上个月预估佣金，当月预估佣金在下个月20日结算</Text>
                    </View>
                </View>
                <View style={styles.lineView}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('提现记录', 'withdrawalRecord');
                }}>
                    <Text style={styles.hasWithDrawText}>已提现金额</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15, marginTop: 5}]}>
                        <Text
                            style={[styles.hasWithDrawText,{marginTop: -2}]}>￥{this.props.settlementInfo.settlementInfoData.historySettlementAmount}</Text>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                <TouchableOpacity activeOpacity={1} style={styles.withdrawView} onPress={() => {
                    this.props.jumpWithUrl && this.props.jumpWithUrl('全部佣金', 'orderIncome');
                }}>
                    <Text style={styles.hasWithDrawText}>全部佣金数据</Text>
                    <View style={[styles.textView, {flexDirection: 'row', paddingRight: 15}]}>
                        <Image style={styles.arrowImage} source={require('../images/arrow.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
                <ScrollableTabView
                    style={{backgroundColor: 'white'}}
                    locked={true}
                    contentProps={{style: {minHeight: 181}}}
                    scrollWithoutAnimation={true}
                    renderTabBar={() => <TabStatistics tabNames={tabTitles}/>}
                    onChangeTab={(obj) => {this.props.changeTab && this.props.changeTab(obj.i + 1);}}
                >
                    <Statistics statisticsInfo={statisticsInfo} currentTab = {1} resourceJumpWithUrl={this.props.resourceJumpWithUrl}/>
                    <Statistics statisticsInfo={statisticsInfo} currentTab = {2} resourceJumpWithUrl={this.props.resourceJumpWithUrl}/>
                    <Statistics statisticsInfo={statisticsInfo} currentTab = {3} resourceJumpWithUrl={this.props.resourceJumpWithUrl}/>
                </ScrollableTabView>

                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
            </ScrollView>
        );
    }
}

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

let styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#f0f0f0'
        },
        textStyle: {
            flex: 1,
            fontSize: 20,
            marginTop: 20,
            textAlign: 'center',
        },
        textView: {
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'flex-start',
        },
        reminderImage: {
            marginTop: 2,
            width: 11,
            height: 11,
        },
        reminderView: {
            marginTop: 2,
            flexDirection: 'row',
            alignItems: 'flex-start',
        },
        reminderText: {
            fontFamily: 'PingFang-SC-Regular',
            color: '#B0B0B0',
            fontSize: 10,
            paddingLeft: 2,
            paddingRight: 5,
        },
        headerBackground: {
            width: width,
            height: 138,
            backgroundColor: '#FFFFFF',
            paddingTop: 23,
            paddingLeft: 15 * DEVICE_WIDTH_RATIO,
            paddingBottom: 25,
            position: 'relative',
        },
        canWithDrawText: {
            height: 20,
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 12,
            color: '#B0B0B0',
            marginBottom:5,
        },
        amountView: {
            width: width - 15 * 2 * DEVICE_WIDTH_RATIO,
            height: 58,
            marginTop: 1,
            flexDirection: 'row',
            justifyContent: 'flex-start',
        },
        amountText: {
            lineHeight: 48,
            fontSize: 48,
            color: '#444444',
            fontWeight: 'bold',
            marginLeft: -5,
        },
        amountButton: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            fontWeight: 'bold',
            backgroundColor: '#D0021B',
            color: '#FFFFFF',
            borderWidth: 1,
            borderColor: '#D0021B',
            borderRadius: 4,
            overflow: 'hidden',
            paddingTop: 5,
            paddingLeft: 18 * DEVICE_WIDTH_RATIO,
            paddingRight: 18 * DEVICE_WIDTH_RATIO,
            paddingBottom: 5,
            textAlign: 'center',
        },
        withdrawView: {
            width: width,
            height: 50,
            backgroundColor: '#FFFFFF',
            flexDirection: 'row',
            paddingLeft: 15,
            alignItems: 'center',
            justifyContent: 'space-between'
        },
        hasWithDrawText: {
            fontFamily: 'PingFang-SC-Regular',
            fontSize: 14,
            color: '#444444',
        },
        arrowImage: {
            width: 16,
            height: 16,
            marginLeft: 2,
        },
        lineView: {
            width: width,
            height: 0.5,
            backgroundColor: '#e0e0e0'
        }
    })
;