import Taro, { Component } from '@tarojs/taro';
import Authorize from '@components/authorize'
import ListView from '@components/ListView'
import './index.scss'
import { savePoint, updatePoint } from '@services/common'
import { connect } from '@tarojs/redux'
import { queryCustomerList } from '@services/person'
const iconImg = require('@assets/person/icon.png')


@connect(({ user, city }) => ({ user, city }))
export default class transactionCustomer extends Taro.Component {

  config = {
    navigationBarTitleText: '成交客户'
  }

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

  componentWillUnmount() {
    const { recordId } = this.state
    recordId && updatePoint(recordId)
  }
  componentDidShow() {
    Taro.showLoading()
    this.loadList(1)

  }
  loadList(pageNumber) {
    const payload = {
      type: 'clinch',
      pageNumber,
      pageSize: 9999
    }
    queryCustomerList(payload.type, payload).then(res => {
      const { records, list, total, current, pages } = res || {}
      const _list = records || list || []
      const newList = current <= 1 ? _list : this.state.customerList.concat(_list)
      this.setState({
        customerList: 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
  }

  render() {
    const { customerList, isEmpty, hasMore } = this.state

    return (
      <View style="padding:10px">
        <ListView
          className="wrap"
          needInit
          isEmpty={isEmpty}
          emptyText="暂无成交客户~"
          hasMore={hasMore}
          onPullDownRefresh={fn => this.onPullDownRefresh(fn)}
          onScrollToLower={fn => this.onScrollToLower(fn)}
        >
          <View className="list">
            {
              !customerList.length &&
              <View></View>
              // <View style="margin:50px auto;text-align:center;font-size:14px;color:#888">暂无成交客户~</View>
            }
            {
              customerList.length &&
              customerList.map((item, index) => (
                <View class="item" key={index + 'transaction'}>
                  <Image src={item.picture || require('@assets/default-avatar.png')} className='img'></Image>
                  <View className="name">
                    {item.name}
                    {
                      item.sex == '1' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px -20px;width: 18px;height: 18px;`}></View>
                    }
                    {
                      item.sex == '2' && <View style={`margin-left:10px;background-image: url(${iconImg});background-size: 100%;background-position: 0px 0px;width: 18px;height: 18px;`}></View>
                    }
                  </View>
                  <View className="phone">{item.phone} </View>
                  <View style={`background-image: url(${iconImg});background-size: 100%;background-position: 0px -44px;width: 22px;height: 22px;`}></View>
                </View>
              ))
            }
          </View>
        </ListView>


      </View>
    )
  }
}