import Taro, { Component } from '@tarojs/taro';
import ListView from '@/components/ListView'
import { connect } from '@tarojs/redux'
import './index.scss'
import { getSharePersonList } from '@/services/person'
import { savePoint, updatePoint } from '@/services/common'
import { transferImage } from '@/utils/tools'

const emptyImg = require('@/assets/empty.png')
@connect(state => state.user)

export default class Person extends Taro.Component {
  config = {
    navigationBarTitleText: '我的分享'
  }

  state = {
    recordId: undefined, // 埋点ID
    recordList: [],
    hasMore: true,
    isEmpty: false,
    pageIndex: 1,
  }

  componentWillMount() {

    savePoint({
      event: 'list',
      eventType: 'activity',
      propertyName: '我的分享',
      data: '{}'
    }).then(res => {
      this.setState({
        recordId: res.recordId
      })
      console.log('我的分享')
    })
  }
  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }

  loadList(pageNumber) {
    const { userInfo: { person } } = this.props

    let payload
    if (person.userId) {
      payload = {
        userId: person.userId,
        pageNumber,
        pageSize: 10
      }
    } else {
      payload = {
        userId: Taro.getStorageSync('userId'),
        pageNumber,
        pageSize: 10
      }
    }
    getSharePersonList(payload).then(res => {

      const { records, list, total, current, pages } = res || {}
      const _list = records || list || []
      const newList = current <= 1 ? _list : this.state.recordList.concat(_list)

      this.setState({
        recordList: newList,
        isEmpty: total == 0,
        hasMore: current < pages,
        pageIndex: current >= pages ? pages : current
      })
      Taro.hideLoading()
    })
  }
  onScrollToLower = async (fn) => {
    const { pageIndex } = this.state;
    this.loadList(pageIndex + 1)
    fn && fn();
  }
  onPullDownRefresh = (rest) => {
    // debugger
    if (this.refreshing) return
    this.refreshing = true
    this.loadList(1)
    rest && rest()
    this.refreshing = false
  }

  handleItemClick(item) {
    if (item.eventType == "project") {
      Taro.navigateTo({
        url: `/pages/person/myShare/accessRecord?targetId=${item.targetId}&eventType=building`
      })
    } else {
      Taro.navigateTo({
        url: `/pages/person/myShare/accessRecord?targetId=${item.targetId}&eventType=${item.eventType}`
      })
    }

  }

  render() {
    const { isEmpty, hasMore, recordList } = this.state
    return (
      <ListView
        className="wrap"
        needInit
        isEmpty={isEmpty}
        emptyText="暂无我的分享~"
        hasMore={hasMore}
        onPullDownRefresh={fn => this.onPullDownRefresh(fn)}
        onScrollToLower={fn => this.onScrollToLower(fn)}
      >
        <View className='share-page'>
          {
            recordList.map(item => (
              <View className="share-item" key={item.targetId + 'share'} onClick={this.handleItemClick.bind(this, item)}>
                <Image className="img" mode="aspectFill" src={transferImage(item.activityImg || emptyImg)}></Image>
                <View className={item.eventType == 'project' ? 'building' : 'name'}>{item.activityName || ''}</View>
  
                {item.eventType == 'project' && <View className="price"> {item.price || '暂无均价'} </View>}

                {item.eventType == 'h5' && <View className="num"> {item.drainageShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'house' && <View className="num"> {item.houseShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'live' && <View className="num"> {item.liveShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'project' && <View className="num"> {item.buildingNum || '0'}人查看了分享 </View>}
                {item.eventType == 'group' && <View className="num"> {item.groupActivityShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'help' && <View className="num"> {item.helpActivityShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'activity' && <View className="num"> {item.activityShareNum || '0'}人查看了分享 </View>}
                {item.eventType == 'news' && <View className="num"> {item.newsNum || '0'}人查看了分享 </View>}
                {item.eventType == 'project' && <View className="address"> {item.address || ''} </View>}
              </View>
            ))
          }
        </View>
      </ListView>
    )
  }
}
