'use strict';

import React, {Component} from 'react';
import CheckBox from 'react-native-checkbox';

import {
    StyleSheet,
    View,
    Text,
    ListView,
    Image,
    Dimensions,
    TouchableHighlight,
    TextInput,
} from 'react-native';

export default class TransferShipmentCell extends Component {

    constructor(props) {
        super (props);
        this._onSubmitEditing = this._onSubmitEditing.bind(this);
        this._onChangeText = this._onChangeText.bind(this);
        this._onCheckBoxChanged = this._onCheckBoxChanged.bind(this);
        this.state = {
			hasChecked: false,
		};
    }

    _onSubmitEditing(event){
        let value = event.nativeEvent.text;
    }

    _onChangeText(text){
    }

    _onCheckBoxChanged(checked){
        this.setState({hasChecked : !checked});
    }

	render() {
        let checkedLable = 'SKU: 2541123   下单时间：2017-05-02'
		return (
            <View style={styles.container}>
                <View style={styles.titleBar}>
                    <CheckBox
                        label={checkedLable}
                        containerStyle={styles.checkboxStyle}
                        checkboxStyle={styles.checkboxIconStyle}
                        labelStyle={styles.labelStyle}
                        underlayColor={'transparent'}
                        checkedImage={require('../../images/tabbar/home.png')}
                        uncheckedImage={require('../../images/tabbar/message_normal.png')}
                        checked={this.state.hasChecked}
                        onChange={this._onCheckBoxChanged}
                    />
                    <View style={styles.tip}>
                    </View>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.cellText} numberOfLines={1}>商品条码：KT-2017156</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.cellText} numberOfLines={1}>规格：红色/L     单号：175023</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.cellText1} numberOfLines={1}>缺货数:1110</Text>
                    <Text style={styles.cellText2} numberOfLines={1}>收获数:1111</Text>
                    <Text style={styles.cellText3} numberOfLines={1}>已发数:1110</Text>
                    <Text style={styles.cellText4} numberOfLines={1}>当前需发数:5111</Text>
                </View>
                <View style={styles.textInputCell}>
                    <Text style={styles.cellText} numberOfLines={1}>发货:</Text>
                    <TextInput style={styles.inputText}
                        ref = 'textInput'
    					placeholder={'单行输入'}
    					onSubmitEditing={this._onSubmitEditing}
    					onChangeText={this._onChangeText}
    				/>
                </View>
                <View style={styles.place}/>
            </View>
		);
	}
}

let {width, height} = Dimensions.get('window');
const styles = StyleSheet.create({
    container: {
        width: width,
        height: 220,
        backgroundColor: 'white',
    },
    place: {
        width: width,
        height: 10,
        backgroundColor: 'white',
    },
    titleBar: {
        width: width,
        height: 40,
        backgroundColor: 'yellow',
        flexDirection: 'row',
        alignItems: 'center',
    },
    checkboxStyle: {
        width: width - 50,
        height: 40,
        backgroundColor: 'transparent',
    },
    checkboxIconStyle: {
        marginLeft : 10,
        marginTop: 6,
        width: 18,
        height: 18,
        backgroundColor: 'transparent',
    },
    labelStyle: {
        marginTop: 5,
        backgroundColor: 'transparent',
    },
    tip: {
        width: 40,
        height: 40,
        backgroundColor: 'red',
    },
    cell: {
        width: width,
        height: 40,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
    },
    cellText: {
        fontSize:15,
        marginLeft: 10,
        alignItems: 'center',
    },
    cellText1: {
        fontSize:15,
        marginLeft: 10,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    cellText2: {
        fontSize:15,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'red',
    },
    cellText3: {
        fontSize:15,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    cellText4: {
        fontSize:15,
        width: 3 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    textInputCell: {
        width: width,
        height: 50,
        flexDirection: 'row',
        alignItems: 'center',
    },
    inputText:{
        width: width - 80,
        height: 40,
        backgroundColor:'transparent',
        fontSize:15,
        marginLeft: 10,
        borderWidth: 1,
        borderColor: '#CCC',
        borderRadius: 4,
        marginTop: 5,
    },
});