customer / shanghai-railway-rnapp

import React, {Component} from "react";
import {FlatList, DeviceEventEmitter,Image, Keyboard,StyleSheet, Alert,Text, TouchableOpacity, View,ActivityIndicator} from "react-native";
import {width, zoomH, zoomW} from "../../utils/getSize";
import CYInput from "../../widget/CYInput";
import {xnToast} from "../../utils/utils";
import AppService from "../../service/AppService";
// import ForumHeader from "../../widget/ForumHeader";

const defaultIcon = require("../../img/defaultIcon.png");
const  pageSize = 20;

export default class RelateMerchants extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            queryCount: 0,
            isInvite: false,
            keyword :"",
            loadMore :false,
            isFirstIn:true,//是否是第一次进页面，解决刚进页面会回调flatList的onEndReached 方法
        };
    }

    static navigationOptions = ({ navigation, screenProps }) => ({
        headerTitle: "关联商家",
        headerLeft: (
            <View style={{ flexDirection: "row", flex: 1 }}>
                <TouchableOpacity
                    style={{
                        flexDirection: "column",
                        justifyContent: "center",
                        paddingRight: 15,
                        paddingLeft: 10
                    }}
                    onPress={
                        navigation.state.params ? navigation.state.params.back : null
                    }
                >
                    <Image
                        source={require("../../img/loadBack.png")}
                        resizeMode="contain"
                    />
                </TouchableOpacity>
            </View>
        ),
        headerRight: (
            <View style={{ flexDirection: "row", flex: 1, justifyContent: "center" }}>
                <TouchableOpacity
                    style={{
                        flexDirection: "column",
                        justifyContent: "center",
                        paddingRight: 15,
                        paddingLeft: 10
                    }}
                >
                    <Image
                        style={{ width: 20 / zoomW, height: 20 / zoomW }}
                        resizeMode="contain"
                    />
                </TouchableOpacity>
            </View>
        )
    });

    // 调用接口数据
    componentWillMount() {
        this.getList("");
    }

    componentDidMount() {
        //设置头部
        this.props.navigation.setParams({
            back: () => {
                this.props.navigation.goBack();
            }
        });
    }

    // 获取商家
    getList(key) {
        if (!global.isConnected) {
            xnToast("暂无网络连接，请稍后重试");
            return;
        }
        Keyboard.dismiss();
        let length =  this.state.data.length;
        if (length % pageSize == 0 && !this.state.loadMore) {
            this.setState({
                loading:true,
                loadMore: true,
                // isFirstIn :!this.state.isFirstIn,
            });
            let params = {
                tenantId: global.config.tenantId,
                pageNumber:length/pageSize+1,
                pageSize : pageSize,
                name :key,
            };
            AppService.findSupplier(params)
                .then(data => {
                    this.setState({
                        loading:false,
                        loadMore: false,
                    })
                    console.log('------findSupplier-----',params,data);
                    if (data.message) {
                        xnToast(data.message);
                        return;
                    }
                    if (data.errors.length > 0) {
                        xnToast(data.errors[0].message);
                    } else {
                        if (length + data.result.length > data.totalCount) {
                            return;
                        }
                        this.setState({
                            data:this.state.data.concat(data.result),
                        })
                    }
                })
                .catch(error => {
                    this.setState({
                        loading:false,
                        loadMore: false,
                    })
                    xnToast(error);
                });

        }

    }


    // 伙伴申请绑定上级商户
    bindSupplier(item) {
        if (!global.isConnected) {
            xnToast("暂无网络连接，请稍后重试");
            return;
        }
        let _this = this;

        this.setState({
            loading:true
        })
        let name = !!item.customName? item.customName:item.name||"";
        let params = {
            fangliaoId : global.userId,//申请的伙伴(芳疗师)的id
            fangliaoName : global.userName,//申请成为伙伴(芳疗师)的名称
            supplierId : item.id,//绑定的上级供应商的id
            supplierName :name,//绑定的上级供应商的名称;
        };

        AppService.bindSupplier(params)
            .then(data => {
                this.setState({
                    loading:false
                })
                console.log('------bindSupplier-----',params,data);
                if (data.message) {
                    xnToast(data.message);
                    return;
                }
                if (data.errors.length > 0) {
                    xnToast(data.errors[0].message);
                } else {
                    _this.props.navigation.goBack();
                    DeviceEventEmitter.emit('refreshSpamasterInfo');
                    //申请成功
                    if (_this.props.navigation.state.params.from == 'disagreed'){
                        DeviceEventEmitter.emit('refreshApproving',name);
                    }else {
                        _this.props.navigation.navigate("ApplyResult", { id:'', "isApproving":true
                        });
                    }

                }
            })
            .catch(error => {
                this.setState({
                    loading:false
                })
                xnToast(error);
            });
    }




    applyAlert(item){
        let _this = this;
        let name = !!item.customName? item.customName:item.name||"";
        Alert.alert(
            '提醒',
            '确认申请"'+name+'"商家的认证？',
            [
                {text: '确定', onPress: function(){
                    _this.bindSupplier(item);
                }},
                {text: '取消', onPress: function(){
                }}
            ]
        )
    }
    //渲染item
    keyExtractor = (item, index) => index;
    renderItem({ item, index }) {
        return (
            <View style = {styles.itemView}>
                <Text style = {{color:'rgba(0,0,0,0.85)',fontSize:16,flex:1}}>{item.name||""}</Text>
                <TouchableOpacity activeOpacity={0.8}
                                  onPress={()=>{this.applyAlert(item)}}>
                    <Text style = {{fontSize:14,color:global.homeColor}}>申请关联</Text>
                </TouchableOpacity>
            </View>
        );
    }

    renderHeaderView() {
        let _this = this;
        return (
            <View style={styles.headerViewStyle}>
                <CYInput
                    style={styles.inputStyle}
                    ref={c => (this.input = c)}
                    placeholder={"搜索"}
                    returnKeyType={"search"}
                    placeholderTextColor={"#999999"}
                    onFocus={() => {
                        this.setState({
                            data: []
                        });
                    }}
                    onSubmitEditing={event => {
                        if (_this.state.queryCount == 0) {
                            _this.getList(event.nativeEvent.text);
                        }
                    }}

                    onTextEmpty={() => {
                        this.setState({
                            data: []
                        },function () {
                            this.getList("");
                        });
                    }}
                    onButtonClick={() => {
                        //根据需要自己控制
                        this.input.clearInputValue();
                        this.setState({
                            data: []
                        },function () {
                            this.getList("");
                        });
                    }}
                />

                <TouchableOpacity style = {{marginLeft:15/zoomW,marginRight:15/zoomW}}
                                  onPress = {()=>{_this.getList(this.input.getInputValue());}}>
                    <Text>搜索</Text>
                </TouchableOpacity>
            </View>
        );
    }

    renderSeparatorView(){
        return(
            <View style = {{width:'100%',height :StyleSheet.hairlineWidth,backgroundColor:'#eee'}}></View>
        )
    }
    render() {
        let _this = this;
        return (
            <View style={styles.background}>
                {/*<ForumHeader title={"关联商家"} pop navigation={this.props.navigation}/>*/}
                {this.renderHeaderView()}

                <FlatList
                    style={{ flex: 1, display: "flex" }}
                    refreshing={false}
                    onEndReachedThreshold={0.01}
                    onEndReached={() => {
                        if (_this.state.isFirstIn){
                            _this.setState({
                                isFirstIn:false
                            })
                        }else {
                            _this.getList(_this.input.getInputValue());
                        }

                    }}
                    keyExtractor={this.keyExtractor}
                    data={this.state.data}
                    renderItem={this.renderItem.bind(this)}
                    ItemSeparatorComponent = {this.renderSeparatorView.bind(this)}
                    showsVerticalScrollIndicator={false}
                />

                {/*局部loading*/}
                {this.state.loading && (
                    <View style={styles.loadingBg}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size="large" color="#fff" />
                            <Text
                                style={{ fontSize: 16, color: "#fff", marginTop: 6 / zoomH }}
                            >
                                加载中...
                            </Text>
                        </View>
                    </View>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    background: {
        flex: 1,
        display:'flex',
        backgroundColor: "#f3f5f6"
    },
    headerViewStyle: {
        width:'100%',
        flexDirection: "row",
        height: width * 0.14,
        alignItems: "center",
        justifyContent: "space-between",
    },
    inputStyle: {
        fontSize: 14,
        color: "rgba(0,0,0,0.85)",
        flex:1,
        height: width * 0.1,
        backgroundColor: "#fff",
        paddingLeft: 30,
        paddingTop: 0,
        borderRadius: 4,
        marginTop: 6,
        marginBottom: 6,
        marginLeft: 15,
        paddingBottom:0,
    },
    itemBackground: {
        backgroundColor: "#FFf",
        padding: 15 / zoomH,
        flexDirection: "row",
        alignItems: "center"
    },
    headerPhotoViewStyle: {
        width: 35 / zoomH,
        height: 31 / zoomH
    },
    headerPhotoStyle: {
        width: 44 / zoomH,
        height: 44 / zoomH
    },
    topSearchView: {
        flex: 1,
        width: "100%",
        height: 40 / zoomH,
        backgroundColor: "#FFFFFF",
        borderRadius: 2,
        marginLeft: 15 / zoomW,
        marginRight: 15 / zoomW
    },
    tabStyle: {
        height: 34 / zoomH,
        backgroundColor: "#fff",
        elevation: 0,
        borderWidth: StyleSheet.hairlineWidth
    },
    itemView:{flexDirection:'row',
        justifyContent:'space-between',
        width:'100%',
        backgroundColor:'#fff',
        paddingTop:12/zoomH,
        paddingBottom:12/zoomH,
        paddingLeft:15/zoomW,
        paddingRight:15/zoomW
    },
    forwardingBg: {
        borderWidth: 1,
        borderColor: "#eeeeee"
    },
    itemTextViewStyle: {
        flexDirection: "column",
        marginTop:18,
        marginLeft: 15,
        justifyContent: "center"
    },
    itemTextNameStyle: {
        fontSize: 16,
        color: "#000",
        opacity: 0.85,
        fontWeight: "bold"
    },
    itemTextContentStyle: {
        marginTop:5,
        fontSize: 12,
        color: "#000",
        opacity: 0.65
    },
    inviteBtnViewStyle: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "flex-end"
    },
    inviteBtnStyle: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        borderRadius: 2,
        backgroundColor: "white"
    },
    invitedBtnStyle: {
        paddingLeft: 15,
        paddingRight: 15,
        paddingTop: 5,
        paddingBottom: 5,
        borderRadius: 2,
        backgroundColor: "#fff",
        borderColor: "#999999",
        borderWidth: 1
    },
    inviteBtnTextStyle: {
        color: "#333333",
        fontSize: 14
    },
    invitedBtnTextStyle: {
        color: "#000",
        fontSize: 14,
        opacity: 0.25
    },
    loadingBg: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
    },
});