import React, {Component} from 'react';
import {
    View,
    Text,
    Image,
    StyleSheet,
} from 'react-native'

export default class SPHeaderCell extends Component {
    constructor(props) {
        super(props);
    }

    renderName() {
        if (this.props.data.owner) {
            return(
                <Text style={styles.nameLabel}>
                    {this.props.data.name + '  |  '}
                    <Text style={styles.ownerColor}>楼主</Text>
                </Text>
            );
        } else {
            return(
                <Text style={styles.nameLabel}>this.props.data.name</Text>
            );
        }
    }

    renderDelete() {
        if (this.props.data.owner) {
            return(
                <Text style={[styles.nameLabel, styles.ownerColor, styles.deletePosition]}>
                    删除本帖
                </Text>
            );
        }
    }
    render() {
        return(
            <View style={styles.container}>
                <Image
                    style={styles.avatar}
                    source={{uri:this.props.data.avatar}}
                />
                <Text style={styles.timeLabel}>{this.props.data.time}</Text>
                {this.renderName()}
                {this.renderDelete()}
                <Text style={styles.fromLabel}>{this.props.data.templete}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        flexDirection: 'row',
    },

    avatar: {
        top: 15,
        left: 15,
        width: 30,
        height: 30,
        borderRadius: 15,
        backgroundColor: 'grey',
    },

    //来自哪个模块
    fromLabel: {
        top:15,
        right:15,
        height: 20,
        backgroundColor: '#aaaaaa',
        fontSize: 15,
        textAlign: 'center'
    },

    nameLabel: {
        top: 15,
        marginLeft: 15,
        height: 20,
        fontSize: 12,
        color: 'black',
        backgroundColor: 'red',
        textAlign: 'left',
        bottom: 10,
    },

    ownerColor: {
        color: '#4a90e2',
    },

    deletePosition: {
        left: 0,
        top: 60,
    },

    timeLabel: {
        top: 32,
        height: 12,
        left: 15,
        fontSize: 10,
        color: '#999999',

    },
});