xntalk / xntalk-rnapp

/**
 * Created by DEV005 on 2017/11/13.
 */

/**
 * Created by tdzl2003 on 12/18/16.
 */
import React, {Component} from "react";
import {FlatList, Image, StyleSheet, Text, TextInput, TouchableOpacity, View} from "react-native";

import {xnBorderWidth} from "../utils/utils";
import AppService from "../service/AppService";
import dismissKeyboard from 'react-native/Libraries/Utilities/dismissKeyboard';
import LoadingView from '../components/LoadingView';
import Footer from './public/Footer';
import EmptyView from './public/EmptyView';
import moment from "moment";
import {onResponseError} from "../utils/Common";

let dayTime = moment(new Date()).utc().zone(-8).format('YYYY-MM-DD');
console.log(dayTime);
let isLoading = false;

export default class SearchPosition extends Component {

    pageSize = 10;
    pageNumber = 1;

    constructor(props) {
        super(props);
        this.state = {
            isSearch: false,
            keyword: "",
            totalCount: 0,
            startLoading: false,
            isRefreshing: false,
            isLoadMore: false,
            isEmpty: false,   //空数据
            positionList: []
        };
    }

    static navigationOptions = ({navigation, screenProps}) => ({});

    componentDidMount() {
        let _this = this;
        //设置头部
        this.props.navigation.setParams({
            title: '搜索',
            isBack: true
        });

    };

    _getList = (state, isLoad, cancelKeyword) => {
        let _this = this;
        this.pageNumber = 1;
        this.setState({
            isLoadMore: false,
            isEmpty: false,
            positionList: [],
        });

        setTimeout(function () {
            _this.getList(state, isLoad, cancelKeyword);
        }, 350)
    };

    getList = (state, isLoad, cancelKeyword) => {
        let _this = this;
        if (_this.state.isLoadMore) {
            return
        }

        //      判断是否正在加载
        if (isLoad && isLoading) {
            return
        }

        let vm = {
            pageSize: _this.pageSize,
            pageNumber: this.pageNumber,
            tenantId: global.tenantId,
            keyword: _this.state.keyword,
        };

        if (cancelKeyword) {
            vm.keyword = null;
        }

        isLoading = true;
        console.log(vm);

        AppService.getPosition(vm).then(data => {
            isLoading = false;
            console.log(data);
            if (!onResponseError(data, true)) {
                _this.setState({
                    totalCount: Number(data.totalCount)
                });
                _this.setData(data);
            }
        })

    };


    setData = function (data) {
        let _this = this;
        let positionList = _this.state.positionList;
        let newDate = new Date().getTime();

        let thinkLength = (_this.pageNumber - 1) * _this.pageSize;

        if (positionList.length != thinkLength) {
            //数据重复
            return
        }

        if (data.result && data.result.length > 0) {

            for (let i = 0; i < data.result.length; i++) {
                let position = data.result[i];
                let organizationName = !!position.organizationName ? position.organizationName + '-' : '';
                let jobName = !!position.jobName ? position.jobName + '-' : '';
                let name = position.lastName + position.firstName;
                position.showName = organizationName + jobName + name;

                positionList.push(position);
            }

            _this.setState({
                positionList: positionList
            });
            console.log(_this.state.positionList);
        }

//         分页
        let totalCount = Number(data.totalCount);
        if (totalCount == 0) {
            _this.setState({
                isEmpty: true
            });
        }

        let maxPage = Math.ceil(totalCount / _this.pageSize);

        if (maxPage == _this.pageNumber) {
            _this.setState({
                isLoadMore: true
            });
        } else {
            _this.pageNumber++;
            _this.setState({
                isLoadMore: false
            });
        }
        //首次加载
        _this.setState({
            startLoading: false,
            isRefreshing: false
        });
    }

    onChangeText = (value) => {
        let _this = this;
        this.setState({
            keyword: value,
        });

    };

    cancel = (value) => {
        let _this = this;
        this.setState({
            keyword: null,
            isSearch: false
        });
        dismissKeyboard();
        _this.props.navigation.goBack();
    };

