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

@connect(customer => ({...customer}))
class WriteTrackReport extends Component {
    //  填写跟踪报告
    constructor(props) {
        super(props);
        this.state = {
            item: this.props.navigation.state.params.item,
            next_time: '',
            instruction: '',
            description: '',
            is_giveup: 0,
            is_entry: 0,
        };
    };

    onSave = () => {
        if (!this.state.description) {
            Toast.info('请填写回访情况', 1);
            return;
        }

        if (!this.state.next_time) {
            Toast.info('请填写下次回访日期', 1);
            return;
        }

        const date = new Date();
        const today = FormateDate(date, 'YYYY-MM-DD');
        if (this.state.next_time < today) {
            Toast.info('下次回访日期不能早于今天', 1);
            return;
        }

        this.props.dispatch({
            type: 'customer/addReview',
            payload: this.state,
            callback: () => {
                // 返回，刷新潜客跟踪列表或潜客完善列表
                DeviceEventEmitter.emit('backRefesh');
                this.props.navigation.goBack();
            },
        });

    };

    render() {
        const {loading} = this.props.customer;
        return (
            <Provider>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <ScrollView>
                    <View style={styles.infoContent}>
                        <List>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{this.state.item.name}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>姓名</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{this.state.item.tel}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>电话</Text>
                            </List.Item>
                            <List.Item
                                extra={<Text style={ComponentsStyles.font15}>{this.state.item.project_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({description: text})}
                            value={this.state.description}
                            multiline={true}
                            numberOfLines={4}
                            maxLength={1000}
                            placeholder={'请填写回访情况'}
                        />
                        <TextInput
                            style={{
                                height: 140,
                                borderColor: '#eee',
                                textAlignVertical: 'top',
                                borderBottomWidth: 1,
                                paddingTop: 10,
                                paddingHorizontal: 10,
                            }}
                            onChangeText={text => this.setState({instruction: text})}
                            value={this.state.instruction}
                            multiline={true}
                            numberOfLines={4}
                            maxLength={1000}
                            placeholder={'支援或放弃'}
                        />
                        <View style={ComponentsStyles.genderStyle}>
                            <Text style={[ComponentsStyles.font15, {textAlignVertical: 'center'}]}>是否进店</Text>
                            <RadioModal
                                selectedValue={this.state.is_entry.toString()}
                                onValueChange={id => this.setState({is_entry: id})}
                                style={ComponentsStyles.radioStyle}
                                innerStyle={{
                                    width: 50,
                                }}
                            >
                                <Text value="1">是</Text>
                                <Text value="0">否</Text>
                            </RadioModal>
                        </View>
                        <View style={ComponentsStyles.genderStyle}>
                            <Text style={[ComponentsStyles.font15, {textAlignVertical: 'center'}]}>是否放弃</Text>
                            <RadioModal
                                selectedValue={this.state.is_giveup.toString()}
                                onValueChange={id => this.setState({is_giveup: id})}
                                style={ComponentsStyles.radioStyle}
                                innerStyle={{
                                    width: 50,
                                }}
                            >
                                <Text value="1">是</Text>
                                <Text value="0">否</Text>
                            </RadioModal>
                        </View>
                        <List.Item
                            extra={
                                <DatePicker
                                    placeholder="日期"
                                    customStyles={styles}
                                    date={this.state.next_time}
                                    mode="date"
                                    confirmBtnText="确定"
                                    cancelBtnText="取消"
                                    showIcon={true}
                                    onDateChange={(datetime) => this.setState({next_time: datetime})}
                                />
                            }
                        >
                            <Text style={ComponentsStyles.font15}>
                                下次回访日期
                            </Text>
                        </List.Item>
                    </View>
                </ScrollView>
                <Button
                    type="primary"
                    disabled={loading}
                    onPress={() => this.onSave()}
                    style={ComponentsStyles.button}
                >
                    <Text style={{color: '#fff'}}>提交跟踪报告</Text></Button>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    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 WriteTrackReport;