/**
 * 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';

@connect(({ peopleInfo, loading }) => ({ peopleInfo, loading: !!loading.effects['peopleInfo/getPeopleInfo'] }))
class PeopleInfo extends React.Component {
  componentDidMount() {
    this.props.dispatch(createAction('peopleInfo/getPeopleInfo')());
  }
  onPressItem = (id) => {
    console.log(id);
    this.props.dispatch(createAction('peopleInfo/jumpPage')(id));
    // this.props.dispatch(createAction('peopleInfo/getPeopleDetail')(id));
  };
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      this.props.dispatch(createAction('peopleInfo/getPeopleInfo')());
    }
  };
  addClick =() => {
    this.props.dispatch(createAction('peopleInfo/addPeopleInfo')());
  };
  keyExtractor = item => `${item.id}`;
  // 下拉刷新
  renderRefresh = () => {
    if (!this.props.loading) {
      this.props.dispatch(createAction('peopleInfo/getPeopleInfo')('clear'));
    }
  };
  renderItem =({ item }) => {
    // console.log(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>
        <View>
          <WingBlank size="lg">
            <WhiteSpace size="lg" />
            {myButton}
          </WingBlank>
        </View>
        {flatList}
      </View>
    );
  }
}
export default PeopleInfo;
