'use strict';

import React from 'react-native';

let {
    Component,
    View,
    Text,
    ListView,
    TouchableHighlight,
    Dimensions,
    StyleSheet,
    Platform,
    TouchableOpacity
} = React;

export default class Meassage extends Component {

    static propTypes = {
        items: React.PropTypes.arrayOf(
            React.PropTypes.shape({
                type:React.PropTypes.string,
                title: React.PropTypes.string,
                time: React.PropTypes.string,
                content: React.PropTypes.string,
            })
        ),
        onPressItem: React.PropTypes.func,
    };

    constructor(props) {
        super(props);
        this.renderItem = this.renderItem.bind(this);
        this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    }
    
    renderName(item) {
        if (item.type!=='1') {
            return (
                <Text style={{color:'#B0B0B0',fontSize: 10,marginLeft:8, }}>尊敬的用户:</Text>
            );
        } else {
            return null;
        }
    }

    renderItem(item, sectionID, rowID) {
        return (
            <TouchableOpacity activeOpacity={0.5} onPress={() => this.props.onPressItem(rowID)}>
                <View style={styles.row}>
                    <View style={styles.row_top}>
                        <Text style={styles.title}>{item.title}</Text>
                        <Text style={styles.time}>{item.time}</Text>
                    </View>
                    <View style={styles.line}/>
                    {this.renderName(item)}
                    <Text style={styles.subtitle} numberOfLines={1}>{item.content}</Text>
                    <Text style={styles.text_detail}>查看详情</Text>
                </View>
            </TouchableOpacity>
        );
    }

	render() {
        return (
            <View style={styles.listContainer}>
                <ListView style={styles.list}
                    dataSource={this.ds.cloneWithRows(this.props.items)}
                    renderRow={this.renderItem}
                    renderSeparator={(sectionID, rowID) => <View key={`${sectionID}-${rowID}`} style={styles.separator}/>}
                />
            </View>
        );

    }

    nextPage(){
        
    }
}

let {height, width} = Dimensions.get('window');
const styles = StyleSheet.create({

    listContainer:{
        flex: 1,
        alignItems: 'center',
    },

    list:{
        flex: 1,
    },

    row: {
        flexDirection: 'column',
        height: 100,
        width: width,
        backgroundColor: '#F5FCFF',
    },
    row_top: {
        flexDirection: 'row',
        height: 40,
        width: width,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    title: {
        flex: 1,
        color: '#444444',
        fontSize: 14,
        marginLeft: 10,
    },
    time: {
        width: 60,
        color: '#B0B0B0',
        fontSize: 10,

    },
    subtitle: {
        fontSize: 10,
        marginLeft:8, 
        color: '#B0B0B0',
    },
    text_detail: {
        fontSize: 10,
        alignSelf: 'flex-end',
        marginRight:10, 
        color: '#B0B0B0', 
       
    },
    listView: {
        marginTop: 120,

    },
    line: {
        height: 1,
        backgroundColor: '#B0B0B0',
        marginLeft:8,
        marginBottom:8,
     },
    separator: {
        height: 8,
    },
});