'use strict';

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


export default class OrderDetail 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),
        });
    }

    _renderHeader() {
        let status = this.props.orderDetail.status === '10' ? '（待确认）' : '';
        return (
            <View>
                <View style={styles.header}>
                    <Text style={[styles.headerText]}>{this.props.orderDetail.orderStatus}</Text>
                </View>
                <View style={styles.lineView}/>
                <View style={styles.content}>
                    <Text style={styles.contentText}>订单编号：{this.props.orderDetail.orderCode}</Text>
                    <Text style={styles.contentText}>下单时间：{this.props.orderDetail.orderTimeStr}</Text>
                    <Text style={styles.contentText}>商品金额：{this.props.orderDetail.lastOrderAmountStr}</Text>
                    <View style={{flexDirection: 'row'}}>
                        <Text style={styles.contentText}>佣金金额：</Text>
                        <Text style={[styles.contentText, {fontWeight: 'bold', color: '#D0021B'}]}>{this.props.orderDetail.amountStr}</Text>
                        <Text style={styles.contentText}>{status}</Text>
                    </View>
                </View>
                <View style={{height: 10, backgroundColor: '#f0f0f0'}}/>
            </View>
        )
    }

    _renderRow(rowData, sectionID, rowID) {
        let url = rowData.get('image');
        return (
            <TouchableOpacity activeOpacity={1} onPress={() => {
                this.props.onPressProduct && this.props.onPressProduct(rowData);
            }}>
                <View style={styles.rowView}>
                    <Image style={styles.picImage} source={{uri: url}} resizeMode={'contain'}/>
                    <Text style={styles.titleText}>{rowData.get('productName')}</Text>
                    <View style={styles.rightView}>
                        <Text style={styles.priceText}>{rowData.get('priceStr')}</Text>
                        <Text style={styles.numText}>x {rowData.get('num')}</Text>
                    </View>
                </View>
                <View style={[styles.lineView, {marginLeft: 15}]}/>
            </TouchableOpacity>
        );
    }

    render() {
        let {orderDetail} = this.props;
        let productList = orderDetail.productList ? orderDetail.productList.toArray() : [];
        return (
            <View style={styles.container}>
                <ListView
                    ref={(c) => {
                        this.listView = c;
                    }}
                    // yh_viewVisible={true}
                    contentContainerStyle={styles.contentContainer}
                    enableEmptySections={true}
                    dataSource={this.dataSource.cloneWithRows(productList)}
                    renderRow={this._renderRow}
                    renderHeader={this._renderHeader}/>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        alignItems: 'center'
    },
    contentContainer: {
        width: width,
        backgroundColor: 'white'
    },
    header: {
        width: width,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    content: {
        width: width,
        height: 140,
        padding: 15,
        backgroundColor: '#FFFFFF',
    },
    headerText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 17,
        paddingLeft: 15,
        color: '#444444',
        letterSpacing: -0,
        fontWeight: 'bold',
    },
    contentText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        paddingBottom: 10,
        color: '#444444',
        letterSpacing: -0,
    },
    rowView: {
        width: width,
        height: 86,
        flexDirection: 'row',
        padding: 10,
    },
    picImage: {
        width: 50,
        height: 66,
        marginLeft: 5,
    },
    titleText: {
        flex:1,
        marginLeft: 10,
        fontSize: 14,
        color: '#444444',
        letterSpacing: -0,
        lineHeight: 18,
        fontFamily: 'PingFang-SC-Regular',
    },
    priceText: {
        fontFamily: 'PingFang-SC-Regular',
        fontSize: 14,
        color: '#D0021B',
        textAlign: 'right',
        letterSpacing: -0.4,
    },
    numText: {
        marginTop: 5,
        fontSize: 12,
        color: '#B0B0B0',
        letterSpacing: -0.34,
        textAlign: 'right',
        fontFamily: 'PingFang-SC-Medium',
    },
    lineView: {
        width: width,
        height: 0.5,
        backgroundColor: '#e0e0e0'
    },
    rightView: {
        width: 95,
    }
});