'use strict';

import React, {Component} from 'react';
import CheckBox from 'react-native-checkbox';
import CONFIG from '../../constants/config';
import {format} from '../../utils/dateTool';

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

export default class TransferShipmentCell extends Component {

    constructor(props) {
        super (props);
        this._onChangeText = this._onChangeText.bind(this);
        this._onCheckBoxChanged = this._onCheckBoxChanged.bind(this);

        let {resource} = this.props;
        let data = resource?resource.toJS():null;

        this.state = {
			hasChecked: data.checked?data.checked:false,
		};
    }

    _onChangeText(text){
        let {resource} = this.props;
        let data = resource?resource.toJS():null;
        let sku = data?data.productSku:0;
        let lackNum = data.lackNum?data.lackNum:0;//缺货数
        let shipmentsNums = data.shipmentsNums?data.shipmentsNums:0;//发货数量
        let buyingNums = data.buyingNums?data.buyingNums:0;//外采数量 销售数
        let lastNum = buyingNums - lackNum - shipmentsNums;//实际应发数
        let num = text;

        if ((num | 0) === num || num > lastNum) {
            num = -1;
        }
        this.props.setPurchaseNum && this.props.setPurchaseNum(num,sku);
    }

    _onCheckBoxChanged(checked){
        this.setState({hasChecked : !checked});
        let {resource} = this.props;
        let data = resource?resource.toJS():null;
        let sku = data?data.productSku:0;

        this.props.checkUp && this.props.checkUp(!checked,sku);
    }

	render() {
        let {resource} = this.props;
        let data = resource?resource.toJS():null;
        if (!data) {
            return null;
        }
        let sku = data.productSku?data.productSku:0;//sku
        let createTimeStr=data.createTime?data.createTime:0;//下单时间
        let createTime= format(parseInt(createTimeStr))
        let isOvertime = data.isOvertime ? data.isOvertime : 'N';//是否超期
        let checkBoxLableColor = isOvertime=='Y' ? 'red' : 'black';

        let proRequisitionFormId = data.proRequisitionFormId?data.proRequisitionFormId:0;//单号
        let factoryGoodsName = data.factoryGoodsName?data.factoryGoodsName:0;//厂家颜色
        let sizeName = data.sizeName?data.sizeName:0;//尺码名
        let skuFactoryCode = data.skuFactoryCode?data.skuFactoryCode:0;//商品条码
        let lackNum = data.lackNum?data.lackNum:0;//缺货数
        let shipmentsNums = data.shipmentsNums?data.shipmentsNums:0;//发货数量
        let num = data.num?data.num:0;//输入发货

        let inStoreNum = data.inStoreNum?data.inStoreNum:0;//入库数量 收货数量
        let buyingNums = data.buyingNums?data.buyingNums:0;//外采数量 销售数
        let lastNum = buyingNums - lackNum - shipmentsNums;//实际应发数
        let checkedLable = 'SKU: ' + sku + '   ' + '下单时间：' + createTime;
        let lackNumTextColor = lackNum > 0 ? 'red' : 'black';
        let textInputColor = num >= 0 ? 'transparent' : 'red';

		return (
            <View style={styles.container}>
                <View style={styles.titleBar}>
                    <CheckBox
                        label={checkedLable}
                        labelLines={2}
                        containerStyle={styles.checkboxStyle}
                        checkboxStyle={styles.checkboxIconStyle}
                        labelStyle={{
                            marginTop: 5,
                            fontSize: fontSize,
                            backgroundColor: 'transparent',
                            width: width - 30,
                            color: checkBoxLableColor,
                        }}
                        underlayColor={'transparent'}
                        checkedImage={require('../../images/fahuo/select_icon_20_h.png')}
                        uncheckedImage={require('../../images/fahuo/select_icon_20_n.png')}
                        checked={this.state.hasChecked}
                        onChange={this._onCheckBoxChanged}
                    />
                    <TouchableOpacity onPress={() => {
                        this.props.goToStatsPage && this.props.goToStatsPage(CONFIG.statsKey.outOfStock,resource);
                    }}>
                        <View style={styles.tip}>
                            <Image style={styles.tip} source={require('../../images/fahuo/ring_tip_ic.png')} resizeMode={'contain'} />
                        </View>
					</TouchableOpacity>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.cellText} numberOfLines={1}>商品条码：{skuFactoryCode}</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.cellText} numberOfLines={1}>规格：{factoryGoodsName}/{sizeName}     单号：{proRequisitionFormId}</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={{
                                fontSize:fontSize,
                                marginLeft: 10,
                                width: 2 * Math.ceil((width-10)/9),
                                textAlign: 'left',
                                color: lackNumTextColor,
                            }}
                          numberOfLines={1}>
                          缺货数:{lackNum}
                    </Text>
                    <Text style={styles.cellText2} numberOfLines={1}>收获数:{inStoreNum}</Text>
                    <Text style={styles.cellText3} numberOfLines={1}>已发数:{shipmentsNums}</Text>
                    <Text style={styles.cellText4} numberOfLines={1}>当前需发数:{lastNum}</Text>
                </View>
                <View style={styles.textInputCell}>
                    <Text style={styles.cellText} numberOfLines={1}>
                        发货:
                    </Text>
                    <TextInput style={{
                            width: width - 80,
                            height: 40,
                            fontSize:fontSize,
                            marginLeft: 10,
                            borderWidth: 1,
                            borderColor: '#CCC',
                            borderRadius: 4,
                            marginTop: 5,
                            color: 'black',
                            paddingLeft:10,
                            backgroundColor: textInputColor,
                        }}
                        ref = 'textInput'
    					placeholder={'单行输入'}
                        keyboardType={'numeric'}
    					onChangeText={this._onChangeText}
    				/>
                </View>
                <View style={styles.place}/>
            </View>
		);
	}
}

let {width, height} = Dimensions.get('window');
let fontSize = width<375 ? 12 : 14;

const styles = StyleSheet.create({
    container: {
        width: width,
        height: 220,
        backgroundColor: 'white',
    },
    place: {
        width: width,
        height: 10,
        backgroundColor: 'white',
    },
    titleBar: {
        width: width,
        height: 40,
        backgroundColor: 'rgb(254,220,220)',
        flexDirection: 'row',
        alignItems: 'center',
    },
    checkboxStyle: {
        width: width - 50,
        height: 40,
        backgroundColor: 'transparent',
    },
    checkboxIconStyle: {
        marginLeft : 10,
        marginTop: 6,
        width: 18,
        height: 18,
        backgroundColor: 'transparent',
    },
    tip: {
        width: 30,
        height: 30,
        backgroundColor: 'transparent',
    },
    cell: {
        width: width,
        height: 40,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
    },
    cellText: {
        fontSize:fontSize,
        marginLeft: 10,
        alignItems: 'center',
    },
    cellText1: {
        fontSize:fontSize,
        marginLeft: 10,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    cellText2: {
        fontSize:fontSize,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    cellText3: {
        fontSize:fontSize,
        width: 2 * Math.ceil((width-10)/9),
    	textAlign: 'left',
        color: 'black',
    },
    cellText4: {
        fontSize:fontSize,
        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:fontSize,
        marginLeft: 10,
        borderWidth: 1,
        borderColor: '#CCC',
        borderRadius: 4,
        marginTop: 5,
    },
});