/**
 * Created by zhouhuan on 2017/10/30.
 */
import React from 'react';
import Icon from 'react-native-vector-icons/FontAwesome';
import { View, FlatList } from 'react-native';
import { WingBlank, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import { createAction } from '../../../utils';
import FlatListItem from '../../../components/FlatListItem';
import SearchComponent from '../../../components/searchComponent';

@connect(({ peopleInfo, loading }) => ({ peopleInfo, loading: !!loading.effects['peopleInfo/getPeopleInfo'] }))
class PeopleInfo extends React.Component {
  componentDidMount() {
    this.props.dispatch(createAction('peopleInfo/getPeopleInfo')({ clear: '', pxingMing: this.props.peopleInfo.searchValue }));
  }
  onSearchSubmit = (pxingMing) => {
    this.props.dispatch(createAction('peopleInfo/getPeopleInfo')({ clear: 'clear', pxingMing }));
  };
  onSearchChange = (pxingMing) => {
    this.props.dispatch(createAction('peopleInfo/setSearchValue')(pxingMing));
    console.info(this.props.peopleInfo);
  };
  onPressItem = (id) => {
    this.props.dispatch(createAction('peopleInfo/jumpPage')(id));
  };
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      this.props.dispatch(createAction('peopleInfo/getPeopleInfo')({ clear: '', pxingMing: this.props.peopleInfo.searchValue }));
    }
  };
  addClick =() => {
    this.props.dispatch(createAction('peopleInfo/addPeopleInfo')());
  };
  keyExtractor = item => `${item.id}`;
  // 下拉刷新
  renderRefresh = () => {
    if (!this.props.loading) {
      this.props.dispatch(createAction('peopleInfo/getPeopleInfo')({ clear: 'clear', pxingMing: this.props.peopleInfo.searchValue }));
    }
  };
  renderItem =({ item }) => {
    return (
      <FlatListItem
        title={item.xingMing}
        meta={this.props.peopleInfo.metas}
        item={item}
        onPressItem={this.onPressItem}
      />
    );
  };
  render() {
    const { sourceData } = this.props.peopleInfo;
    const myButton = (
      <Icon.Button name="plus" backgroundColor="#08BBF9" onPress={this.addClick}>
        新增人口
      </Icon.Button>
    );
    const flatList = (
      <FlatList
        data={sourceData}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        onEndReachedThreshold={0.3}
        onEndReached={this.onEndReached}
        refreshing={this.props.loading}
        onRefresh={this.renderRefresh}
      />);
    return (
      <View>
        <SearchComponent onSearchSubmit={this.onSearchSubmit} onSearchChange={this.onSearchChange} />
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          {myButton}
        </WingBlank>
        {flatList}
      </View>
    );
  }
}
export default PeopleInfo;
