'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>
                <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={styles.headerText}>全部订单</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={styles.headerText}>有效订单</Text>
                        </View>
                        {this.state.orderType !== 2 ? null :
                            <View style={{alignItems: 'center'}}>
                                <View style={styles.underLine}/>
                            </View>
                        }
                    </TouchableOpacity>
                    <TouchableOpacity style={{flex: 1}} activeOpacity={1} onPress={() => {
                        this.updateState(3, 0);
                        this.props.onPressTab && this.props.onPressTab(3, 0);
                    }}>
                        <View style={styles.headerContainer}>
                            <Text style={styles.headerText}>无效订单</Text>
                        </View>
                        {this.state.orderType !== 3 ? 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: 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>
                    </View>
                }
                <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.props.jumpWithUrl('订单详情', 'orderDetail', rowData.get('orderCode'));
                }}>
                    <View style={styles.rowView}>
                        <View style={{height: 70, paddingTop: 12, paddingBottom: 12}}>
                            <Text style={styles.numberText}>订单金额：{rowData.get('lastOrderAmountStr')}</Text>
                            <View style={{flexDirection: 'row', marginTop: 6}}>
                                <Text style={styles.timeText}>{rowData.get('orderTimeStr')}</Text>
                                {rowData.get('isNew') === 1 ? <Text style={styles.statusText}>新客订单</Text> : 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}
                    renderHeader={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: {
        width: width,
        height: 44,
        flexDirection: 'row',
    },
    headerText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0.19,
        fontWeight: 'bold',
        textAlign: 'center',
    },
    subHeader: {
        width: width,
        height: 44,
        paddingLeft: 64,
        paddingRight: 64,
        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,
    },
    statusText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 10,
        marginLeft: 10,
        paddingTop: 2,
        paddingLeft: 4,
        paddingRight: 4,
        paddingBottom: 2,
        color: '#D0021B',
        letterSpacing: -0.24,
        borderWidth: 1,
        borderColor: '#D0021B',
        borderRadius: 2,
        textAlign: 'center',
    },
});