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

@connect(customer => ({...customer}))
class UpdateProcess extends Component {
    //  填写跟踪报告
    constructor(props) {
        super(props);
        this.state = {
            customer: this.props.navigation.state.params.customer,
            notes: '',
            now_process_text: '',
            next_process_text: '',
            next_process_id: '',
            file: [],
        };
    };

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/getProcess',
            payload: {customer: 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_text: data.next_process_text,
                    next_process_id: data.next_process_id,
                });
            },
        });
    };
    onSave = () => {
        if (!this.state.file.length) {
            Toast.info('请选择图片', 1);
            return;
        }
        this.props.dispatch({
            type: 'customer/addOrder',
            payload: this.state,
            callback: () => {
                // 返回，刷新潜客跟踪列表或潜客完善列表
                DeviceEventEmitter.emit('backRefesh');
                this.props.navigation.goBack();
            },
        });

    };
    _delPhoto = (fileName) => {
        let files = [];
        const {file} = this.state;
        for (let i in file) {
            if (file[i].fileName !== fileName) {
                files.push(file[i]);
            }
        }

        this.setState({file: files});
    };
    onImgUpload = (file) => {
        this.setState({
            file,
        });
    };

    render() {
        const {loading} = this.props.customer;
        return (
            <Provider>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <ScrollView style={{backgroundColor: '#fff'}}>
                    <View style={styles.infoContent}>
                        <List>
                            <List.Item
                                extra={<Text style={ComponentsStyles.font15}>{this.state.now_process_text}</Text>}
                                arrow="empty">
                                <Text style={ComponentsStyles.font15}>当前进度</Text>
                            </List.Item>
                            <List.Item
                                extra={<Text style={ComponentsStyles.font15}>{this.state.next_process_text}</Text>}
                                arrow="empty">
                                <Text style={ComponentsStyles.font15}>下一进度</Text>
                            </List.Item>

                        </List>
                        <TextInput
                            style={{
                                height: 140,
                                borderColor: '#eee',
                                textAlignVertical: 'top',
                                borderBottomWidth: 1,
                                paddingTop: 10,
                                paddingHorizontal: 10,
                            }}
                            onChangeText={text => this.setState({notes: text})}
                            value={this.state.notes}
                            multiline={true}
                            numberOfLines={4}
                            maxLength={1000}
                            placeholder={'请填备注'}
                        />

                    </View>
                    <View style={styles.paperBody}>
                        {this.state.file.map((item, index) => (
                            <View key={index} style={styles.paperBodyItem}>
                                <ImageBackground
                                    source={item.img_id ? {uri: item.uri} : {uri: item.uri}}
                                    style={{width: 60, height: 60}}
                                >
                                    <View style={{flex: 1}}>
                                        <View style={{
                                            borderRadius: 4,
                                            padding: 3,
                                            flexDirection: 'row',
                                            justifyContent: 'flex-end',
                                        }}>
                                            <TouchableOpacity onPress={() => this._delPhoto(item.fileName)}
                                                              style={{
                                                                  borderRadius: 20,
                                                                  backgroundColor: '#b6b6b6',
                                                              }}>
                                                <Text style={{fontFamily: 'iconfont'}}>{'\ue606'}</Text>
                                            </TouchableOpacity>
                                        </View>
                                    </View>
                                </ImageBackground>
                            </View>
                        ))
                        }
                        <MultiCameraButton
                            photos={this.state.file}
                            onFileUpload={this.onImgUpload}
                            maxFiles={6}
                        >
                            <Image
                                source={require('../../../assets/images/add.png')}
                                style={{width: 60, height: 60}}
                            />
                        </MultiCameraButton>
                    </View>
                </ScrollView>
                <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: {
        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 UpdateProcess;