import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Alert,
    ScrollView,
    TextInput,
    TouchableOpacity
} from 'react-native';

import {WhiteSpace, List, SwipeAction, InputItem, Modal, Provider, Toast} from '@ant-design/react-native';

import {createAction} from "../../utils";
import {connect} from 'react-redux'
import {Button} from "../../components";

let productItems = []
let productDatas = []

@connect(home => ({...home}))
class DeliverHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            notes: '',
            distributor: '',
            distributor_name: '',
            type: this.props.navigation.state.params.type,
            productDatas: [],
            no: '',
            total: 0,
        };
    }

    componentDidMount() {
        // this._fetchData()
    }

    componentWillUnmount() {
        productItems = []
        productDatas = []
    }

    _delete = (product_id, no) => {
        for (let i in productDatas) {
            if (productDatas[i].product_id == product_id && productDatas[i].no == no) {
                this.state.total -= parseInt(productDatas[i].count)
                productDatas.splice(i, 1)
                productItems.splice(i, 1)
            }
        }
        this.setState({
            total: this.state.total,
        })
    }
    _addProduct = (data) => {
        const start_no_show = data.no.toUpperCase()
        const start_no = start_no_show.slice(data.cross_code.length,)
        const start_no_len = start_no.length

        let end_no = parseInt(start_no) + parseInt(data.count) - 1
        const end_no_len = end_no.toString().length
        //终止窜货号前面补零
        let zero = ''
        for (let i = 0; i < start_no_len - end_no_len; i++) {
            zero += '0';
        }
        end_no = data.cross_code + zero + end_no.toString()
        // 防止重复扫描
        for (let i in productDatas) {
            if (productDatas[i].product_id == data.product_id && productDatas[i].no == data.no) {
                this.state.total -= parseInt(productDatas[i].count)
                productDatas.splice(i, 1)
                productItems.splice(i, 1)
            }
        }
        productDatas.push(
            {product_id: data.product_id, return_count: data.count, count: data.count, start_num: start_no, no: data.no}
        )
        const count = this.state.total + parseInt(data.count)
        this.setState({total: count, no: ''})
        const right = [
            {
                text: '删除',
                onPress: () => this._delete(data.product_id, data.no),
                style: {backgroundColor: '#ff3d27', color: 'white'},
            },
        ];
        productItems.push(
            <View key={data.product_id} style={styles.cellContainer}>
                <SwipeAction
                    autoClose
                    style={{backgroundColor: 'transparent'}}
                    right={right}
                >
                    <TouchableOpacity onPress={() => this.props.navigation.navigate("DeliverAdd", {
                        data: data,
                        callback: this._addProduct
                    })}>
                        <View style={styles.rowPadding3}>
                            <View style={styles.left}>
                                <Text style={styles.blackText}>{data.name}</Text>
                            </View>
                            <Text style={styles.blackText}>数量：{data.count}</Text>
                        </View>
                        <View style={styles.rowPadding3}>
                            <View style={styles.left}>
                                <Text style={styles.blackText}>起始:{start_no_show}</Text>
                            </View>
                            <Text style={styles.blackText}>终止:{end_no}</Text>
                        </View>
                    </TouchableOpacity>
                </SwipeAction>
            </View>
        )

    }
    _onSave = () => {
        const type = this.props.navigation.state.params.type
        if (this.state.distributor == '') {
            Alert.alert('提示', "请选择经销商!");
            return
        }
        if (productDatas.length == 0) {
            Alert.alert('提示', "请添加产品!");
            return
        }
        const save_data = {
            "distributor": this.state.distributor,
            "notes": this.state.notes,
            "details": JSON.stringify(productDatas),
            "save_type": 'code',
        }
        if (type == 'Deliver') {
            this.props.dispatch({
                type: 'home/deliverSave',
                payload: save_data,
                callback: (data) => {
                    if(data.msg){
                        Alert.alert('提示', data.msg);
                    }
                    this.props.navigation.goBack();
                },
            });
        } else {
            this.props.dispatch({
                type: 'home/returnSave',
                payload: save_data,
                callback: (data) => {
                    if(data.msg){
                        Alert.alert('提示', data.msg);
                    }
                    this.props.navigation.goBack();
                },
            });
        }
    }
    _searchNo = (value) => {
        this.setState({no: value})
        if (value) {
            this.props.dispatch({
                type: 'home/fetchProductData',
                payload: {
                    cross_code: value,
                },
                callback: (data) => {
                    const item = {
                        no: value,
                        count: '1',
                        name: data.name,
                        cross_code: data.cross_code,
                        product_id: data.id,
                    }
                    this._addProduct(item)
                    // this.setState({no: ''})
                    // Toast.info('扫码成功',1)
                }
            })
        }
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <Provider>
                    <ScrollView style={{flex: 1}}>
                        <WhiteSpace/>
                        <List>
                            <List.Item extra={this.state.distributor_name} arrow="horizontal"
                                       multipleLine={true} wrap={true}
                                       onPress={() => this.props.navigation.navigate('SearchDistributor',
                                           {
                                               callback: (data) => this.setState({
                                                   distributor_name: data.name,
                                                   distributor: data.id
                                               })
                                           }
                                       )}><Text style={styles.redText}>经销商</Text></List.Item>

                            <InputItem
                                clear
                                placeholder="请输入"
                                value={this.state.notes}
                                onChange={value => {
                                    this.setState({
                                        notes: value,
                                    });
                                }}
                            ><Text style={{fontSize: 17, color: '#333'}}>备注</Text></InputItem>
                        </List>
                        <View style={{borderTopWidth: 5, borderTopColor: '#eee'}}>
                            <TextInput placeholder="请输入防窜货号" style={styles.input}
                                       value={this.state.no}
                                       autoFocus={true}
                                       onChangeText={value => this._searchNo(value)}></TextInput>
                        </View>
                        {productItems}
                    </ScrollView>
                </Provider>
                <View style={{
                    backgroundColor: '#eee', height: 20, justifyContent: 'flex-end',
                    flexDirection: 'row', paddingRight: 10
                }}>
                    <Text style={{fontSize: 14, textAlignVertical: 'center'}}>总数量：{this.state.total}</Text></View>
                <View style={{flexDirection: 'row', height: 40}}>
                    <Button onPress={() =>
                        this.props.navigation.navigate("DeliverAdd", {
                            callback: this._addProduct
                        })
                    }
                            textStyle={{color: 'white'}} style={{
                        flex: 1,
                        borderRadius: 0,
                        borderWidth: 0,
                        backgroundColor: '#0099FF',
                        color: '#fff'
                    }} title='批量添加'/>
                    <Button onPress={() => Alert.alert(
                        '提示',
                        '确定要保存吗？',
                        [
                            {text: '确定', onPress: () => this._onSave()},
                            {text: '取消'},
                        ]
                    )} textStyle={{color: 'white'}} style={{
                        flex: 1,
                        borderRadius: 0,
                        borderWidth: 0,
                        backgroundColor: '#7DBEFF',
                        color: '#fff'
                    }} title='保存'/>

                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    input: {
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
        marginBottom: 15
    },
    redText: {
        color: 'red',
        fontSize: 15,
    },
    cellContainer: {
        paddingVertical: 5,
        paddingHorizontal: 5,
        borderBottomWidth: 1,
        borderColor: '#eee',
        marginHorizontal: 5,
        overflow: 'hidden'

    },
    rowPadding3: {
        flexDirection: 'row',
        padding: 3,
    },
    left: {
        flex: 3,
        flexDirection: 'row',
    },
    blackText: {
        color: '#333',
        fontSize: 14,
    },
})

export default DeliverHome;