'use strict';

import React, {Component} from 'react';
import Immutable, {Map} from 'immutable';

import ReactNative, {
    View,
    Text,
    Image,
    ListView,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    InteractionManager,
    Platform
} from 'react-native';

export default class OrderHistoryCell extends Component {

    constructor(props) {
        super(props);
        this.renderCell = this.renderCell.bind(this);
    }
    renderCell(item, index) {
        let {
            historyList,
        } = this.props.data;
        let ary = historyList.toJS();

        //解析数据
        let {
            node,
            node_color,
            node_time,
        } = item;
        node_color = '#' +node_color;
        //构建颜色
        let topLineColor = 'white';
        if (index) {
            let preIndex = index - 1;
            let preItem = ary[preIndex];
            topLineColor = preItem.node_time.length? '#444444' : '#b0b0b0';
        }
        let bottomLineColor = '#b0b0b0';
        if (index == ary.length - 1) {
            bottomLineColor = 'white';
        } else if (node_time.length) {
            bottomLineColor = '#444444';
        }
        let ballColor = '#444444';
        if (node_color == '#b0b0b0') {
            ballColor = node_color;
        }

        //构建视图样式
        let topLineStyle = {
            position: 'absolute',
            left: 36,
            top: 0,
            width: 1,
            height: 25,
            backgroundColor: topLineColor,
        };
        let bottomLineStyle = {
            position: 'absolute',
            left: 36,
            top: 25,
            width: 1,
            height: 25,
            backgroundColor: bottomLineColor,
        };
        let ballStyle = {
            position: 'absolute',
            left: 32,
            top: 20.5,
            width: 9,
            height: 9,
            borderRadius: 4.5,
            backgroundColor: ballColor,
        };
        let cellContainer = {
            width: width,
            height: 50,
            flexDirection: 'row',
            alignItems: 'center',
        };
        let cellRight = {
            position: 'absolute',
            top: 0,
            left: 59,
            width: width - 59,
            height: 50,
            flexDirection: 'row',
            borderColor: '#ededed',
            borderBottomWidth: index == ary.length -1 ? 0 : 0.5,
            alignItems: 'center',
            justifyContent: 'space-between',
            paddingRight: 15,
        };
        let rightText = {
            fontSize: 11,
            color: node_color,
            fontFamily: 'STHeitiSC-Light',
        };
        let leftText = {
            fontSize: 11,
            color: '#b0b0b0',
            fontFamily: 'STHeitiSC-Light',
        };
        return (
            <View style={cellContainer} key={index}>
                <View style={topLineStyle}/>
                <View style={bottomLineStyle}/>
                <View style={ballStyle}/>
                <View style={cellRight}>
                    <Text style={rightText}>{node}</Text>
                    <Text style={leftText}>{node_time}</Text>
                </View>
            </View>
        )
    }
    render() {
        let {
            orderCode,
            orderStatus,
            tailPayPhone,
            historyList,
        } = this.props.data;
        let ary = historyList.toJS();
        return (
            <View style={styles.container}>
                <View style={styles.topContainer}>
                    <View style={styles.topLeft}>
                        <Image style={{
                            width: 22,
                            height: 22
                        }} source={require('../../image/icon_dingdan.png')}/>
                    </View>
                    <View style={styles.topRight}>
                        <Text style={styles.codeText}>订单编号：{orderCode}</Text>
                        <Text style={styles.codeText}>{orderStatus}</Text>
                    </View>
                </View>
                {
                    ary.map((item, index) => {
                        return this.renderCell(item, index);
                    })
                }
                <View style={styles.bottomContainer}>
                    <Text style={styles.codeText}>尾款通知号码：{tailPayPhone}</Text>
                </View>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'column',
        backgroundColor: 'white',
        borderColor: '#f0f0f0',
        borderBottomWidth: 10
    },
    topContainer: {
        width: width,
        height: 44,
        borderColor: '#ededed',
        borderBottomWidth: 0.5,
        flexDirection: 'row',
        alignItems: 'center',
    },
    topLeft: {
        width: 45,
        justifyContent: 'center',
        alignItems: 'center',
    },
    topRight: {
        width: width - 45 - 15,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    codeText: {
        fontSize: 14,
        color: '#444444',
        fontFamily: 'STHeitiSC-Light',
    },
    bottomContainer: {
        width: width,
        height: 44,
        borderColor: '#ededed',
        borderTopWidth: 0.5,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 15,
    }
});