import Taro, { Component } from '@tarojs/taro';
import './index.scss'

import ListView from '@components/ListView'
// import Search from '@components/search'
import ProjectItem from '../item'
import Filter from './filter'
import { getItemList } from '@services/item'
import { connect } from '@tarojs/redux'
import { savePoint, updatePoint } from '@services/common'
let pageIndex = 1

@connect(({ city }) => ({ ...city }))
export default class Index extends Component {
  config = {
    navigationBarTitleText: '楼盘列表'
  }

  state = {
    list: [],
    hasMore: true,
    isEmpty: false,
    recordId: null,
    filterOpt: {},
    pageIndex:1
  }

  componentWillMount() {
    savePoint({
      event: 'list',
      eventType: 'building',
      propertyName: '楼盘列表',
      data: '{}'
    }).then(res => {
      this.setState({
        recordId: res.recordId
      })
      console.log('楼盘列表')
    })
  }

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }

  componentDidShow() {
    this.ref && this.ref.fetchInit()
  }

  loadList(pageNumber) {
    const { curCity } = this.props
    const { filterOpt } = this.state
    const payload = Object.assign({ pageSize: 10, pageNumber }, filterOpt)
    if (curCity.id) {
      payload.cityId = curCity.id
    }
    return getItemList(payload)
  }

  onPullDownRefresh = async (rest) => {
    const { records: list, total } = await this.loadList(1);
    this.setState({
      list,
      isEmpty: total == 0,
      hasMore: list.length >= total ? false : true,
      pageIndex:1
    })
    rest && rest()
  }

  onScrollToLower = async (fn) => {
    const { list } = this.state;
    pageIndex++
    const { records, total } = await this.loadList(this.state.pageIndex+1);
    const newList = list.concat(records)
    this.setState({
      list: newList,
      hasMore: newList.length >= total ? false : true,
      pageIndex:this.state.pageIndex+1
    },()=>{
      console.log('pageIndex:'+this.state.pageIndex)
    });
    fn && fn();
  }

  onViewDetail(item) {
    Taro.navigateTo({
      url: `/pages/project/detail/index?id=${item.buildingId}`
    })
  }

  handleFilter = (payload, callback) => {
    this.setState({
      filterOpt: payload
    }, () => {
      this.ref.fetchInit()
      callback && callback()
    })
  }

  render() {
    const { hasMore, isEmpty, list } = this.state
    return (
      <View>
        <Filter onFilter={this.handleFilter}></Filter>
        < ListView
          needInit
          isEmpty={isEmpty}
          emptyText="暂无楼盘哦~"
          hasMore={hasMore}
          className="list-view"
          style={{ height: '100vh' }
          }
          onPullDownRefresh={fn => this.onPullDownRefresh(fn)}
          onScrollToLower={fn => this.onScrollToLower(fn)}
          ref={ref => { this.ref = ref }}
        >
          <View className="list">
            {
              list.map(item => (
                <ProjectItem
                  key={item.buildingId}
                  onClick={this.onViewDetail.bind(this, item)}
                  data={item}
                />
              ))
            }
          </View>
        </ListView >
      </View >
    );
  }
}