import React, {Component} from 'react';
import {
    View,
    Text,
    StatusBar,
    DeviceEventEmitter,
    StyleSheet,
} from 'react-native';
import {Provider, Toast, Button, List, Picker} from '@ant-design/react-native';
import {connect} from 'react-redux';
import {ComponentsStyles} from '../../components/ComponentsStyles';

@connect(customer => ({...customer}))
class DispatchProcess extends Component {
    //  分配
    constructor(props) {
        super(props);
        this.state = {
            customer: this.props.navigation.state.params.customer,
            order: this.props.navigation.state.params.order,
            now_process_text: '',
            next_process: '',

            PROCESS: [],
            USERS: [],
            service: '',
        };
    };

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {

        this.props.dispatch({
            type: 'customer/fetchProcessDict',
            payload: {customer_id: this.state.customer},
            callback: (data) => {
                let PROCESS = [];
                data.map((item, index) => {
                    PROCESS.push({
                        value: item.value, label: item.label,
                    });
                });
                this.setState({PROCESS});
            },
        });


        this.props.dispatch({
            type: 'customer/getUser',
            callback: (data) => {
                let USERS = [];
                data.map((item, index) => {
                    USERS.push({
                        value: item.value, label: item.lable,
                    });
                });
                this.setState({USERS});
            },
        });
        this.props.dispatch({
            type: 'customer/getProcess',
            payload: {customer_id: this.state.customer},
            callback: (data) => {
                if (data.error_message) {
                    Toast.info(data.error_message, 2, () => {
                        this.props.navigation.goBack();
                    });
                    return;
                }
                this.setState({
                    now_process_text: data.now_process_text,
                    next_process: [data.next_process_id],
                });

            },
        });
    };
    onSave = () => {
        if (!this.state.next_process.length) {
            Toast.info('请下一进度', 1);
            return;
        }
        if (!this.state.service.length) {
            Toast.info('请选择人员', 1);
            return;
        }
        this.props.dispatch({
            type: 'customer/dispatchService',
            payload: this.state,
            callback: () => {
                Toast.info('分配成功', 1, () => {
                    DeviceEventEmitter.emit('refeshProcess');
                    DeviceEventEmitter.emit('backRefesh');
                    this.props.navigation.goBack();
                });
            },
        });
    };

    render() {
        const {loading} = this.props.customer;
        return (
            <Provider>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <View style={styles.infoContent}>
                    <List>
                        <List.Item
                            extra={<Text style={ComponentsStyles.font15}>{this.state.now_process_text}</Text>}
                            arrow="empty">
                            <Text style={ComponentsStyles.font16}>当前进度</Text>
                        </List.Item>
                        <Picker
                            data={this.state.PROCESS}
                            cols={1}
                            value={this.state.next_process}
                            onChange={(val) => this.setState({next_process: val})}
                        >
                            <List.Item arrow="horizontal">
                                下一进度
                            </List.Item>
                        </Picker>
                        <Picker
                            data={this.state.USERS}
                            cols={1}
                            value={this.state.service}
                            onChange={(val) => this.setState({service: val})}
                        >
                            <List.Item arrow="horizontal">
                                服务人员
                            </List.Item>
                        </Picker>
                    </List>
                </View>

                <Button
                    type="primary"
                    disabled={loading}
                    onPress={() => this.onSave()}
                    style={ComponentsStyles.button}
                >
                    <Text style={{color: '#fff'}}>提交</Text></Button>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    paperBody: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        // borderBottomWidth: 10,
        // borderBottomColor: '#eee',
        paddingLeft: 5,
    },
    paperBodyItem: {
        alignItems: 'center',
        margin: 2,
        padding: 5,
    },
    dateInput: {
        borderWidth: 0,
        alignItems: 'flex-end',
    },
    infoContent: {
        flex: 1,
        marginTop: 5,
        backgroundColor: '#fff',
    },
    infoItem: {
        flexDirection: 'row',
        paddingVertical: 10,
        borderBottomWidth: 1,
        borderColor: '#eaeaea',
        justifyContent: 'space-between',
    },
    infoItemLeft: {color: '#000', fontSize: 19},
    infoItemRight: {fontSize: 15, paddingTop: 2},
    modelItem: {
        borderBottomWidth: 1,
        borderColor: '#eaeaea',
        textAlign: 'center',
        paddingVertical: 8,
        fontSize: 18,
        color: '#000',
    },
});
export default DispatchProcess;