    render() {
        return (
            <View style={styles.body}>
                <View style={styles.searchLayout}>
                    <View style={styles.search}>
                        <Image style={styles.searchIcon} resizeMode="contain" source={require('../img/search.png')}/>
                        <TextInput style={styles.searchInput} placeholder={'搜索'} returnKeyType="search"
                                   onSubmitEditing={(text) => {
                                       this._getList(this.state.state)
                                   }} autoFocus={true} onFocus={() => {
                            this.setState({isSearch: true})
                        }}
                                   underlineColorAndroid="transparent" value={this.state.keyword}
                                   onChangeText={(text) => {
                                       this.onChangeText(text)
                                   }}/>

                    </View>
                    {this.state.isSearch && <TouchableOpacity style={{marginLeft: 10}} onPress={() => {
                        this.cancel()
                    }}><Text style={{fontSize: 16, color: '#333'}}>取消</Text></TouchableOpacity>}
                </View>
                <View style={styles.listBoxLayout}>
                    {!this.state.startLoading && !this.state.isEmpty &&
                    <FlatList style={styles.listLayout}
                              initialListSize={1}
                              keyExtractor={this.keyExtractor}
                              extraData={this.state}
                              showsVerticalScrollIndicator={false}
                              data={this.state.positionList}
                              renderItem={this.renderItem.bind(this)}
                              onEndReached={() => this.getList(this.state.state, true)}
                              onEndReachedThreshold={10}
                              automaticallyAdjustContentInsets={false}
                              renderFooter={this.renderFooter}
                              automaticallyAdjustContentInsets={false}

                    />
                    }
                    {!this.state.startLoading && this.state.isEmpty &&
                    <EmptyView refreshing={this.state.isRefreshing} title={'暂无数据'}/>}
                    {!this.state.startLoading && <View/>}
                    {this.state.startLoading && <LoadingView/>}
                </View>
            </View>
        );
    }

    renderFooter = () => {
        return this.state.isLoadMore ? <Footer isLoadAll={true}/> : <Footer isLoadAll={false}/>;
    };

    keyExtractor = (item, index) => index;

    renderItem({item, index}) {
        return (
            <View style={styles.model} key={index}>
                <TouchableOpacity style={styles.modelLine} onPress={() => {
                    if (this.props.navigation.state.params.callBack) {
                        this.props.navigation.state.params.callBack(item);
                    }
                    this.props.navigation.goBack();
                }}>
                    <View style={styles.modelImg}>
                    </View>
                    <Text>{item.showName}</Text>
                </TouchableOpacity>
            </View>
        )
    };

}

const styles = StyleSheet.create({
    body: {
        flex: 1,
        flexDirection: "column",
        backgroundColor: "#f0eff5",
    },
    searchLayout: {
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 15,
        paddingRight: 15,
        backgroundColor: '#fff',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },
    search: {
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        height: 35,
        backgroundColor: '#f5f5f5',
        paddingLeft: 10,
        flex: 1,
        borderRadius: 4
    },
    searchIcon: {
        width: 16,
        height: 16,
        marginRight: 10,
    },
    searchInput: {
        padding: 0,
        color: "#333",
        flex: 1,
        fontSize: 14,
        height: 20,
        alignItems: 'center',
        alignContent: 'center',

        flexWrap: "nowrap",
    },


    listBoxLayout: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: '#fff',

    },
    listLayout: {
        flex: 1,
        flexDirection: 'column',
    },

    model: {
        paddingTop: 10,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 10,
        backgroundColor: "#fff",
        flexDirection: 'column',
        borderBottomWidth: xnBorderWidth(),
        borderBottomColor: "#ddd",
        borderStyle: "solid",
    },
    modelLine: {
        flex: 1,
        flexDirection: "row",
        alignItems: 'center'
    },
    modelImg: {
        width: 10,
        height: 40,
        marginRight: 10,
        flexDirection: "column",
        justifyContent: "center",
    },
    modelIcon: {
        width: 40,
        height: 40,
    },
    modelContent: {
        flex: 1,
        flexDirection: "column",
        paddingTop: 3
    },
    titleBox: {
        height: 20,
    },
    title: {
        fontSize: 16,
        color: "#333",
        fontWeight: '600'
    },
    info: {
        marginRight: 5,
        marginTop: 5,
        flex: 1,
        flexDirection: "row",
        justifyContent: "space-between",
    },
    infoNew: {
        fontSize: 12,
        marginRight: 5,
        color: "#dcc38a",
    },
    infoWithdrawn: {
        fontSize: 12,
        marginRight: 5,
        color: "#999",
    },
    infoInProcess: {
        fontSize: 12,
        marginRight: 5,
        color: "#ff6600",
    },
    infoApproved: {
        fontSize: 12,
        marginRight: 5,
        color: "#28c35a",
    },
    infoRejected: {
        fontSize: 12,
        marginRight: 5,
        color: "#ea281a",
    },
    showTime: {},
    time: {
        fontSize: 10,
        color: "#999"
    },
    refreshControlBase: {
        backgroundColor: 'transparent'
    }


});
// {v.flowStatus=="NEW" &&<Text style={styles.infoNew} >未提交</Text>}
// {v.flowStatus=="WITHDRAWN"&&<Text style={styles.infoWithdrawn} >已撤回</Text>}
// {v.flowStatus=="IN_PROCESS"&&<Text style={styles.infoInProcess} >审批中</Text>}
// {v.flowStatus=="APPROVED"&&<Text style={styles.infoApproved} >已完成(同意)</Text>}
// {v.flowStatus=="REJECTED"&&<Text style={styles.infoRejected} >已完成(拒绝)</Text>}