'use strict';

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


export default class OrderIncome extends Component {

    constructor(props) {
        super(props);
        this.state = {
            orderType: 1,
            orderStatus: 0,
        };

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

    updateState(type, status) {
        this.setState({
            orderType: type,
            orderStatus: status,
        });
    }

    _renderHeader() {
        return (
            <View style={{backgroundColor: 'white'}}>
                <View style={styles.header}>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                        this.updateState(1, 0);
                        this.props.onPressTab && this.props.onPressTab(1, 0);
                    }}>
                        <View style={styles.headerContainer}>
                            <Text style={this.state.orderType === 1 ? styles.headerText : styles.headerText_unselect}>订单佣金</Text>
                        </View>
                        {this.state.orderType !== 1 ? null :
                            <View style={{alignItems: 'center'}}>
                                <View style={styles.underLine}/>
                            </View>
                        }
                    </TouchableOpacity>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                        this.updateState(2, 0);
                        this.props.onPressTab && this.props.onPressTab(2, 0);
                    }}>
                        <View style={styles.headerContainer}>
                            <Text style={this.state.orderType === 2 ? styles.headerText : styles.headerText_unselect}>活动佣金</Text>
                        </View>
                        {this.state.orderType !== 2 ? null :
                            <View style={{alignItems: 'center'}}>
                                <View style={styles.underLine}/>
                            </View>
                        }
                    </TouchableOpacity>
                </View>
                <View style={styles.lineView}/>
                {this.state.orderType === 3 ? null :
                    <View style={styles.subHeader}>
                        <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                            this.setState({orderStatus: 0});
                            this.props.onPressTab && this.props.onPressTab(this.state.orderType, 0);
                        }}>
                            <View style={styles.headerContainer}>
                                <View style={[styles.subHeaderContainer, this.state.orderStatus === 0 ? {backgroundColor: '#444444'} : null]}>
                                    <Text style={[styles.subHeaderText, this.state.orderStatus === 0 ? {color: 'white'} : null]}>全部</Text>
                                </View>
                            </View>
                        </TouchableOpacity>

                        <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                            this.setState({orderStatus: 1});
                            this.props.onPressTab && this.props.onPressTab(this.state.orderType, 1);
                        }}>
                            <View style={styles.headerContainer}>
                              <View style={[styles.subHeaderContainer, this.state.orderStatus === 1 ? {backgroundColor: '#444444'} : null]}>
                                <Text style={[styles.subHeaderText, this.state.orderStatus === 1 ? {color: 'white'} : null]}>待结算</Text>
                              </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                            this.setState({orderStatus: 2});
                            this.props.onPressTab && this.props.onPressTab(this.state.orderType, 2);
                        }}>
                            <View style={styles.headerContainer}>
                              <View style={[styles.subHeaderContainer , this.state.orderStatus === 2 ? {backgroundColor: '#444444'} : null]}>
                                <Text style={[styles.subHeaderText, this.state.orderStatus === 2 ? {color: 'white'} : null]}>未提现</Text>
                              </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                            this.setState({orderStatus: 3});
                            this.props.onPressTab && this.props.onPressTab(this.state.orderType, 3);
                        }}>
                            <View style={styles.headerContainer}>
                              <View style={[styles.subHeaderContainer, this.state.orderStatus === 3 ? {backgroundColor: '#444444'} : null]}>
                                <Text style={[styles.subHeaderText, this.state.orderStatus === 3 ? {color: 'white'} : null]}>已提现</Text>
                              </View>
                            </View>
                        </TouchableOpacity>
                        <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                            this.setState({orderStatus: 4});
                            this.props.onPressTab && this.props.onPressTab(this.state.orderType,4);
                        }}>
                            <View style={styles.headerContainer}>
                                <View style={[styles.subHeaderContainer, this.state.orderStatus === 4 ? {backgroundColor: '#444444'} : null]}>
                                    <Text style={[styles.subHeaderText, this.state.orderStatus === 4 ? {color: 'white'} : null]}>已关闭</Text>
                                </View>
                            </View>
                        </TouchableOpacity>
                    </View>
                }
                {this.state.orderType === 3 ? null : <View style={styles.lineView}/>}
            </View>
        )
    }

    _renderRow(rowData, sectionID, rowID) {
        let status = rowData.get('status') === '10' ? '待结算' : '';
        return (
            <View>
                <TouchableOpacity activeOpacity={1} onPress={() => {
                    this.props.jumpWithUrl && (this.state.orderType === 1 ? this.props.jumpWithUrl('订单详情', 'orderDetail', rowData.get('orderCode')) : this.props.jumpWithUrl('佣金详情', 'activityOrderDetail', rowData.get('id')) );
                }}>
                    <View style={styles.rowView}>
                        <View style={{height: 70, paddingTop: 12, paddingBottom: 12}}>
                            { this.state.orderType === 1 ? <Text style={styles.numberText}>订单金额：{rowData.get('lastOrderAmountStr')}</Text> : <Text style={styles.numberText}>活动名称：{rowData.get('activityName')}</Text>}
                            <View style={{flexDirection: 'row', marginTop: 6}}>
                                <Text style={styles.timeText}>{rowData.get('orderTimeStr')}</Text>
                                {rowData.get('isNew') === 1 && this.state.orderType === 1  ?
                                    <View style={styles.statusTextContainer}>
                                        <Text style={styles.statusText}>新客订单</Text>
                                    </View>: null}
                            </View>
                        </View>
                        <View>
                            <Text style={styles.priceText}>{rowData.get('amountStr')}</Text>
                            <Text style={[styles.timeText, {fontSize:12, textAlign:'right'}]}>{status}</Text>
                        </View>
                    </View>
                    <View style={styles.lineView}/>
                </TouchableOpacity>
            </View>
        );
    }

    render() {
        let {orderList} = this.props;
        let orderLists = orderList.list ? orderList.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(orderLists)}
                    renderRow={this._renderRow}
                    renderSectionHeader={this._renderHeader}
                    onEndReached={() => {
                        if (orderLists.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'
    },
    headerContainer: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    header: {
        backgroundColor: 'white',
        width: width - 110,
        height: 44,
        marginLeft:55,
        marginRight:55,
        flexDirection: 'row',
    },
    headerText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0.19,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    headerText_unselect: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#B0B0B0',
        letterSpacing: -0.19,
        textAlign: 'center',
    },
    subHeader: {
        width: width,
        height: 44,
        paddingLeft: 5,
        paddingRight: 5,
        flexDirection: 'row',
    },
    subHeaderContainer: {
      width: 56,
      height: 24,
      paddingTop: 3,
      paddingBottom: 3,
      borderRadius: 100,
      backgroundColor: '#f0f0f0',
      alignItems: 'center',
      justifyContent: 'center',
    },
    subHeaderText: {
        letterSpacing: -0.16,
        fontSize: 12,
        color: '#444444',
        textAlign: 'center',
        fontFamily: 'PingFang-SC-Regular',
    },
    rowView: {
        width: width,
        height: 70,
        flexDirection: 'row',
        paddingLeft: 15,
        paddingRight: 15,
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    underLine: {
        width: 56,
        height: 2,
        backgroundColor: '#444444',
    },
    lineView: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    numberText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0.19,
    },
    priceText: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 16,
        color: '#444444',
        letterSpacing: -0.21,
        fontWeight: 'bold'
    },
    timeText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#B0B0B0',
        letterSpacing: -0.19,
    },
    statusTextContainer: {
        width: 48,
        height: 18,
        marginLeft: 10,
        borderWidth: 1,
        borderColor: '#D0021B',
        borderRadius: 2,
        alignItems: 'center',
        justifyContent: 'center',
    },
    statusText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 10,
        color: '#D0021B',
        letterSpacing: -0.24,
        textAlign: 'center',
    },
});