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

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

  render() {
    return (
      <View style={{ marginBottom: 50 }}>
        <SearchComponent onSearchSubmit={this.onSearchSubmit} onSearchChange={this.onSearchChange} />
        <FlatList
          data={this.props.DSRInfo.sourceData}
          keyExtractor={this.keyExtractor}
          renderItem={this.renderItem}
          // 决定当距离内容最底部还有多远时触发onEndReached回调；数值范围0~1，例如：0.5表示可见布局的最底端距离content最底端等于可见布局一半高度的时候调用该回调
          onEndReachedThreshold={0.3}
          // 当列表被滚动到距离内容最底部不足onEndReacchedThreshold设置的距离时调用
          onEndReached={this.onEndReached}
          ListFooterComponent={this.renderFooter}
          ListEmptyComponent={this.renderEmptyView}
          refreshing={this.props.loading || false}
          onRefresh={this.renderRefresh}

          // 是一个可选的优化，用于避免动态测量内容，+1是加上分割线的高度
        />
      </View>
    );
  }
}
export default DSRInfoScreeen;
