import React, {Component} from 'react';
import {
    View,
    Text, StyleSheet, ScrollView, StatusBar, DeviceEventEmitter, KeyboardAvoidingView, Platform,
} from 'react-native';

import {connect} from 'react-redux';
import {
    Provider,
    Button,
    Toast,
    List,
    Picker,
    InputItem,
} from '@ant-design/react-native';
import RadioModal from '../../components/RadioModal';
import ComponentsStyles from '../../components/ComponentsStyles';
import CheckValid from '../../components/CheckValid';

@connect(customer => ({...customer}))
class ReportCustomerAdd extends Component {
    // 报备客户
    constructor(props) {
        super(props);
        this.state = {
            name: '',
            tel: '',
            gender: 2,
            village: '',
            address: '',
            source: '',
            project: [],
            notes: '',

            project_text: '请选择',
            CUSTOMER_SOURCE: [],
        };
    }

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/fetchReportDict',
            callback: (data) => {
                let CUSTOMER_SOURCE = [];
                data.source.map((item, index) => {
                    CUSTOMER_SOURCE.push({
                        value: item.id, label: item.name,
                    });
                });
                this.setState({CUSTOMER_SOURCE});
            },
        });
    };

    onSave = () => {
        if (!this.state.name) {
            Toast.info('请填写姓名', 1);
            return;
        }
        if (!this.state.tel) {
            Toast.info('请填写手机号', 1);
            return;
        }
        if (!CheckValid(this.state.tel, 'tel')) {
            Toast.info('请填写正确的手机号', 1);
            return;
        }
        if (!this.state.village) {
            Toast.info('请填写小区', 1);
            return;
        }
        if (!this.state.address) {
            Toast.info('请填写地址', 1);
            return;
        }
        if (!this.state.source.length) {
            Toast.info('请选择来源', 1);
            return;
        }
        if (!this.state.project.length) {
            Toast.info('请选择项目', 1);
            return;
        }

        this.props.dispatch({
            type: 'customer/saveReportCustomer',
            payload: this.state,
            callback: () => {
                DeviceEventEmitter.emit('backRefesh');
                this.props.navigation.goBack();
            },
        });
    };
    onProjectPress = () => {
        this.props.navigation.navigate('SearchProject', {
            callback: this.setProject,
            checked_ids:this.state.project,
            checked_names:this.state.project_text,
        });
    };
    setProject = (ids, name) => {
        this.setState({project_text: name, project: ids});
    };

    render() {
        const {loading} = this.props.customer;
        const isIOS = Platform.OS === 'ios' ? true : false;
        return (
            <KeyboardAvoidingView behavior={'padding'} enabled={isIOS} style={{backgroundColor: '#fff', flex: 1}}>
                <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                <Provider>
                    <ScrollView keyboardShouldPersistTaps={'handled'}>
                        <List style={styles.listStyle}>
                            <InputItem
                                clear
                                value={this.state.name}
                                onChange={value => {
                                    this.setState({
                                        name: value,
                                    });
                                }}
                                placeholder="请输入客户姓名"
                            >
                                <Text style={ComponentsStyles.requiredText}>姓名</Text>
                            </InputItem>

                            <View style={ComponentsStyles.genderStyle}>
                                <Text style={[ComponentsStyles.requiredText, {textAlignVertical: 'center'}]}>性别</Text>
                                <RadioModal
                                    selectedValue={this.state.gender.toString()}
                                    onValueChange={id => this.setState({type: id})}
                                    style={ComponentsStyles.radioStyle}
                                    innerStyle={{
                                        width: 50,
                                    }}
                                >
                                    <Text value="1">女</Text>
                                    <Text value="2">男</Text>
                                </RadioModal>
                            </View>

                            <InputItem
                                clear
                                type={'number'}
                                value={this.state.tel}
                                onChange={value => {
                                    this.setState({
                                        tel: value,
                                    });
                                }}
                                placeholder="请输入电话"
                            >
                                <Text style={ComponentsStyles.requiredText}>电话</Text>
                            </InputItem>

                            <InputItem
                                clear
                                value={this.state.village}
                                onChange={value => {
                                    this.setState({
                                        village: value,
                                    });
                                }}
                                placeholder="请输入小区"
                            >
                                <Text style={ComponentsStyles.requiredText}>小区</Text>
                            </InputItem>

                            <InputItem
                                clear
                                value={this.state.address}
                                onChange={value => {
                                    this.setState({
                                        address: value,
                                    });
                                }}
                                placeholder="请输入地址"
                            >
                                <Text style={ComponentsStyles.requiredText}>地址</Text>
                            </InputItem>

                            <Picker
                                data={this.state.CUSTOMER_SOURCE}
                                cols={1}
                                value={this.state.source}
                                onChange={text => {
                                    this.setState({
                                        source: text,
                                    });
                                }}
                            >
                                <List.Item arrow="horizontal">
                                    <Text style={ComponentsStyles.requiredText}>来源</Text>
                                </List.Item>
                            </Picker>
                            <List.Item
                                arrow="horizontal"
                                extra={
                                    <Text
                                        style={{fontSize: 17, width: 200, textAlign: 'right'}}
                                        onPress={() => this.onProjectPress()}>
                                        {this.state.project_text}
                                    </Text>}
                            >
                                <Text style={ComponentsStyles.requiredText}>项目</Text>
                            </List.Item>

                            <InputItem
                                clear
                                value={this.state.notes}
                                onChange={value => {
                                    this.setState({
                                        notes: value,
                                    });
                                }}
                                placeholder="请输入备注"
                            >
                                <Text style={ComponentsStyles.font15}>备注</Text>
                            </InputItem>
                        </List>
                    </ScrollView>
                    <Button
                        onPress={this.onSave}
                        type="primary"
                        loading={loading}
                        disabled={loading}
                        style={ComponentsStyles.button}>保存</Button>
                </Provider>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    listStyle: {
        marginTop: 5,
    },
    dateInput: {
        borderWidth: 0,
        alignItems: 'flex-end',
    },
});
export default ReportCustomerAdd;