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

import {createAction} from '../../utils';
import {connect} from 'react-redux';
import {Button, Provider} from '@ant-design/react-native';
import RefreshFlatList from 'react-native-refresh-flatlist';
import CallPhone from '../../components/CallPhone';
import CheckPrem from '../../components/CheckPrem';
import ComponentsStyles from '../../components/ComponentsStyles';

@connect(customer => ({...customer}))
@connect(auth => ({...auth}))
class ReportCustomerList extends Component {
    // 客户报备列表
    constructor(props) {
        super(props);
        this.state = {
            rows: 10,
            page: 1,
            report_status: this.props.navigation.state.params.report_status,
        };
    }

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

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

    _fetchData = (page) => {
        if (page) {
            this.state.page = page;
        }
        this.props.dispatch(createAction('customer/fetchReportCustomerData')(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('ReportCustomerDetail', {item})}>
                <View style={{flexDirection: 'row'}}>
                    {/*姓名 电话*/}
                    <View style={{flex: 1, justifyContent: 'flex-start', flexDirection: 'row'}}>
                        <Text style={ComponentsStyles.icon}>{'\ue660'} <Text style={ComponentsStyles.fontBold}>
                            {item.name}
                        </Text>
                        </Text>
                    </View>
                    <View style={{justifyContent: 'flex-end', flexDirection: 'row'}}>
                        <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>
                    <Text
                        style={[ComponentsStyles.font15, item.report_status === 1 ? {color: 'green'} : {color: 'red'}]}>
                        {item.report_status_text}</Text>
                </View>

                <View style={{flexDirection: 'row', flex: 1, paddingTop: 5}}>
                    <View style={ComponentsStyles.itemView}>
                        <Text style={ComponentsStyles.icon}>{'\ue6cc'}</Text>
                        <Text style={ComponentsStyles.font15}>{item.create_time_f}</Text>
                    </View>

                    <View style={{justifyContent: 'flex-end', flexDirection: 'row'}}>
                        <Text style={ComponentsStyles.icon}>{'\ue619'}</Text>
                        <Text style={ComponentsStyles.font15}>
                            {item.create_user_text}
                        </Text>
                    </View>
                </View>
            </TouchableOpacity>
        );
    };
    onAddPress = () => {
        const prem = CheckPrem(1, 'customer.add_report_customer');
        if (prem) {
            this.props.navigation.navigate('ReportCustomerAdd');
        }
    };

    render() {
        const {reportCustomerData, reportCustomerDataRState, total} = this.props.customer;
        return (
            <View style={{flex: 1}}>
                <Provider>
                    <StatusBar backgroundColor={'#fff'} barStyle='dark-content'/>
                    <RefreshFlatList
                        data={reportCustomerData}
                        renderItem={(item) => this._renderItem(item)}
                        keyExtractor={this._keyExtractor}
                        themeColor="#5eafe4"
                        refreshState={reportCustomerDataRState}
                        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>
                    {this.state.report_status !== 0 &&
                    <Button
                        type="primary"
                        onPress={() => this.onAddPress()}
                        style={ComponentsStyles.button}><Text
                        style={{color: '#fff'}}>报备客户</Text>
                    </Button>
                    }
                </Provider>
            </View>
        );
    }
}

export default ReportCustomerList;
