import React, {Component} from 'react';
import {
    View,
    TouchableOpacity, Text, StyleSheet, DeviceEventEmitter,
} from 'react-native';

import {createAction} from '../../utils';
import {connect} from 'react-redux';
import RefreshFlatList from 'react-native-refresh-flatlist';
import CallPhone from '../../components/CallPhone';
import ComponentsStyles from '../../components/ComponentsStyles';

@connect(customer => ({...customer}))
class ReviewTodayList extends Component {
    // 今日待跟踪、逾期未跟踪、潜客管理
    constructor(props) {
        super(props);
        this.state = {
            rows: 10,
            page: 1,
            status: this.props.navigation.state.params.status, //默认查询正常客户
        };
    }

    componentDidMount() {
        this._fetchData();
        this.refesh = DeviceEventEmitter.addListener('backRefesh', (param) => {
            this.props.dispatch(createAction('auth/fetchTipsCount')());
            this._fetchData(1);
        });
    }

    componentWillUnmount() {
        this.refesh.remove();
    }

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

    _fetchMore = () => {
        const {page, total} = this.props.customer;
        if (page * this.state.rows >= total) {
            return;
        }
        const currentPage = page + 1;
        this._fetchData(currentPage);
    };
    _keyExtractor = (item, index) => {
        return index.toString();
    };

    _renderItem = (data) => {
        const item = data.item;
        return (
            <TouchableOpacity style={ComponentsStyles.mainTouch}
                              onPress={() => this.props.navigation.navigate('ReviewDetail', {
                                  id: item.id,
                              })}>
                <View style={{flexDirection: 'row'}}>
                    <View style={ComponentsStyles.itemView}>
                        <Text style={ComponentsStyles.icon}>{'\ue660'} </Text>
                        <Text style={ComponentsStyles.fontBold}>{item.name}</Text>
                    </View>
                    <View style={ComponentsStyles.itemViewEnd}>
                        <Text style={ComponentsStyles.icon}>{'\ue61a'}</Text>
                        <Text
                            onPress={() => CallPhone(item.tel, 1)}
                            style={{
                                fontSize: 15,
                                color: '#2b90ea',
                            }}>
                            {item.tel}
                        </Text>
                    </View>
                </View>
                <View style={{flexDirection: 'row', paddingTop: 5}}>
                    <View style={ComponentsStyles.itemView}>
                        <Text style={ComponentsStyles.icon}>{'\ue6ed'} <Text
                            style={ComponentsStyles.font15}>{item.project_text}</Text>
                        </Text>
                    </View>
                    <View style={ComponentsStyles.itemViewEnd}>
                        <Text style={ComponentsStyles.icon}>{'\ue65c'}</Text>
                        <Text style={ComponentsStyles.font15}>{item.village}</Text>
                    </View>
                </View>
                <View style={{
                    flex: 1,
                    flexDirection: 'row',
                    marginTop: 5,
                }}>
                    <View style={ComponentsStyles.itemView}>
                        <Text style={ComponentsStyles.icon}>{'\ue619'}</Text>
                        <Text style={ComponentsStyles.font15}>{item.track_user_text}</Text>
                    </View>
                    <View style={ComponentsStyles.itemViewEnd}>
                        <Text style={ComponentsStyles.icon}>{'\ue6cc'}</Text>
                        <Text style={ComponentsStyles.font15}>{item.end_time_f}</Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    };

    render() {
        const {reviewTodayData, reviewTodayRState, total} = this.props.customer;

        return (
            <View style={{marginBottom: 10, flex: 1}}>
                <RefreshFlatList
                    data={reviewTodayData}
                    renderItem={(item) => this._renderItem(item)}
                    keyExtractor={this._keyExtractor}
                    themeColor="#5eafe4"
                    refreshState={reviewTodayRState}
                    footerRefreshingText="正在加载"
                    footerFailureText="加载失败"
                    onHeaderRefresh={() => this._fetchData(1)}
                    onFooterRefresh={() => this._fetchMore()}
                />
                <View style={ComponentsStyles.bottomTotal}>
                    <Text style={ComponentsStyles.totalText}>合计数量：<Text
                        style={{color: '#333333'}}>{total}</Text></Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    selectedMenus: {
        padding: 5,
        backgroundColor: '#ffffff',
        flexDirection: 'row',
    },
    menuItem: {
        textAlign: 'center',
        marginHorizontal: 5,
        borderRadius: 20,
        paddingVertical: 5,
        paddingHorizontal: 8,
        backgroundColor: '#f5f5f9',
    },
    selectedMenuItem: {
        backgroundColor: '#2b90ea',
        color: '#ffffff',
        marginHorizontal: 5,
        borderRadius: 20,
        paddingVertical: 5,
        paddingHorizontal: 8,
    },
});
export default ReviewTodayList;
