import React, { Component } from 'react';
import { FlatList, Text } from 'react-native';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
import { connect } from 'react-redux';
import { createAction } from '../../../utils';
import FlatListItem from '../../../components/FlatListItem';

@connect(({ ListHouse, loading }) => ({ ListHouse, loading: !!loading.effects['ListHouse/getHouseList'] }))
class ListHouContent extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    dispatch(createAction('ListHouse/getHouseList')());
  }

  // 上拉加载更多
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      this.props.dispatch(createAction('ListHouse/getHouseList')());
    }
  };
  onPressItem = (id) => {
    // this.props.navigation.navigate('HouseDetail', { id });
    this.props.dispatch(createAction('ListHouse/jumpPage')(id));
  };
  getItemLayout = (data, index) => (
    { length: 120, offset: (120 + 1) * index, index }
  );
  /**
   * 此函数用于为给定的item生成一个不重复的Key。
   * Key的作用是使React能够区分同类元素的不同个体，以便在刷新时能够确定其变化的位置，减少重新渲染的开销。
   * 若不指定此函数，则默认抽取item.key作为key值。
   * 若item.key也不存在，则使用数组下标
   *
   * @param item
   * @private
   */
  // 这里指定使用数组下标作为唯一索引
  keyExtractor = item => `${item.id}`;
  // Footer布局
  renderFooter = () => (
    <WhiteSpace size="lg">
      <Card>
        <Card.Body>
          <Text>到底了！！！</Text>
        </Card.Body>
      </Card>
    </WhiteSpace>
  );
  // 空布局
  renderEmptyView = () => (
    <WingBlank size="lg">
      <Card>
        <Card.Body>
          <Text>当前无内容</Text>
        </Card.Body>
      </Card>
    </WingBlank>
  );
  // 下拉刷新
  renderRefresh = () => {
    if (!this.props.loading) {
      this.props.dispatch(createAction('ListHouse/getHouseList')('clear'));
    }
  };
  /**
   * 使用箭头函数防止不必要的re-render；
   * 如果使用bind方式来绑定onPressItem，每次都会生成一个新的函数，导致props在===比较时返回false，
   * 从而触发自身的一次不必要的重新render，也就是FlatListItem组件每次都会重新渲染。
   *
   * @param id
   * @private
   */
  renderItem = ({ item }) => {
    return (
      <FlatListItem
        title={item.fangWuZuoLuo}
        meta={this.props.ListHouse.metas}
        item={item}
        onPressItem={this.onPressItem}
      />
    );
  };

  render() {
    return (
      <FlatList
        data={this.props.ListHouse.sourceData}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
        // 决定当距离内容最底部还有多远时触发onEndReached回调；数值范围0~1，例如：0.5表示可见布局的最底端距离content最底端等于可见布局一半高度的时候调用该回调
        onEndReachedThreshold={0.3}
        // 当列表被滚动到距离内容最底部不足onEndReacchedThreshold设置的距离时调用
        onEndReached={this.onEndReached}
        ListHeaderComponent={this.renderHeader}
        ListFooterComponent={this.renderFooter}
        ListEmptyComponent={this.renderEmptyView}
        refreshing={this.props.loading}
        onRefresh={this.renderRefresh}
        // 是一个可选的优化，用于避免动态测量内容，+1是加上分割线的高度
      />

    );
  }
}

export default ListHouContent;
