'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 AddressCell extends Component {

    constructor(props) {
        super(props);

    }

    render() {
        let {name, mobile, address} = this.props.data;
        console.log(this.props.data);
        console.log(this.props.channel);
        let lineSource = require('../../image/boy_xie.png');
        console.log('lalalalalal');
        console.log(this.props.channel);
        if (this.props.channel == 1) {
            lineSource = require('../../image/boy_xie.png');
        } else if (this.props.channel == 2) {
            lineSource = require('../../image/girl_xie.png');
        } else if (this.props.channel == 3) {
            lineSource = require('../../image/kids_xie.png');
        } else if (this.props.channel == 4) {
            lineSource = require('../../image/lifestlye_xie.png');
        }

        return (
            <View style={[styles.container]}>
                <View style={styles.topPart}>
                    <View style={styles.leftPart}>
                        <Image style={{
                            width: 22,
                            height: 22
                        }} source={require('../../image/icon_dizhi.png')}/>
                    </View>
                    <View style={styles.rightPart}>
                        <Text style={styles.name}>{name}</Text>
                        <Text style={styles.address}>{address}</Text>
                        <Text style={styles.mobile}>{mobile}</Text>
                    </View>
                </View>
                <Image style={styles.bottomLineImage} source={lineSource}/>
            </View>
        );
    }
}

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

let styles = StyleSheet.create({
    container: {
        width: width,
        flexDirection: 'column',
        backgroundColor: 'white',
        borderColor: '#f0f0f0',
        borderBottomWidth: 10
    },

    topPart: {
        width: width,
        flexDirection: 'row',
        alignItems: 'center'
    },

    leftPart: {
        width: 45,
        justifyContent: 'center',
        alignItems: 'center'
    },

    rightPart: {
        width: width - 45,
        flexDirection: 'column'
    },

    bottomLineImage: {
        width: width,
        height: 5
    },

    name: {
        fontSize: 17,
        marginTop: 13,
        marginBottom: 0,
        color: '#444444'
    },

    address: {
        fontSize: 14,
        marginTop: 13,
        marginBottom: 13,
        color: '#444444',
        lineHeight: 20
    },

    mobile: {
        position: 'absolute',
        top: 13,
        left: 150,
        width: width - 45 - 15 - 150,
        textAlign: 'right',
        fontSize: 14,
        color: '#444444'
    }
});