import Taro, { Component } from '@tarojs/taro';
import { queryCardFansList } from '@/services/card'
import { queryItemFansList } from '@/services/item'
import EmptyPage from '@/components/empty-page'
import FansItem from './item'
import ListView from '@/components/ListView'
import { savePoint, updatePoint } from '@/services/common'
let pageIndex = 1
export default class Index extends Component {
  config = {
    navigationBarTitleText: '围观记录'
  }
  state = {
    list: [],
    hasMore: true,
    isEmpty: false,
    recordId: null,
    pageIndex: 1,
    noRecord: false,
  }
  componentDidMount() {
    // Taro.showLoading()
    this.loadList(1);
    // this.loadList();

    // App.zhuge.track('查看粉丝页面')
  }

  loadList(pageNumber) {
    const {
      id,
      type = 'card'
    } = this.$router.params

    const payload = { pageSize: 50, pageNumber: 1 }
    // const payload = { pageSize: 50, pageNumber }
    if (type === "card") {
      // 埋点
      savePoint({
        event: 'fans',
        eventType: 'card',
        propertyName: '粉丝访问记录列表',
        data: '{}'
      }).then(res => {
        this.setState({
          recordId: res.recordId
        })
        console.log('粉丝访问记录列表')
      })
      queryCardFansList(id, payload).then(res => {
        const { records } = res

        this.setState({
          list: records,
          noRecord: records.length ? false : true
        })
        Taro.hideLoading()
      }).catch(err => {
        Taro.hideLoading()
        console.log(err, '我的主页')
      })

    } else {
      // 埋点
      savePoint({
        event: 'person',
        eventType: 'building',
        propertyName: '查看围观列表',
        data: '{}'
      }).then(res => {
        this.setState({
          recordId: res.recordId
        })
        console.log('查看围观列表')
      })
      queryItemFansList(id, payload).then(res => {
        const { records } = res
        this.setState({
          list: records,
          noRecord: records.length ? false : true
        })
        Taro.hideLoading()
      }).catch(err => {
        Taro.hideLoading()
        console.log(err, '我的主页')
      })
    }

    // return type === "card" ? queryCardFansList(id, payload) : queryItemFansList(id, payload)
  }
  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
  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++
    console.log(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
    });
    fn && fn();
  }

  render() {
    const { hasMore, isEmpty, list, noRecord } = this.state
    // const { hasMore, isEmpty, list } = this.state

    return (
      // <ListView
      //   needInit
      //   isEmpty={isEmpty}
      //   emptyText="暂无更多粉丝哦~"
      //   hasMore={hasMore}
      //   style={{ height: '100vh' }}
      //   onPullDownRefresh={fn => this.onPullDownRefresh(fn)}
      //   onScrollToLower={fn => this.onScrollToLower(fn)}
      // >
      //   {list.map(item => <FansItem key={item.uvId} data={item} />)}
      // </ListView>
      // <View>
      <Block>
        {!noRecord ?
          <View>
            {list.map(item =>
              <FansItem key={item.uvId} data={item} />)}
            {list.length >= 50 && <View style="text-align:center;line-height:120rpx;font-size:24rpx;color:#999"> 仅展示最近50条围观记录</View>}
          </View>
          : <EmptyPage text="暂无围观记录哦~" />
        }

      </Block>
    );
  }
}