import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    TouchableOpacity,
    Dimensions, DeviceEventEmitter,
} from 'react-native';
import {Tabs, Provider, Button, List} from '@ant-design/react-native';
import {createAction} from '../../utils';
import {connect} from 'react-redux';
import CallPhone from '../../components/CallPhone';
import ComponentsStyles from '../../components/ComponentsStyles';
import RefreshFlatList from 'react-native-refresh-flatlist';

const tabs = [
    {title: '基本信息', id: 1},
    {title: '进度明细', id: 2},
];
const {width} = Dimensions.get('window');

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

    componentDidMount() {
        this._fetchProcessReoprt();
        this._fetchData();
        this.refeshProcess = DeviceEventEmitter.addListener('refeshProcess', (param) => {
            this._fetchProcessReoprt(1);
        });
        this.refeshProcessDetail = DeviceEventEmitter.addListener('refeshProcessDetail', (param) => {
            this._fetchData();
        });
    }

    componentWillUnmount() {
        this.refeshProcess.remove();
        this.refeshProcessDetail.remove();
    }

    _fetchData = () => {
        this.props.dispatch({
            type: 'customer/fetchProcessDetail',
            payload: {id: this.state.order_id},
        });
    };
    _fetchMore = () => {
        const {page, totalRecord} = this.props.customer;
        if (page * this.state.rows >= totalRecord) {
            return;
        }
        const currentPage = page + 1;
        this._fetchProcessReoprt(currentPage);
    };

    _keyExtractor = (item, index) => {
        return index.toString();
    };

    _fetchProcessReoprt = (page) => {
        if (page) {
            this.state.page = page;
        }
        this.props.dispatch(createAction('customer/fetchProcessRecord')(this.state));
    };

    baseInfo = (ProcessDetailData) => {
        return <View style={{marginTop: 5}}>
            <List>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.name}</Text>} arrow="empty">
                    <Text style={ComponentsStyles.font15}>单号</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.no}</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(ProcessDetailData.tel, 1)}>
                            {ProcessDetailData.tel}
                        </Text>
                    </View>
                </View>

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

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

                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.project_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>项目</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.status_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>订单状态</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.stage_progress_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>阶段进度</Text>
                </List.Item>

                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.service_user_text}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>当前服务人员</Text>
                </List.Item>
                <List.Item extra={<Text style={ComponentsStyles.font15}>{ProcessDetailData.create_time_f}</Text>}
                           arrow="empty">
                    <Text style={ComponentsStyles.font15}>下单时间</Text>
                </List.Item>
            </List>
        </View>;
    };

    gotoImage = (id, has_img) => {
        if (has_img) {
            this.props.navigation.navigate('BrowseImage',
                {
                    id: id,
                },
            );
        }
    };

    renderItem = (data) => {
        const item = data.item;
        return <TouchableOpacity
            activeOpacity={0.9}
            onPress={() => this.gotoImage(item.id, item.has_img)}
            style={styles.reportMain}>
            <View style={styles.row5}>
                <View style={ComponentsStyles.itemView}>
                    <Text style={ComponentsStyles.icon}>{'\ue619'} <Text
                        style={ComponentsStyles.font15}>{item.user_text}</Text>
                    </Text>
                </View>
                <View style={ComponentsStyles.itemViewEnd}>
                    <Text style={ComponentsStyles.icon}>{'\ue6cc'}</Text>
                    <Text style={ComponentsStyles.font15}>{item.operation_time_f}</Text>
                </View>
            </View>
            <View style={styles.row5}>
                <View style={ComponentsStyles.itemView}>
                    <Text style={ComponentsStyles.icon}>{'\ue6ed'} </Text>
                    <Text style={ComponentsStyles.font15}>{item.operation}</Text>
                </View>
                {item.has_img &&
                <View style={ComponentsStyles.itemViewEnd}>
                    <Text style={ComponentsStyles.icon}>{'\ue61b'}</Text>
                </View>
                }
            </View>

            <View style={styles.row5}>
                <Text style={ComponentsStyles.icon}>{'\ue605'} </Text>
                <Text style={[ComponentsStyles.font15, {width: '95%'}]}>{item.notes}</Text>
            </View>
        </TouchableOpacity>;
    };

    render() {
        const {processRecordData, processRecordRState, processDetail} = this.props.customer;

        return (
            <Provider>
                <Tabs
                    tabs={tabs}
                    initialPage={0}
                    tabBarPosition="top"
                    styles={{
                        topTabBarSplitLine: {
                            borderBottomWidth: 0,
                        },
                    }}
                    tabBarUnderlineStyle={{
                        backgroundColor: '#03C762',
                        width: 40,
                        marginLeft: (width / 2 - 38) / 2,
                        height: 3,
                        borderRadius: 2,
                    }}
                    tabBarActiveTextColor="#000"
                >
                    {/*基本信息*/}
                    <ScrollView>
                        {this.baseInfo(processDetail)}
                    </ScrollView>
                    {/*    跟踪记录*/}
                    <View>
                        <RefreshFlatList
                            data={processRecordData}
                            renderItem={(item) => this.renderItem(item)}
                            keyExtractor={this._keyExtractor}
                            themeColor="#5eafe4"
                            refreshState={processRecordRState}
                            footerRefreshingText="正在加载"
                            footerFailureText="加载失败"
                            onHeaderRefresh={() => this._fetchProcessReoprt(1)}
                            onFooterRefresh={() => this._fetchMore()}
                            ListHeaderComponent={() => <View style={{height: 0}}/>}
                            ItemSeparatorComponent={() => <View style={{height: 0}}/>}
                        />
                    </View>
                </Tabs>
                {this.state.source === 1 ?
                    <Button
                        type="primary"
                        onPress={() => this.props.navigation.navigate('UpdateProcess',
                            {
                                customer: processDetail.customer,
                            })}
                        style={ComponentsStyles.button}
                    >
                        <Text
                            style={{color: '#fff'}}>更新进度</Text>
                    </Button>
                    :
                    <Button
                        type="primary"
                        onPress={() => this.props.navigation.navigate('DispatchProcess',
                            {
                                customer: processDetail.customer,
                                order: processDetail.id,
                            })}
                        style={ComponentsStyles.button}
                    >
                        <Text
                            style={{color: '#fff'}}>分配</Text>
                    </Button>
                }
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    descView: {
        marginHorizontal: 15,
        paddingVertical: 2,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    descText: {
        color: '#928f8f',
        paddingVertical: 2,
    },
    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,
        backgroundColor: '#fff',
        paddingHorizontal: 10,
        // borderWidth:1,
    },
    customerText: {
        color: '#333',
        fontSize: 16,
    },
    row5: {
        flexDirection: 'row',
        paddingVertical: 3,
    },
    red5: {
        fontSize: 15,
        color: 'red',
        padding: 2,
    },
});

export default ProcessDetail;