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

@connect(customer => ({...customer}))
class ReportCustomerDetail extends Component {
    //  报备客户详情
    constructor(props) {
        super(props);
    };

    onSignRepeat = (item) => {
        Modal.alert('提醒', '确定要标记为撞单客户吗?', [
            {
                text: '取消',
                style: 'cancel',
            },
            {
                text: '确定',
                onPress: () => this.props.dispatch({
                    type: 'customer/signRepeat',
                    payload: {id: item.id},
                    callback: () => {
                        DeviceEventEmitter.emit('backRefesh');
                        this.props.navigation.goBack();
                    },
                }),
            },
        ]);
    };

    render() {
        const item = this.props.navigation.state.params.item;
        return (
            <View style={{flex: 1, backgroundColor: '#fff'}}>
                <Provider>
                    <ScrollView style={{marginBottom: 5}}>
                        <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                        <List>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.name}</Text>} arrow="empty">
                                <Text style={ComponentsStyles.font15}>姓名</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.gender_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>性别</Text>
                            </List.Item>
                            <View style={ComponentsStyles.telItemView}>
                                <Text style={ComponentsStyles.telName}>电话</Text>
                                <View style={ComponentsStyles.telView}>
                                    <Text style={[ComponentsStyles.icon, {marginLeft: 8}]}>{'\ue61a'}</Text>
                                    <Text style={ComponentsStyles.telText}
                                          onPress={() => CallPhone(item.tel, 1)}>
                                        {item.tel}
                                    </Text>
                                </View>
                            </View>

                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.village}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>小区</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.address}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>地址</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.source_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>来源</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.project_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>项目</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.report_status_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备状态</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.create_time_f}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备时间</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.create_user_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>报备人</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.check_time_f}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>审核时间</Text>
                            </List.Item>
                            <List.Item extra={<Text style={ComponentsStyles.font15}>{item.check_user_text}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>审核人</Text>
                            </List.Item>

                            <List.Item extra={<Text style={ComponentsStyles.IDText}>{item.notes}</Text>}
                                       arrow="empty">
                                <Text style={ComponentsStyles.font15}>备注</Text>
                            </List.Item>
                        </List>
                    </ScrollView>
                    {item.report_status === 0 &&
                    <View style={{flexDirection: 'row', justifyContent: 'center', backgroundColor: '#fff'}}>
                        <Button
                            type="primary"
                            onPress={() => this.props.navigation.navigate('WriteTrackReport',
                                {
                                    customer_id: this.state.getParm.touch_id,
                                    backKey: this.props.navigation.state.key,
                                })}
                            style={{width: '45%', margin: 5}}
                        >
                            <Text
                                style={{color: '#fff'}}>分配</Text></Button>
                        <Button
                            type="warning"
                            onPress={() => this.onSignRepeat(item)}
                            style={{width: '45%', margin: 5}}
                        >
                            <Text
                                style={{color: '#fff'}}>标记撞单</Text></Button>

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

export default ReportCustomerDetail;