import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
} from 'react-native';
import {Provider, Button, List} from '@ant-design/react-native';

import {connect} from 'react-redux';
import CallPhone from '../../components/CallPhone';
import ComponentsStyles from '../../components/ComponentsStyles';

@connect(customer => ({...customer}))
class CheckCustomerDetail extends Component {
    //  潜客跟踪
    constructor(props) {
        super(props);
        this.state = {
            page: 1,
            rows: 10,
            id: this.props.navigation.state.params.id,
        };

    };

    componentDidMount() {
        this._fetchData();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/fetchCustomerReviewDetail',
            payload: {id: this.state.id},
        });
    };

    baseInfo = (reviewDetailData) => {
        return <View style={{marginTop: 5}}>
            <List style={styles.listStyle}>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.name}</Text>} arrow="empty">
                    <Text style={ComponentsStyles.font15}>姓名</Text>
                </List.Item>
                <View style={styles.telItemView}>
                    <Text style={ComponentsStyles.font15}>电话</Text>
                    <View style={styles.telView}>
                        <Text style={ComponentsStyles.icon}>{'\ue61a'}</Text>
                        <Text
                            style={styles.telText}
                            onPress={() => CallPhone(reviewDetailData.tel, 1)}>
                            {reviewDetailData.tel}
                        </Text>
                    </View>
                </View>

                <List.Item extra={<Text style={ComponentsStyles.IDText}>{reviewDetailData.address}</Text>}
                           wrap
                           multipleLine arrow="empty">
                    <Text style={ComponentsStyles.font15}>地址</Text>
                </List.Item>

                <List.Item extra={<Text style={ComponentsStyles.IDText}>{reviewDetailData.village}</Text>}
                           wrap
                           multipleLine arrow="empty">
                    <Text style={ComponentsStyles.font15}>小区</Text>
                </List.Item>

                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.project_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>项目</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.stage_progress_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>阶段进度</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.description}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>回访情况</Text>
                </List.Item>

                <View style={styles.descView}>
                    <Text style={ComponentsStyles.font15}>回访情况</Text>
                    <Text style={[ComponentsStyles.font15, styles.descText]}>{reviewDetailData.description}</Text>
                </View>
                <View
                    style={styles.descView}>
                    <Text style={ComponentsStyles.font15}>支援或放弃</Text>
                    <Text style={[ComponentsStyles.font15, styles.descText]}>{reviewDetailData.instruction}</Text>
                </View>

                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.is_giveup_text}</Text>}
                           arrow='empty'>
                    <Text style={ComponentsStyles.font15}>是否放弃</Text>
                </List.Item>

                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.check_status_text}</Text>}
                           arrow='empty'>
                    <Text style={ComponentsStyles.font15}>审核状态</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.create_user_text}</Text>}
                           arrow='empty'>
                    <Text style={ComponentsStyles.font15}>跟踪人员</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.create_time_f}</Text>}
                           arrow='empty'>
                    <Text style={ComponentsStyles.font15}>跟踪时间</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{reviewDetailData.next_time_f}</Text>}
                           arrow='empty'>
                    <Text style={ComponentsStyles.font15}>下次跟踪</Text>
                </List.Item>

            </List>
        </View>;
    };

    render() {
        const {customerReviewDetail} = this.props.customer;

        return (
            <Provider>
                <ScrollView>
                    {this.baseInfo(customerReviewDetail)}
                </ScrollView>
                <Button
                    type="primary"
                    onPress={() => this.props.navigation.navigate('CheckCustomer',
                        {
                            item: customerReviewDetail,
                        })}
                    style={ComponentsStyles.button}
                >
                    <Text
                        style={{color: '#fff'}}>审核</Text>
                </Button>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    modalText: {
        color: '#333',
        fontSize: 16,
        textAlign: 'center',
        textAlignVertical: 'center',
    },
    textInput: {
        width: '80%',
        textAlign: 'left',
        paddingHorizontal: 10,
    },
    modalContainer: {
        flexDirection: 'row',
        paddingHorizontal: 10,
        paddingLeft: 13,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    textStyle: {
        fontSize: 16,
        paddingVertical: 10,
    },
    telItemView: {
        flex: 1,
        flexDirection: 'row',
        marginLeft: 15,
        paddingRight: 18,
        paddingVertical: 8,
        borderBottomWidth: 0.5,
        borderBottomColor: '#eaeaea',
    },
    telName: {
        color: '#333',
        fontSize: 18,
    },
    telView: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    telText: {
        color: '#2b90ea',
        fontSize: 15,
    },
    listStyle: {
        borderBottomWidth: 10,
        borderBottomColor: '#f6f7f8',
    },
    reportMain: {
        marginTop: 5,
        // marginBottom: 5,
        backgroundColor: '#fff',
        paddingHorizontal: 10,
        // borderWidth:1,
    },
    customerText: {
        color: '#333',
        fontSize: 16,
    },
    row5: {
        flexDirection: 'row',
        paddingVertical: 5,
    },
    red5: {
        fontSize: 15,
        color: 'red',
        padding: 2,
    },
    descView: {
        marginHorizontal: 15,
        paddingVertical: 2,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    descText: {
        color: '#928f8f',
        paddingVertical: 2,
    },
});

export default CheckCustomerDetail;