'use strict';

import React, {Component} from 'react';
import {DeviceEventEmitter, Dimensions, ListView, StyleSheet, Text, View, Image, TouchableOpacity} from 'react-native';
import {Immutable} from 'immutable';


export default class WithdrawalRecord extends Component {

    constructor(props) {
        super(props);
        this._renderRow = this._renderRow.bind(this);
        this._renderHeader = this._renderHeader.bind(this);
        this.dataSource = new ListView.DataSource({
            rowHasChanged: (r1, r2) => !Immutable.is(r1, r2),
        });
    }

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

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

    _renderHeader() {
        let uploadStatus = this.props.identityCardInfo.data;
        return (<View>

                  <View style={{width: width, height: 0.5, backgroundColor: '#e0e0e0'}}/>

                  { uploadStatus ?
                    null
                    :
                    <View style={styles.uploadContainer}>
                        <Text style={styles.loadStyle}>{'结算收益时需按照国家规定预扣个税，因此需先上传身份证信息 。若未提供正确有效的身份信息将导致扣税失败而影响提现。'}</Text>
                        <TouchableOpacity style={styles.uploadButton} onPress={()=> {
                            this.props.jumpWithUrl && this.props.jumpWithUrl('我的身份证', 'nameAuthen');
                        }}>
                            <Text style={styles.buttonText}>{'去上传'}</Text>
                        </TouchableOpacity>
                    </View>
                  }

                  { uploadStatus ?

                    <View style={styles.withdrawContainer}>
                        <Text style={[styles.tipStyle, {lineHeight: 40}]}>{'每月20日结算上个月预估佣金并预扣个税'}</Text>
                        <TouchableOpacity activeOpacity={1} style={{flexDirection: 'row', alignItems: 'center'}} onPress={()=> {
                            this.props.jumpWithActivityUrl && this.props.jumpWithActivityUrl();
                        }}>
                            <Text style={styles.tipStyle}>{'结算说明 '}</Text>
                            <Image source={require('../images/more.png')}/>
                        </TouchableOpacity>
                    </View>

                    :

                    <View style={styles.withdrawContainer}>
                        <Text style={[styles.tipStyle, {marginTop: 15, height: 17}]}>{'每月20日结算上个月预估佣金并预扣个税'}</Text>
                        <TouchableOpacity activeOpacity={1} style={{flexDirection: 'row', alignItems: 'center', height: 17, marginTop: 15}} onPress={()=> {
                            this.props.jumpWithActivityUrl && this.props.jumpWithActivityUrl();
                        }}>
                            <Text style={styles.tipStyle}>{'结算说明 '}</Text>
                            <Image style={{width: 11, height: 11}} source={require('../images/more.png')}/>
                        </TouchableOpacity>
                    </View>
                  }

                </View>
        )
    }

    _renderRow(rowData, sectionID, rowID) {
      let showSpace = rowID === rowData.length ? false : true;
        return (
            <View>
                <View style={styles.rowView}>
                    <Text style={styles.numberText}>处理编号：{rowData.get("settlementCode")}</Text>
                    <Text style={styles.statusText}>{rowData.get("settlementStatus")}</Text>
                </View>
                <View style={{width: width, height: 0.5, backgroundColor: '#e0e0e0'}}></View>
                <View style={styles.detailView}>
                  <Text>
                      <Text style={styles.priceText}>税后总收益：</Text>
                      <Text style={styles.allPriceText}>{rowData.get("afterTaxAmountStr")}</Text>
                  </Text>

                    <Text style={styles.priceText}>提现总金额：{rowData.get("settlementAmountStr")}</Text>
                    <Text style={styles.priceText}>扣税总金额：{rowData.get("taxAmountStr")}</Text>
                    <Text style={styles.timeText}>{rowData.get("settlementTimeStr")}</Text>
                </View>
                {showSpace? <View style={{width: width, height: 10, backgroundColor: '#f0f0f0'}}></View> : null}
            </View>
        );
    }

    render() {
        let {
            settlementRecordList,
        } = this.props;
        let recordList = settlementRecordList.list ? settlementRecordList.list.toArray() : [];
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    // yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(recordList)}
                    renderHeader={this._renderHeader}
                    renderRow={this._renderRow}
                    onEndReached={() => {
                        if (recordList.size !== 0) {
                            this.props.onEndReached && this.props.onEndReached();
                        }
                    }}/>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        alignItems: 'center'
    },
    contentContainer: {
        width: width,
        backgroundColor: 'white'
    },
    rowView: {
        width: width,
        height: 50,
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    lineView: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    detailView: {
      width: width,
      paddingTop: 15,
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 20,
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'flex-start',
    },
    allPriceText:{
      fontFamily: 'PingFang-SC-Medium',
      fontSize: 14,
      color: '#D0021B',
    },
    numberText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
    },
    priceText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        marginTop: 6,
    },
    timeText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#B0B0B0',
        marginTop: 15,
    },
    statusText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#D0021B',
    },

    uploadContainer: {
      width: width,
      backgroundColor: 'transparent',
      flexDirection: 'column',
      alignItems: 'center',
      paddingTop: 20,
      paddingLeft: 15,
      paddingRight: 15,
      paddingBottom: 20,
    },
    loadStyle: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 14,
      color: '#444444',
      backgroundColor: 'transparent',
      textAlign: 'left',
      lineHeight: 23,
    },
    uploadButton: {
      width: 80,
      height: 30,
      marginTop: 10,
      borderRadius: 4,
      backgroundColor: '#D0021B',
      alignItems: 'center',
      justifyContent: 'center',
    },
    buttonText: {
      color: 'white',
      fontSize: 14,
      fontWeight: 'bold',
    },
    withdrawContainer: {
      width: width,
      height: 40,
      paddingLeft: 15,
      paddingRight: 15,
      backgroundColor: '#f0f0f0',
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    tipStyle: {
      fontFamily: 'PingFang-SC-Regular',
      fontSize: 12,
      color: '#B0B0B0',
      backgroundColor: 'transparent',
      textAlign: 'center',
    },
});